/* Idle — the marketing page (idle.events).
   The app's own look (Juliana, 2026-10-16: "update the website to match the app's new design direction"):
   the dark ground with the stage glow behind it, Bricolage Grotesque, cream words, one coral, the dark
   glass with its lit edge, pills and the one corner (12). The values are the app's tokens
   (Idle/UI/DesignSystem/IdleDesignTokens.swift, docs/redesign/design-system.md).
   The link pages (/l/ and /i/) keep styles.css and link.css; this file is the marketing page's alone. */

@font-face { font-family: "Bricolage"; src: url("assets/fonts/Bricolage-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("assets/fonts/Bricolage-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("assets/fonts/Bricolage-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("assets/fonts/Bricolage-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Display"; src: url("assets/fonts/Bricolage-Display.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* IdleColor */
  --ground: #0F0D0C;
  --surface: #24211E;
  --surface-deep: #1A1816;
  --line: #2E2A26;
  --text: #F5EFE4;
  --grey: #A89F91;
  --grey-deep: #5F594F;
  --coral: #EE3A48;
  /* IdleStageLight: for the glow only, never on words, controls or cards */
  --lilac: #B59CFF;
  --violet: #A398E3;
  --magenta: #B74C6B;

  --text-face: "Bricolage", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --display-face: "Bricolage Display", "Bricolage", -apple-system, system-ui, sans-serif;

  --corner: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(16px, 5vw, 64px);
  --section: clamp(96px, 12vw, 168px);
  /* Between a section's title block and what it shows. */
  --head-gap: clamp(36px, 4.6vw, 64px);
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; background: var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--text-face);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
::selection { background: var(--coral); color: var(--text); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--text); color: var(--ground); padding: 10px 14px; border-radius: 999px;
  text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }

.wrap { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.coral { color: var(--coral); }

/* ───────────── The stage glow ─────────────
   The app's IdleStageGlow, spread form: small, soft patches of lilac first and coral second, dark between
   them and dark where a title sits. Each section its own arrangement, so it never looks repeated. */

.stage { position: relative; isolation: isolate; overflow: hidden; }
.glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  filter: blur(48px) saturate(1.4);
  opacity: .9;
}
.glow i {
  position: absolute; border-radius: 50%;
  width: var(--s, 420px); height: var(--s, 420px);
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 40%, transparent) 45%, transparent 100%);
  opacity: var(--o, .5);
}
.glow .l { --c: var(--lilac); }
.glow .v { --c: var(--violet); }
.glow .m { --c: var(--magenta); }
.glow .c { --c: var(--coral); }
/* The darkest part sits under the title. */
.glow::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ground) 0%, transparent 22%, transparent 78%, var(--ground) 100%);
}

/* ───────────── Glass ─────────────
   The dark glass (IdleCardGlass): the page shows through, blurred and dimmed, with Liquid Glass's lit
   edge — a hairline brightest at the top left, fading across the middle, lit again at the bottom right. */

.glass, .pill-glass, .btn-glass, .btn-coral {
  position: relative; isolation: isolate;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}
.glass {
  background: rgba(14, 11, 11, .34);
  border-radius: var(--corner);
}
.glass::after, .pill-glass::after, .btn-glass::after, .btn-coral::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(245, 239, 228, .55) 0%, rgba(245, 239, 228, .10) 30%, rgba(245, 239, 228, .04) 60%, rgba(245, 239, 228, .30) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.pill-glass {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgba(14, 11, 11, .4);
  font-size: 13px; font-weight: 400; color: var(--grey); white-space: nowrap;
}

/* ───────────── Type ─────────────
   Titles a step smaller (Juliana, 2026-10-17: "all titles… are a little bit too big"); no small label over them
   ("remove all the eyebrows above titles"). */

