/*
  /features in the second look (Allen, 2026-11-02, from the Features mockup on the Round 2 canvas):
  the jump row, then each tool beside its screen in a phone on a soft panel with one of the app's
  moments beside it, then the two cards, the ways around it as cards and the ways out as one panel.
  site.css carries everything shared, the moments and the cards included.
*/

.f-intro { padding: 72px 0 0; text-align: center; }
.f-intro h1 { margin: 24px auto 0; max-width: 12em; font-size: clamp(42px, 5.6vw, 80px); line-height: 1.02; }
.f-intro .lede { margin: 24px auto 0; max-width: 32em; }
.jump { margin: 36px auto 0; max-width: 860px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid #DADAD6; text-decoration: none; font-size: 15px; font-weight: 500;
}
.jump a:hover { border-color: var(--ink); color: var(--ink); }

/* A tool: its words beside its screen; every other one turns around on a wide window. */
.tool { padding-top: 112px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; }
.tool-words { flex: 1 1 400px; min-width: 0; }
.tool-words .kicker { font-size: 15px; font-weight: 600; color: var(--muted); }
.tool-words h2 { margin-top: 12px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; }
.tool-words p:not(.kicker) { margin-top: 18px; max-width: 32em; color: var(--muted); }
@media (min-width: 900px) { .tool.flip { flex-direction: row-reverse; } }

/* The screen in a phone on a soft panel, cut by the panel's edge. A screen whose sheet is at its
   foot (the daily limit) hangs from the panel's bottom instead. */
.panel {
  flex: 1 1 460px; position: relative; height: 540px; border-radius: 36px; background: var(--surface);
  overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 56px;
}
.panel.from-foot { align-items: flex-end; padding: 0 0 48px; }
.phone {
  flex: none; width: 280px; height: 620px; border-radius: 44px; border: 9px solid var(--ink);
  background: var(--white); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.panel.from-foot .phone { display: flex; align-items: flex-end; }
.phone img { width: 100%; height: auto; }
.phone .at-lock { margin-top: -153px; }   /* the app page's cards around Lock */
.panel .moment { position: absolute; width: 250px; }
.panel .moment.notice { width: 260px; }
.panel .moment.at-top-left { top: 40px; left: 28px; }
.panel .moment.at-top-right { top: 96px; right: 28px; }
.panel .moment.at-low-left { top: 400px; left: 28px; }
.panel .moment.at-low-right { top: 420px; right: 28px; }
.swatch-pair { display: flex; align-items: center; gap: 10px; }
.swatch-pair i { width: 40px; height: 40px; border-radius: 11px; }
.swatch-pair i:first-child { background: linear-gradient(135deg, #6AD49A, #1E9E8C 55%, #2C6FD1); }
.swatch-pair i:last-child { background: linear-gradient(135deg, #C9C9C9, #9A9A9A 55%, #7E7E7E); }
.swatch-pair svg { width: 18px; height: 18px; fill: none; stroke: #8A8A8A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The two cards: what is never blocked, and the setup. */
.pair { padding-top: 120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.pair .card { padding: 32px; gap: 0; }
.pair .card h2 { margin-top: 20px; font-size: 28px; line-height: 1.15; }
.pair .card p { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.badge {
  display: inline-flex; width: 48px; height: 48px; border-radius: 14px; background: var(--white);
  align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.badge svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The ways around it: twelve cards (the old table's rows). */
.around .grid3 { gap: 16px; }
.around .door { padding: 24px; border-radius: 22px; }
.around .door-a { font-size: 19px; line-height: 1.3; }
.door-more { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* The ways out: one soft panel, a row each. */
.ways { margin: 48px auto 0; max-width: 920px; padding: 8px 32px; border-radius: 28px; background: var(--surface); }
.ways > div { display: flex; flex-wrap: wrap; gap: 4px 32px; padding: 22px 0; border-bottom: 1px solid #E2E2DE; }
.ways > div:last-child { border-bottom: 0; }
.ways dt { flex: 1 1 220px; font-size: 17px; font-weight: 600; }
.ways dd { flex: 2 1 340px; margin: 0; font-size: 17px; line-height: 1.55; color: var(--muted); }

@media (max-width: 640px) {
  .f-intro { padding-top: 40px; }
  .tool { padding-top: 88px; }
  .panel { height: 460px; }
  .panel .moment.at-top-left, .panel .moment.at-top-right, .panel .moment.at-low-left, .panel .moment.at-low-right {
    top: 14px; left: 14px; right: auto; width: 220px;
  }
  .pair { padding-top: 88px; }
  .ways { padding: 4px 20px; }
}