/* FloGo, Quick actions, and the phone preview: the product's newest stories.
   Same tokens as styles.css; captures follow the reader's system theme. */

/* ---- Shared: key caps, tags, framed app windows ---- */
kbd { display: inline-grid; place-items: center; min-width: 1.85em; height: 1.85em; padding: 0 .45em; margin-inline: 1px; border: 1px solid #58706059; border-bottom-width: 2px; border-radius: 6px; background: var(--paper-lift); color: var(--ink); font: 500 .75em/1 var(--mono); vertical-align: .08em; }
.early-tag { display: inline-block; margin-left: 6px; padding: 2px 7px 1px; border: 1px solid #a8613e66; border-radius: 999px; color: #8a4a2a; font: 500 .5625rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: .2em; white-space: nowrap; }
.feature-panel-heading h3 .early-tag { font-size: .625rem; vertical-align: .45em; }
.new-tag, .soon-tag { display: inline-block; margin-left: 10px; padding: 3px 9px 2px; border: 1px solid currentColor; border-radius: 999px; font-size: .5625rem; letter-spacing: .14em; vertical-align: 1px; }

.app-window { margin: 0; }
.app-window-shot { position: relative; display: block; overflow: hidden; border-radius: 14px; background: #121716; border: 1px solid #ffffff1f; box-shadow: 0 1px 0 #ffffff14 inset, 0 40px 90px -30px #07100bb3, 0 12px 30px -12px #0b140f66; cursor: zoom-in; }
.app-window-shot img { width: 100%; height: auto; }
.app-window-shot:hover .shot-expand, .app-window-shot:focus-visible .shot-expand { opacity: 1; transform: none; }
.app-window figcaption { display: flex; justify-content: space-between; gap: 20px; margin-top: 18px; font: .625rem/1.8 var(--mono); color: var(--muted); }
.app-window figcaption i { font-style: normal; margin-inline: 8px; opacity: .65; }
@media (prefers-color-scheme: light) {
  .app-window-shot { background: #f4f3ef; border-color: #0b140f1f; }
}

/* ---- Hero: the newest story, one tap away ---- */
.hero-news { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 5px 16px 5px 5px; border: 1px solid #c3d6c440; border-radius: 999px; background: #0b140f59; backdrop-filter: blur(10px); color: #e6eee4; font-size: .8125rem; font-weight: 500; transition: border-color .2s, background .2s; }
.hero-news:hover { border-color: #b6d1c1a6; background: #16241c99; }
.hero-news-tag { padding: 7px 10px 6px; border-radius: 999px; background: var(--mint); color: #10231a; font: 500 .5625rem/1 var(--mono); letter-spacing: .14em; }
.hero-news-arrow { color: var(--mint); transition: transform .2s; }
.hero-news:hover .hero-news-arrow { transform: translateY(2px); }

/* ---- 01 / FloGo ---- */
.flogo { position: relative; isolation: isolate; overflow: hidden; background: var(--graphite); color: var(--chalk); padding-block: 116px 104px; }
.flogo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 45% at 82% 0%, #b6d1c124, transparent 70%), radial-gradient(45% 40% at 0% 55%, #4f7d6a1f, transparent 72%), linear-gradient(180deg, #0e1311, #101816 60%, #0e1311); }
.flogo .eyebrow, .flogo h2 em { color: var(--mint); }
.flogo .section-heading > p { max-width: 44ch; color: #b8c8bd; }
.flogo-steps { scroll-margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 40px; }
.flogo-step { position: relative; display: flex; flex-direction: column; align-items: start; gap: 8px; padding: 22px 12px 6px 0; border-top: 1px solid #c3d6c433; color: #a9bcae; transition: color .2s; }
.flogo-step::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.flogo-step-num { font: .625rem/1.6 var(--mono); letter-spacing: .14em; color: #8fa698; }
.flogo-step b { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; color: #dbe5dc; }
.flogo-step small { font-size: .8125rem; line-height: 1.6; }
.flogo-step:hover b, .flogo-step[aria-selected="true"] b { color: #fff; }
.flogo-step[aria-selected="true"] { color: #c6d5ca; }
.flogo-step[aria-selected="true"] .flogo-step-num { color: var(--mint); }
.flogo-step[aria-selected="true"]::before { transform: scaleX(1); }
.flogo-stage { position: relative; }
.flogo-panel:focus-visible { outline-offset: 8px; border-radius: 16px; }
.flogo-panel .app-window figcaption { color: #9fb2a5; }
.flogo-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 38px; }
.flogo-facts li { border-top: 1px solid #c3d6c433; padding-top: 22px; }
.flogo-facts h3 { font-size: .9375rem; font-weight: 600; color: var(--chalk); }
.flogo-facts p { margin-top: 9px; font-size: .8125rem; line-height: 1.7; color: #b8c8bd; }
.flogo-trust { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 10px 12px; margin-top: 64px; }
@media (max-width: 1180px) { .flogo-trust { grid-template-columns: repeat(2, auto); } }
.flogo-trust li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid #c3d6c42e; border-radius: 999px; background: #ffffff06; color: #cfdcd2; font: .6875rem/1.4 var(--mono); letter-spacing: .03em; }
.flogo-trust li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px #b6d1c11a; }
.flogo[data-enhanced] .flogo-panel:not([hidden]) { animation: showcase-in .4s cubic-bezier(.2,.8,.2,1) both; }
.flogo-panel + .flogo-panel { margin-top: 72px; }
.flogo[data-enhanced] .flogo-panel + .flogo-panel { margin-top: 0; }
@keyframes showcase-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- 02 / Quick actions ---- */
.keystroke { padding-block: 112px 40px; }
.keystroke-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 72px; align-items: center; }
.keystroke-lead { margin-top: 26px; max-width: 42ch; color: var(--muted); font-size: .9375rem; }
.keystroke:not([data-enhanced]) .keystroke-switch { display: none; }
.keystroke-switch { display: inline-flex; gap: 2px; margin-bottom: 20px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; }
.keystroke-switch button { min-height: 36px; padding: 7px 16px; border-radius: 5px; color: #4b6053; font-size: .8125rem; }
.keystroke-switch button[aria-pressed="true"] { background: #f8f9f1; box-shadow: 0 1px 4px #20342422; color: #294632; }
.keystroke-window .app-window-shot { box-shadow: 0 2px 4px #25372a15, 0 40px 80px -36px #142b2966; }
/* The wheel and the menu are small in a full window, so show the corner of
   the capture around them, zoomed. The viewer still opens the whole capture. */
.keystroke-crop picture { --fade: 180deg; position: relative; display: block; aspect-ratio: 1.12; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%), linear-gradient(var(--fade), transparent, #000 16%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 26%), linear-gradient(var(--fade), transparent, #000 16%); mask-composite: intersect; }
.keystroke-crop img { position: absolute; right: 0; bottom: 0; width: 225%; max-width: none; height: auto; }
.keystroke-crop[data-shot="quick-actions"] picture { --fade: 0deg; }
.keystroke-crop[data-shot="quick-actions"] img { top: 0; bottom: auto; }
/* Keep the eye on the wheel or the menu: the conversation around them is
   blurred and dimmed, so the crop never shows half-cut lines of text. The
   focus area is where the subject lands in each breakpoint's crop. */
.keystroke-crop[data-shot="wheel"] { --fx: 78.9%; --fy: 68.9%; --rx: 19.1%; --ry: 21.4%; }
.keystroke-crop[data-shot="quick-actions"] { --x1: 37.8%; --x2: 93.6%; --y2: 66%; }
.keystroke-crop picture::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #1a2120b8; -webkit-backdrop-filter: blur(6px) saturate(.8); backdrop-filter: blur(6px) saturate(.8); }
.keystroke-crop[data-shot="wheel"] picture::after { -webkit-mask-image: radial-gradient(ellipse var(--rx) var(--ry) at var(--fx) var(--fy), transparent 128%, #000 172%); mask-image: radial-gradient(ellipse var(--rx) var(--ry) at var(--fx) var(--fy), transparent 128%, #000 172%); }
.keystroke-crop[data-shot="quick-actions"] picture::after { -webkit-mask-image: linear-gradient(90deg, #000 var(--x1), transparent calc(var(--x1) + 1%), transparent calc(var(--x2) - 1%), #000 var(--x2)), linear-gradient(180deg, transparent var(--y2), #000 calc(var(--y2) + 1.5%)); mask-image: linear-gradient(90deg, #000 var(--x1), transparent calc(var(--x1) + 1%), transparent calc(var(--x2) - 1%), #000 var(--x2)), linear-gradient(180deg, transparent var(--y2), #000 calc(var(--y2) + 1.5%)); }
@media (prefers-color-scheme: light) { .keystroke-crop picture::after { background: #f6f6f1c2; } }
.keystroke-crop .shot-expand { left: 18px; right: auto; }
@media (max-width: 700px) { .keystroke-crop .shot-expand { left: 12px; } }
.keycaps { display: grid; gap: 6px; margin-top: 30px; }
.keycaps a { display: flex; align-items: center; gap: 16px; padding: 9px 14px 9px 9px; border: 1px solid var(--line); border-radius: 12px; background: #f3f3ec8c; transition: border-color .2s, background .2s, transform .2s; }
.keycaps a:hover { border-color: #7e978799; background: var(--paper-lift); transform: translateX(3px); }
.keycaps kbd { flex: none; min-width: 34px; height: 34px; margin: 0; border-radius: 8px; font-size: .8125rem; box-shadow: 0 1px 0 #ffffffb3 inset; }
.keycaps span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.keycaps b { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.keycaps small { color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.keystroke-note { margin-top: 18px; max-width: 46ch; color: var(--muted); font-size: .8125rem; }
.keystroke-note kbd { font-size: .6875rem; }

/* ---- 06 / Phone, coming soon ---- */
.mobile { position: relative; isolation: isolate; overflow: hidden; padding-block: 112px 104px; background: linear-gradient(180deg, var(--paper) 0%, #dfe3da 62%, var(--paper) 100%); }
.mobile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(46% 34% at 50% 66%, #b6d1c170, transparent 72%); }
.mobile-copy { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: end; margin-bottom: 72px; }
.mobile-copy > div:last-child > p { max-width: 46ch; color: var(--muted); font-size: .9375rem; }
.soon-tag { color: #2e5a41; }
.mobile-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mobile-list li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #f3f3ec99; color: #3b5044; font: .6875rem/1.5 var(--mono); letter-spacing: .02em; }
.mobile-copy .text-link { margin-top: 26px; }
.phones { display: flex; justify-content: center; align-items: center; gap: 2%; }
.phone { container-type: inline-size; flex: none; margin: 0; }
.phone--center { width: 21%; }
.phone--left, .phone--right { width: 18.5%; }
.phone--far-left, .phone--far-right { width: 17%; }
.phone-body { position: relative; padding: 3.6cqi; border-radius: 16cqi; background: linear-gradient(150deg, #454e49 0%, #161b19 22%, #0c100e 60%, #2b332f 100%); box-shadow: inset 0 0 0 1px #ffffff2e, inset 0 0 0 1.2cqi #070908, 0 60px 90px -50px #0b140fb3, 0 26px 44px -28px #0b140f99; }
.phone-body::before { content: ""; position: absolute; top: 22%; left: -1.1cqi; width: 1.1cqi; height: 9%; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #3a433e, #1a201d); box-shadow: 0 13cqi 0 #262d2a; }
/* The captures leave the 47pt status strip and 34pt home-indicator strip
   empty (390×844 points); the frame draws them, scaled with the phone.
   The screen is 92.8cqi wide, so 1pt = .238cqi. */
.phone-screen { position: relative; overflow: hidden; border-radius: 12.4cqi; background: #151a18; color: #fff; }
.phone-screen picture { display: block; }
.phone-screen img { width: 100%; height: auto; }
.phone-screen::after { content: ""; position: absolute; top: 2.6cqi; left: 50%; width: 30cqi; height: 8.8cqi; transform: translateX(-50%); border-radius: 99px; background: #030504; }
.phone-status { position: absolute; inset: 0 0 auto; height: 11.2cqi; display: flex; align-items: center; justify-content: space-between; padding: .4cqi 7.4cqi 0 11.2cqi; pointer-events: none; }
.phone-status > span { font: 650 4cqi/1 var(--sans); letter-spacing: -.01em; }
.phone-status svg { width: 16.2cqi; height: auto; }
.phone-home { position: absolute; bottom: 1.9cqi; left: 50%; width: 32cqi; height: 1.2cqi; transform: translateX(-50%); border-radius: 99px; background: #ffffffd9; }
@media (prefers-color-scheme: light) {
  .phone-screen { background: #f4f3ef; color: #000; }
  .phone-home { background: #000000d9; }
}
.phone figcaption { margin-top: 20px; text-align: center; color: var(--muted); font: .625rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.phone--center figcaption { color: #294c37; }
.download-soon > span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 12px; border: 1px dashed #c3d6c44d; border-radius: 999px; color: #c9d6cb; text-align: left; }
.download-soon svg { width: 17px; height: 17px; flex: none; color: var(--mint); }

@media (max-width: 1000px) {
  .flogo-steps { gap: 20px; }
  .flogo-step b { font-size: 1rem; }
  .keystroke-grid { grid-template-columns: 1fr; gap: 0; }
  /* Stacked: heading, then the capture, then the keys. */
  .keystroke-copy { display: contents; }
  .keystroke-stage { order: 1; margin-top: 36px; }
  .keycaps, .keystroke-note { order: 2; }
  .keystroke-lead { max-width: 56ch; }
  .keycaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keystroke-crop picture { aspect-ratio: 1.45; }
  .keystroke-crop img { width: 180%; }
  .keystroke-crop[data-shot="wheel"] { --fx: 83.1%; --fy: 67.8%; --rx: 15.3%; --ry: 22.2%; }
  .keystroke-crop[data-shot="quick-actions"] { --x1: 50.2%; --x2: 94.9%; --y2: 68.4%; }
  .mobile-copy { gap: 44px; }
}
@media (max-width: 760px) {
  .flogo { padding-block: 74px 70px; }
  .feature-choice .early-tag { display: none; }
  .flogo-steps { grid-template-columns: 1fr; gap: 0; margin-bottom: 28px; }
  .flogo-step { padding: 16px 0 16px; }
  .flogo-step small { display: none; }
  .flogo-step[aria-selected="true"] small { display: block; }
  .flogo-step b { font-size: 1rem; }
  .flogo-facts { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
  .flogo-facts p { font-size: .875rem; }
  .flogo-trust { grid-template-columns: auto; justify-content: start; margin-top: 44px; }
  .app-window-shot { border-radius: 10px; }
  .app-window figcaption { flex-direction: column; gap: 3px; margin-top: 16px; }
  .keystroke { padding-block: 70px 12px; }
  .keystroke-lead { font-size: .875rem; }
  .keycaps { grid-template-columns: 1fr; margin-top: 24px; }
  .keycaps span { flex-direction: column; gap: 0; }
  .keystroke-crop picture { aspect-ratio: 1; }
  .keystroke-crop img { width: 290%; }
  .keystroke-crop[data-shot="wheel"] { --fx: 72.7%; --fy: 64.2%; --rx: 24.7%; --ry: 24.7%; }
  .keystroke-crop[data-shot="quick-actions"] { --x1: 19.8%; --x2: 91.7%; --y2: 76%; }
  .mobile { padding-block: 74px 70px; }
  .mobile-copy { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .mobile-copy > div:last-child > p { font-size: .875rem; }
  .phones { gap: 0; }
  .phone--far-left, .phone--far-right { display: none; }
  .phone--center { position: relative; z-index: 1; width: 48%; }
  .phone--left, .phone--right { width: 36%; }
  .phone--left { margin-right: -10%; }
  .phone--right { margin-left: -10%; }
  .phone--left figcaption { padding-right: 24%; }
  .phone--right figcaption { padding-left: 24%; }
  .phone figcaption { font-size: .5625rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .flogo[data-enhanced] .flogo-panel:not([hidden]) { animation: none; }
  .keycaps a:hover { transform: none; }
}