.display {
  font-family: var(--display-face);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 66px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.lede {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  color: var(--grey);
  max-width: 34em;
  margin: 0 0 18px;
  text-wrap: pretty;
}
.lede em { font-style: normal; color: var(--text); font-weight: 500; }

/* ───────────── The mascot (A+ "Signal, with a gaze") ───────────── */

.mascot { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; }
.mascot--lg { width: 40px; height: 40px; }

/* ───────────── Nav: a bar across the top, as before, on the tab bar's frosted glass ───────────── */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 60px;
  background: rgba(15, 13, 12, .55);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.is-scrolled { border-bottom-color: rgba(245, 239, 228, .08); }
.nav-inner {
  max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo img { width: 58px; height: auto; }
.nav-links { display: flex; gap: 34px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--grey); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav .nav-cta { padding: 8px 16px; font-size: 13px; }

/* ───────────── Buttons: pills that hug their words, never full width ───────────── */

.btn-coral, .btn-glass {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px;
  font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--text);
}
/* The main button: coral Liquid Glass, see-through, a shine across its top (IdleCoralGlass). */
.btn-coral {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 55%),
    rgba(238, 58, 72, .72);
  box-shadow: 0 14px 34px -14px rgba(238, 58, 72, .75);
}
.btn-glass { background: rgba(14, 11, 11, .38); font-weight: 500; }
.btn-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 500; text-decoration: none; color: var(--grey);
  padding: 14px 6px; transition: color .2s;
}
.btn-link:hover { color: var(--text); }
.btn-link svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.btn-link:hover svg { transform: translateY(3px); }

/* ───────────── Phone frame ───────────── */

.phone {
  --w: 320px;
  --bezel: calc(var(--w) * .03);
  position: relative;
  width: var(--w);
  padding: var(--bezel);
  border-radius: calc(var(--w) * .165);
  background: linear-gradient(145deg, #3d3936 0%, #141211 45%, #2c2826 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .16),
    inset 0 0 0 calc(var(--bezel) * .55) #050505,
    0 0 0 1px rgba(255, 255, 255, .04),
    0 50px 110px -40px rgba(181, 156, 255, .35),
    0 30px 60px -20px rgba(0, 0, 0, .8);
  flex-shrink: 0;
}
.phone > img, .app-screen {
  width: 100%;
  aspect-ratio: 828 / 1792;
  border-radius: calc(var(--w) * .135);
  overflow: hidden;
  object-fit: cover;
  background: var(--ground);
}

/* ───────────── Reveal ───────────── */

.reveal, .rise {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in, .rise.is-in { opacity: 1; transform: none; }

/* ───────────── Hero ───────────── */

.hero {
  padding: calc(70px + clamp(56px, 7vw, 104px)) var(--gutter) calc(var(--section) / 2);
  text-align: center;
}
.hero-copy { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; }
.hero-title {
  font-family: var(--display-face);
  font-weight: 800;
  font-size: clamp(44px, 7.6vw, 104px);
  line-height: .92;
  letter-spacing: -.025em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(18px, 1.75vw, 22px);
  line-height: 1.45;
  color: var(--grey);
  max-width: 30em;
  margin: 0 auto 34px;
  text-wrap: balance;
}
/* "See how it works" always under "Coming soon to iPhone" (Juliana, 2026-10-18; beside it on a wide screen before). */
.hero-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; align-items: center; }

.hero-phones {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-start;
  margin: clamp(48px, 6vw, 84px) calc(var(--gutter) * -1) 0;
  padding-top: 12px;
  height: clamp(440px, 60vw, 720px);
  overflow: hidden;
}
.phone--center { --w: clamp(240px, 27vw, 340px); z-index: 3; }
.phone--left, .phone--right { --w: clamp(200px, 22.5vw, 286px); z-index: 2; margin-top: clamp(50px, 7vw, 90px); }
.phone--left { margin-right: calc(var(--w) * -.16); }
.phone--right { margin-left: calc(var(--w) * -.16); }
.phone--left.is-in { transform: translate3d(0, var(--py, 0px), 0) rotate(-4deg); }
.phone--right.is-in { transform: translate3d(0, var(--py, 0px), 0) rotate(4deg); }
.phone--center.is-in { transform: translate3d(0, var(--py, 0px), 0); }
.hero-phones::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 32%; z-index: 4;
  background: linear-gradient(to bottom, transparent, var(--ground));
  pointer-events: none;
}

