/* Homepage: "How you start" and "Straight answers" (Evan 2026-10-05). The plan builder and live-work blocks were cut. */
.hs { background: #fff; padding: clamp(72px, 9vw, 140px) 0 0; }
.hs a { color: inherit; text-decoration: none; }
.hs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: clamp(32px, 4vw, 56px); }
.hs-head h2 { margin: 0; font-size: clamp(48px, 6.4vw, 104px); line-height: .95; letter-spacing: -.05em; font-weight: 500; }
.hs-head p { margin: 0; max-width: 420px; font-size: 19px; line-height: 1.5; color: #48484a; }
.hs-arr { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #000; color: #fff; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.hs-arr svg { width: 13px; height: 13px; }

/* 3 how you start (Evan picked "B What you'll see" 2026-10-05): three cards, each with the thing that lands on your phone at that step */
.ha-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ha-c { display: flex; flex-direction: column; padding: 30px 28px 32px; border-radius: 28px; background: #f5f5f7; }
.ha-c .k { margin: 0 0 14px; font-size: 15px; color: #8e8e93; }
.ha-c h3 { margin: 0 0 12px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; }
.ha-c .d { margin: 0 0 auto; padding-bottom: 28px; font-size: 17px; line-height: 1.5; color: #48484a; }
.ha-c .r { margin: 0; padding-top: 18px; border-top: 1px solid #e3e3e8; font-size: 17px; font-weight: 500; color: #000; }
.hb .vis { display: grid; place-items: center; height: 150px; margin: -6px -8px 26px; border-radius: 20px; background: linear-gradient(160deg, #eef0f5, #e4e7ee); }
.vis > div { width: 88%; display: flex; gap: 10px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 20px; background: rgba(255,255,255,.85); box-shadow: inset 0 1.5px 1px #fff, 0 0 0 .5px rgba(0,0,0,.05), 0 14px 30px -14px rgba(0,0,0,.25);
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 18px; color: #000; }
.vis .tx { flex: 1; min-width: 0; display: grid; } .vis .top { display: flex; justify-content: space-between; } .vis .t { font-weight: 600; } .vis .w { font-size: 12px; color: rgba(60,60,67,.6); }
.vis .s { color: #000; } .vis .b { color: #3a3a3c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vis .ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; } .vis .ic svg { width: 22px; height: 22px; }
.ios-mail .ic { background: linear-gradient(#1ad4ff, #1e5cf2); } .ios-live .ic { background: linear-gradient(#3a3a3c, #000); }
.ios-cal .bar { align-self: stretch; width: 4px; border-radius: 2px; background: #ff3b30; } .ios-cal .s { color: #6e6e73; } .ios-cal .ok { font-size: 12px; font-weight: 600; color: #30a14e; }
@media (max-width: 991px) { .ha-grid { grid-template-columns: 1fr; } }

/* 4 straight answers (Evan picked "F Quick cards" 2026-10-05): a one-word answer first, then the question and one plain sentence */
.hs4 { padding-bottom: clamp(96px, 10vw, 160px); }
.sa-h { margin: 0 0 clamp(36px, 4vw, 56px); }
.sf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sf-c { display: flex; flex-direction: column; padding: 28px 26px 30px; border-radius: 28px; background: #f5f5f7; }
.sf-c .w { margin: 0 0 auto; padding-bottom: 40px; font-size: clamp(44px, 4.4vw, 68px); line-height: 1; letter-spacing: -.05em; font-weight: 500; color: #000; }
.sf-c .q { margin: 0 0 8px; font-size: 19px; line-height: 1.25; font-weight: 500; color: #000; }
.sf-c .a { margin: 0; font-size: 16px; line-height: 1.45; color: #48484a; }
@media (max-width: 991px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sf-grid { grid-template-columns: 1fr; } .sf-c .w { padding-bottom: 20px; } }
/* shared next step */
.sa-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(40px, 5vw, 64px); }
.sa-cta p { margin: 0; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.025em; }
.sa-cta a { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 10px 0 26px; border-radius: 30px; background: #000; color: #fff !important; font-size: 17px; font-weight: 500; text-decoration: none; }
.sa-arr { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #000; transition: transform .4s cubic-bezier(.2,.8,.2,1); } .sa-arr svg { width: 13px; height: 13px; }
.sa-cta a:hover .sa-arr { transform: rotate(-45deg); }

/* fade with main-pane's crossfade into the search section (js/home-search.js sets --nx-g, --nx-ink, --nx-sub on html.nx-x) */
html.nx-x .hs4 .sf-c { background: color-mix(in srgb, var(--nx-ink, #000) 5%, var(--nx-g, #fff)); }
html.nx-x .hs4 .sf-c .w, html.nx-x .hs4 .sf-c .q, html.nx-x .hs4 .sa-h, html.nx-x .hs4 .sa-cta p { color: var(--nx-ink, #000); }
html.nx-x .hs4 .sf-c .a { color: var(--nx-sub, #48484a); }
/* play-in (Evan 2026-10-05: "animate it"): js/home-steps.js adds .play to each card in turn */
.hs3 .vis > div { opacity: 0; transform: translateY(-26px) scale(.94); transition: opacity .35s, transform .75s cubic-bezier(.2,.9,.3,1.2); }
.hs3 .vis > div { grid-area: 1 / 1; }
.hs3 .ha-c.play .vis > div:not(.ios-live), .hs3 .ha-c.play .vis > .ios-live.cur { opacity: 1; transform: none; }
.hs3 .vis > .ios-live:not(.cur) { transform: translateY(26px) scale(.94); }   /* the outgoing one drops away, the next drops in */
.hs3 .ios-cal .ok { opacity: 0; transform: scale(.6); transition: opacity .3s .75s, transform .5s .75s cubic-bezier(.3,1.6,.5,1); }
.hs3 .ha-c.play .ios-cal .ok { opacity: 1; transform: none; }
.hs3 .ios-mail .b .c { opacity: 0; transition: opacity .05s; } .hs3 .ios-mail .b .c.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hs3 .vis > div, .hs3 .ios-cal .ok, .hs3 .ios-mail .b .c { opacity: 1; transform: none; transition: none; } }