/* ───────────── Ask Idle, drawn in HTML ─────────────
   The app's Ask Idle drawer for `-IdleOpen chat:ask`: the frosted drawer, the user's bubble on dark glass,
   one reply card on the light glass with the mascot as its header, two small event cards, See all.
   Sizes are in the phone's points (402 across, the iPhone 17e), so the drawing scales with its frame. */

.app-screen { position: relative; container-type: inline-size; }
.app {
  --pt: calc(100cqw / 402);
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  color: var(--text);
  font-family: var(--text-face); font-size: calc(16 * var(--pt)); line-height: 1.3;
  text-align: left; letter-spacing: 0;
  background:
    radial-gradient(60% 30% at 30% 78%, rgba(238, 58, 72, .18), transparent 70%),
    radial-gradient(70% 35% at 75% 40%, rgba(181, 156, 255, .10), transparent 70%),
    #0B0909;
  transition: opacity .5s var(--ease);
}
:where(.app) p { margin: 0; }
.app.is-fading { opacity: 0; }

.a-status { position: relative; height: calc(54 * var(--pt)); flex-shrink: 0; }
.a-time {
  position: absolute; left: calc(26 * var(--pt)); width: calc(90 * var(--pt)); top: calc(19 * var(--pt));
  text-align: center; font: 600 calc(16 * var(--pt)) / 1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}
.a-sys {
  position: absolute; right: calc(30 * var(--pt)); top: calc(20 * var(--pt));
  display: flex; align-items: center; gap: calc(6 * var(--pt));
}
.a-sys svg { height: calc(11 * var(--pt)); width: auto; fill: currentColor; }
.a-sys svg:last-child { height: calc(12 * var(--pt)); }

/* The drawer: from just under the status bar, its top corners rounded (40), frosted, a lit top edge. */
.a-drawer {
  position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0;
  border-radius: calc(40 * var(--pt)) calc(40 * var(--pt)) 0 0;
  background: linear-gradient(to bottom, rgba(40, 36, 34, .82), rgba(22, 19, 18, .88));
  box-shadow: inset 0 calc(1 * var(--pt)) 0 rgba(245, 239, 228, .22), 0 calc(-10 * var(--pt)) calc(30 * var(--pt)) rgba(0, 0, 0, .5);
}
.a-handle {
  width: calc(36 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 999px;
  margin: calc(21 * var(--pt)) auto 0; background: rgba(245, 239, 228, .3);
}
/* The drawer's header, as the app's: the title (26, coral) at the left and the clock to past conversations at the
   right. No back button and no other button (the drawer closes by a drag down). */
.a-head {
  flex-shrink: 0; display: flex; align-items: center;
  padding: calc(27 * var(--pt)) calc(25 * var(--pt)) calc(18 * var(--pt)) calc(20 * var(--pt));
  color: var(--coral);
}
.a-title { font: 800 calc(26 * var(--pt)) / 1 var(--display-face); letter-spacing: -.02em; }
.a-head .a-history { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); margin-left: auto; color: var(--text); }

.a-view { position: relative; flex: 1; overflow: hidden; }
.a-thread {
  padding: calc(18 * var(--pt)) calc(20 * var(--pt)) calc(120 * var(--pt));
  transition: transform .7s var(--ease);
}
.a-item { display: none; }
.a-item.on { display: block; animation: a-in .55s var(--ease) both; }
.app--static .a-item.on { animation: none; }
@keyframes a-in { from { opacity: 0; transform: translateY(calc(10 * var(--pt))); } to { opacity: 1; transform: none; } }

/* The user's bubble: near black, the one corner, a tail at the bottom right. */
.a-you {
  width: fit-content; max-width: calc(290 * var(--pt)); margin: 0 0 0 auto;
  padding: calc(11 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(12 * var(--pt)) calc(12 * var(--pt)) calc(3 * var(--pt)) calc(12 * var(--pt));
  background: rgba(8, 6, 6, .78); font-size: calc(16 * var(--pt));
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) rgba(245, 239, 228, .16);
}
.a-thinking { display: flex; align-items: center; gap: calc(10 * var(--pt)); margin-top: calc(22 * var(--pt)); }
.a-thinking .mascot { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); }
.a-dots { display: inline-flex; gap: calc(5 * var(--pt)); }
.a-dots i {
  width: calc(6 * var(--pt)); height: calc(6 * var(--pt)); border-radius: 50%; background: var(--grey);
  animation: a-dot 1s ease-in-out infinite;
}
.a-dots i:nth-child(2) { animation-delay: .15s; }
.a-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes a-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* The reply card: the light glass, the mascot (40) and Idle's sentence as its header, a hairline. */
.a-reply {
  margin-top: calc(18 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: linear-gradient(to bottom, rgba(245, 239, 228, .13), rgba(245, 239, 228, .07));
  box-shadow: inset 0 calc(1 * var(--pt)) 0 rgba(245, 239, 228, .28), inset 0 0 0 calc(1 * var(--pt)) rgba(245, 239, 228, .12);
  overflow: hidden;
}
.a-say {
  display: grid; grid-template-columns: calc(40 * var(--pt)) 1fr; gap: calc(14 * var(--pt)); align-items: start;
  padding: calc(14 * var(--pt)) calc(16 * var(--pt));
  font-size: calc(16 * var(--pt)); line-height: 1.3;
}
.a-say .mascot { width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); }
.a-rule { height: calc(1 * var(--pt)); background: rgba(245, 239, 228, .14); }
.a-free {
  display: flex; align-items: center; justify-content: flex-end; gap: calc(10 * var(--pt));
  padding: calc(12 * var(--pt)) calc(16 * var(--pt)) 0;
  font-size: calc(13 * var(--pt)); color: var(--grey);
}
.a-toggle {
  position: relative; width: calc(36 * var(--pt)); height: calc(20 * var(--pt)); border-radius: 999px;
  background: rgba(238, 58, 72, .7);
}
.a-toggle::after {
  content: ""; position: absolute; top: calc(2 * var(--pt)); right: calc(2 * var(--pt));
  width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); border-radius: 50%; background: #fff;
}
.a-cards {
  grid-template-columns: 1fr 1fr; gap: calc(10 * var(--pt));
  padding: calc(12 * var(--pt)) calc(14 * var(--pt)) 0;
}
.a-cards.on { display: grid; }
.a-more.on { display: flex; }
.a-more {
  justify-content: center; align-items: center; gap: calc(4 * var(--pt));
  padding: calc(12 * var(--pt)) calc(16 * var(--pt)) calc(14 * var(--pt));
  font-size: calc(13 * var(--pt)); font-weight: 600;
}
.a-more svg { width: calc(9 * var(--pt)); height: calc(9 * var(--pt)); }

/* A small event card: the photo to the card's edges, the day and time on it, the heart in its top right,
   the title and venue on the dark glass over the photo's foot, the lit edge round the card. */
.mini {
  position: relative; overflow: hidden; border-radius: calc(12 * var(--pt));
  background: #000;
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) rgba(245, 239, 228, .2);
}
.mini-photo { position: relative; height: calc(112 * var(--pt)); }
.mini-photo img { width: 100%; height: 100%; object-fit: cover; }
.mini-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 55%); }
.mini-when { position: absolute; z-index: 1; left: calc(10 * var(--pt)); top: calc(9 * var(--pt)); line-height: 1.1; }
.mini-day { display: block; font-size: calc(10.5 * var(--pt)); font-weight: 600; letter-spacing: .02em; }
.mini-time { display: block; font-size: calc(15 * var(--pt)); font-weight: 700; }
.mini-time small { font-size: calc(10.5 * var(--pt)); font-weight: 600; }
.mini-heart { position: absolute; z-index: 1; right: calc(9 * var(--pt)); top: calc(9 * var(--pt)); width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.mini-block {
  position: relative; margin-top: calc(-12 * var(--pt));
  padding: calc(10 * var(--pt)) calc(10 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(12 * var(--pt)) calc(12 * var(--pt)) 0 0;
  background: rgba(22, 19, 18, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 calc(1 * var(--pt)) 0 rgba(245, 239, 228, .14), 0 calc(-6 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, .35);
}
.mini-title { font-size: calc(14 * var(--pt)); font-weight: 600; line-height: 1.2; min-height: 2.4em; }
.mini-venue { margin-top: calc(4 * var(--pt)); font-size: calc(12 * var(--pt)); color: var(--grey); }

/* The message bar, a pill on the drawer's foot. */
.a-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(40 * var(--pt)) calc(16 * var(--pt)) calc(30 * var(--pt));
  background: linear-gradient(to bottom, transparent, rgba(22, 19, 18, .95) 40%);
}
.a-input {
  display: flex; align-items: center; gap: calc(10 * var(--pt));
  min-height: calc(46 * var(--pt)); border-radius: 999px;
  padding: calc(10 * var(--pt)) calc(14 * var(--pt)) calc(10 * var(--pt)) calc(18 * var(--pt));
  background: rgba(245, 239, 228, .07);
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) rgba(245, 239, 228, .1);
}
.a-field { flex: 1; min-width: 0; font-size: calc(15 * var(--pt)); line-height: 1.3; overflow-wrap: anywhere; }
.a-ph { color: var(--grey-deep); }
.a-typed:not(:empty) + .a-ph { display: none; }
.a-typed:not(:empty)::after {
  content: ""; display: inline-block; width: calc(1.6 * var(--pt)); height: 1.1em; margin-left: 1px;
  background: var(--coral); vertical-align: -0.18em; animation: blink 1s steps(1) infinite;
}
.a-send {
  width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--grey-deep);
  transition: transform .2s var(--ease), background-color .2s, color .2s;
}
.a-send svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.a-send.is-hot { background: var(--coral); color: #fff; }
.a-send.is-pressed { transform: scale(.88); }
@keyframes blink { 50% { opacity: 0; } }

/* ───────────── Sections ───────────── */

/* **One gap between every two sections** (Juliana, 2026-10-17: "make sure that the space between each main section is
   cohesive"): each carries half of it above and half below, so two meet a whole gap apart (a whole gap each side before,
   so two apart between sections and one under the hero). */
.section { padding: calc(var(--section) / 2) 0; }

.phone--disc, .phone--ask, .phone--friends { --w: min(clamp(270px, 29vw, 360px), calc((100vh - 110px) / 2.2)); }

.fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3.4vw, 44px); }
.fit-list h3 { font-size: clamp(19px, 1.7vw, 22px); font-weight: 600; line-height: 1.15; margin: 0 0 8px; }
.fit-list p { margin: 0; color: var(--grey); font-size: 17px; max-width: 28em; }
.fit-list--tight { margin-top: clamp(32px, 4vw, 48px); gap: clamp(24px, 3vw, 34px); }

/* Status pills: dark glass, the words in the text colour, no colour and no dot (design-system Tag). */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(14, 11, 11, .5);
  box-shadow: inset 0 0 0 1px rgba(245, 239, 228, .16);
  font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap;
}
.status svg { width: 13px; height: 13px; }
.status--quiet { color: var(--grey); }
.status--chosen { background: var(--text); color: var(--ground); box-shadow: none; }

.split {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: clamp(40px, 7vw, 112px);
}
.split--flip { grid-template-columns: .95fr 1.05fr; }
.split--flip .split-copy { order: 2; }
.split .display { font-size: clamp(34px, 4.2vw, 58px); }
.split-visual { display: flex; justify-content: center; }

.prompts { list-style: none; padding: 0; margin: 30px 0 26px; display: grid; gap: 10px; max-width: 440px; }
/* **Ask Idle's prompts as the app's chat bubbles** (Juliana, 2026-10-17: "a more chat bubble shape - like in the app";
   `IdleBubbleShape`): the one corner, the words centred, and the curled tail at the bottom right, out past the edge, on the
   same glass with its lit line (a row with an arrow at its end before). */
.prompts li {
  position: relative; display: block; text-align: center;
  padding: 13px 18px; font-size: 16px;
  border-radius: var(--corner) var(--corner) 0 var(--corner);
}
.prompts li::before {
  content: ""; position: absolute; right: -9px; bottom: 0; width: 10px; height: 18px; pointer-events: none;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-clip-path: path("M1 0 Q1 15 10 18 L0 18 Z");
  clip-path: path("M1 0 Q1 15 10 18 L0 18 Z");
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18'%3E%3Cpath d='M1.5 0 Q1.5 14.6 10 17.5 L0 17.5' fill='none' stroke='rgba(245,239,228,.42)' stroke-width='1'/%3E%3C/svg%3E") no-repeat,
    rgba(14, 11, 11, .34);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* Your week: the Calendar's day, as an event page draws it */
.daycard { width: min(440px, 100%); padding: 20px 18px 18px; }
.daycard-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 16px; }
.daycard-head b { font-size: 17px; font-weight: 400; }
.daycard-head span { font-size: 13px; color: var(--grey); }
.dayrow { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; min-height: 58px; margin-top: 8px; }
.dayrow > span { font-size: 13px; font-weight: 600; color: var(--grey); white-space: nowrap; }
.dayrow > b, .dayrow > div {
  display: block; padding: 12px 14px; border-radius: var(--corner);
  font-size: 15px; font-weight: 600;
  background: rgba(245, 239, 228, .08);
  box-shadow: inset 0 1px 0 rgba(245, 239, 228, .16), inset 0 0 0 1px rgba(245, 239, 228, .06);
}
.dayrow small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--grey); }
.dayrow--free > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; box-shadow: none; outline: 1.5px dashed rgba(168, 159, 145, .45); outline-offset: -1.5px;
  font-weight: 500; color: var(--grey);
}
.dayrow--free .btn-glass { padding: 7px 16px; font-size: 13px; color: var(--text); }
.daycard-foot { margin: 14px 2px 0; font-size: 14px; color: var(--grey); }

/* CTA + footer */
.cta { padding: calc(var(--section) / 2) 0 var(--section); }
/* **The app icon as an iPhone draws one** (Juliana, 2026-10-18: "it should look like a real iPhone app icon on the page
   (rounded, standing out from the dark background)"): the icon's rounded square, a light along its top edge and a soft one
   round it as on iOS 26's home screen, a shine across its upper half, and a deep shadow under it, so its dark ground lifts
   off the page's (the flat square with a coral glow before). */
.cta-icon {
  position: relative; display: block; isolation: isolate;
  width: clamp(112px, 11vw, 148px); aspect-ratio: 1; margin: 0 auto 40px;
  border-radius: 22.4%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .10),
    0 2px 4px rgba(0, 0, 0, .5),
    0 18px 36px -10px rgba(0, 0, 0, .85),
    0 30px 80px -20px rgba(238, 58, 72, .5);
}
.cta-icon img { width: 100%; height: 100%; border-radius: inherit; }
/* The shine: brighter at the top, gone by the middle. */
.cta-icon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 38%, transparent 55%);
}
/* The lit edge: a hairline brightest along the top, fading down the sides, lit a little again at the foot. */
.cta-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, .18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.cta .lede { color: var(--text); }
.cta .hero-actions { margin-top: 30px; }

.foot { color: var(--grey); padding: 28px 0 40px; border-top: 1px solid var(--line); }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
.foot p { margin: 0; }
.foot img { width: 44px; }

/* ───────────── A plain text page (/crawler, IdleCrawler's info page): the same ground, type and coral, no glow ───────────── */

.doc { padding: calc(60px + clamp(48px, 8vw, 96px)) 0 clamp(64px, 9vw, 112px); }
.doc-inner { max-width: 760px; }
.doc .doc-title { font-size: clamp(40px, 6vw, 68px); }
.doc h2 { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 44px 0 10px; }
.doc p { color: var(--grey); margin: 0 0 14px; max-width: 38em; }
.doc .lede { color: var(--grey); }
.doc a { color: var(--text); text-decoration-color: var(--coral); text-underline-offset: 3px; }
.doc code, .doc-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--text); }
.doc-code {
  margin: 0 0 16px; padding: 14px 16px; border-radius: var(--corner);
  background: var(--surface-deep); border: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6;
}

/* ───────────── Responsive ───────────── */

@media (max-width: 980px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip .split-copy { order: 0; }
  .split-copy { text-align: center; }
  .split-copy .lede { margin-left: auto; margin-right: auto; }
  .prompts { margin-left: auto; margin-right: auto; text-align: left; }
  .chip-row { justify-content: center; }
  .fit-list--tight { text-align: left; max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* One column: the phone between a section's lead and what follows it (Juliana, 2026-10-17: Better together's "right before
   the 'you and maya both like this' pill", then Ask Idle's "right before the 'find something to do this weekend' bubble"),
   rather than after all of it. What comes after the phone is marked `.after-phone`. */
@media (max-width: 980px) {
  .split.split--phone-mid { gap: 0; }
  .split--phone-mid .split-copy { display: contents; }
  .split--phone-mid .split-visual { order: 1; margin: 28px 0 4px; }
  .split--phone-mid .after-phone { order: 2; }
  .split--phone-mid .prompts.after-phone { margin-top: 32px; }
}

/* The phone (Juliana, 2026-10-17: "adjust the content of the website so that it looks good on a phone screen"): tighter
   sections, text a size down, the hero's three phones small enough to show whole, the two captioned phones one over
   the other, and the calendar card smaller. */
@media (max-width: 720px) {
  :root { --gutter: 20px; --section: 112px; --head-gap: 32px; }
  body { font-size: 16px; }
  .nav { height: 56px; }
  .nav-links { display: none; }
  .nav-logo img { width: 50px; }
  .nav .nav-cta { padding: 7px 14px; font-size: 12.5px; }

  .display { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.02; margin-bottom: 16px; }
  .split .display { font-size: clamp(30px, 8.6vw, 36px); }
  .lede { font-size: 16px; line-height: 1.5; margin-bottom: 14px; }

  .hero { padding-top: calc(56px + 44px); }
  .hero-title { font-size: clamp(38px, 11.4vw, 46px); margin-bottom: 18px; }
  .hero-sub { font-size: 16px; margin-bottom: 26px; padding: 0 4px; }
  .hero-actions { gap: 4px; }
  .btn-coral, .btn-glass { padding: 12px 22px; font-size: 15px; }
  .btn-link { font-size: 15px; padding: 10px 6px; }
  /* Three phones whole across the screen: the centre one 40% of it, the two beside it 30%, tucked under it. */
  .hero-phones { height: 92vw; margin-top: 36px; padding-top: 8px; }
  .phone--center { --w: 40vw; }
  .phone--left, .phone--right { --w: 30vw; margin-top: 9vw; }

  .phone--disc, .phone--ask, .phone--friends { --w: 66vw; }
  .fit-list { gap: 26px; }
  .fit-list h3 { font-size: 19px; margin: 0 0 6px; }
  .fit-list p { margin: 0 auto; font-size: 15.5px; }
  .fit-list--tight { text-align: center; margin-top: 28px; }
  .split { gap: 40px; }

  .prompts { margin: 22px auto 20px; gap: 8px; }
  .prompts li { padding: 11px 16px; font-size: 15px; }
  .chip-row { margin-top: 16px; gap: 6px; }
  .status { font-size: 12.5px; padding: 4px 10px; }

  /* The calendar card, smaller. */
  .daycard { width: min(286px, 100%); margin: 0 auto; padding: 12px 10px 10px; }
  .daycard-head { margin: 0 2px 10px; }
  .daycard-head b { font-size: 14px; }
  .daycard-head span { font-size: 12px; }
  .dayrow { grid-template-columns: 40px 1fr; gap: 6px; min-height: 42px; margin-top: 6px; }
  .dayrow > span { font-size: 11.5px; }
  .dayrow > b, .dayrow > div { padding: 8px 10px; font-size: 13px; }
  .dayrow small { font-size: 11.5px; }
  .dayrow--free .btn-glass { padding: 6px 13px; font-size: 12px; }
  .daycard-foot { margin: 10px 2px 0; font-size: 12.5px; }

  .cta-icon { width: 104px; margin-bottom: 28px; }
  .cta .hero-actions { margin-top: 22px; }
  .foot-inner { flex-direction: column; text-align: center; }
  .glow { filter: blur(36px) saturate(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .rise { opacity: 1; transform: none; transition: none; }
  .phone--left.is-in, .phone--left { transform: rotate(-4deg); }
  .phone--right.is-in, .phone--right { transform: rotate(4deg); }
  .a-item.on, .a-dots i, .a-typed::after { animation: none; }
}