/* App page template. Builds on site.css; design system in Website/DESIGN.md */

.crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 22px; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }

/* App hero */
.app-hero { background: linear-gradient(180deg, var(--sky), #fff 85%); padding: 56px 0 88px; }
.app-hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.app-id { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.app-id img { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 10px 24px -14px rgba(17,38,63,.4); }
.app-id b { font: 600 18px var(--display); }
.app-id span { display: block; font-size: 14px; color: var(--ink-3); }
.app-hero h1 { font-weight: 700; font-size: clamp(36px, 4.2vw, 54px); line-height: 1.1; }
.app-hero h1 span { color: var(--violet); }
.app-hero .lede { font-size: 19px; color: var(--ink-2); margin: 20px 0 30px; max-width: 30em; }
.proof-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.proof-row > span { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; font-size: 14px; color: var(--ink-2); }
.proof-row b { color: var(--ink); }
.proof-row .stars { color: var(--star, #f5a623); letter-spacing: 1px; }
.proof-row > .award { border-color: #d9d1ff; background: var(--violet-soft); color: var(--ink); font-weight: 600; }
.hero-panel { background: var(--tint, var(--violet-soft)); border-radius: 28px; padding: 40px 32px; display: grid; place-items: center; min-height: 440px; }

/* Feature rows */
.feature-rows { display: grid; gap: 28px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.frow.flip .frow-art { order: 2; }
.frow-art { background: var(--tint, var(--violet-soft)); border-radius: 28px; min-height: 360px; display: grid; place-items: center; padding: 36px; }
.frow-copy h3 { font-weight: 600; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; margin-bottom: 12px; }
.frow-copy p { color: var(--ink-2); font-size: 18px; margin: 0 0 18px; }
.frow-copy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-2); }
.frow-copy li::before { content: "✓"; color: var(--violet); font-weight: 700; margin-right: 10px; }
.scene-ph { color: #8a5200; background: #fff6e6; border: 1.5px dashed #b26a00; border-radius: 18px; padding: 22px 26px; font-weight: 600; font-size: 15px; text-align: center; max-width: 320px; }

/* Recipes */
.recipes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rcp { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 12px; }
.rcp-tag { justify-self: start; font: 600 12.5px var(--display); color: #5b46dc; background: var(--violet-soft); border-radius: 99px; padding: 4px 10px; }
.rcp p { margin: 0; font: 500 15.5px/1.45 var(--body); color: var(--ink); }
.rcp p b { color: var(--violet); font-weight: 600; }
.setups .rcp { align-content: start; }
.setups .rcp h3 { margin: 0; font: 600 18px/1.3 var(--display); color: var(--ink); }
.setups .rcp p { font-weight: 400; color: var(--ink-2); }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.plan.pop { border-color: var(--violet); box-shadow: 0 24px 48px -30px rgba(106,85,232,.55); }
.plan h3 { font-weight: 600; font-size: 19px; }
.plan .price { font: 700 34px var(--display); letter-spacing: -0.02em; }
.plan .price small { font: 500 15px var(--body); color: var(--ink-3); }
.plan p { color: var(--ink-2); margin: 0; font-size: 15px; }
.plan .btn { margin-top: auto; height: 44px; }
.plans-note { text-align: center; color: var(--ink-3); font-size: 14.5px; margin-top: 20px; }
/* Six-plan pricing with billing toggle and a shared feature list */
.bill { display: flex; justify-content: center; gap: 4px; width: max-content; margin: 0 auto 28px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 99px; }
.bill button { height: 38px; padding: 0 18px; border: 0; border-radius: 99px; background: none; color: var(--ink-2); font: 600 14.5px var(--display); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.bill button.on { background: var(--violet); color: #fff; }
.bill button span { margin-left: 6px; font: 700 11.5px var(--body); color: #007a5c; background: #e3f7ef; border-radius: 99px; padding: 2px 8px; }
.bill button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.plans-rail { position: relative; }
.plans.six { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 10px 4px 26px; scrollbar-width: none; overscroll-behavior-x: contain; }
.plans.six::-webkit-scrollbar { display: none; }
.plans.six .plan { flex: 0 0 calc((100% - 40px) / 3.3); min-width: 260px; gap: 0; scroll-snap-align: start; }
.rail-btn { position: absolute; top: 45%; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 10px 24px -14px rgba(17,38,63,.45); transform: translateY(-50%); transition: opacity 160ms ease, transform 140ms var(--ease-out); }
.rail-btn:active { transform: translateY(-50%) scale(.95); }
.rail-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.rail-btn.prev { left: -20px; }
.rail-btn.next { right: -20px; }
.rail-btn[disabled] { opacity: 0; pointer-events: none; }
.plan .ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.plan .rec { font: 700 11.5px var(--body); color: #5b46dc; background: var(--violet-soft); border-radius: 99px; padding: 4px 10px; }
.plan .per { font-size: 13.5px; color: var(--ink-3); margin: 2px 0 14px; }
.plan .acts { display: flex; align-items: baseline; gap: 6px; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: var(--sky); color: var(--ink-2); font-size: 14px; }
.plan .acts b { font: 700 20px var(--display); color: var(--ink); }
.plans.six .plan p { margin-bottom: 14px; }
.plan .inc { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink); }
.plan .inc li { display: flex; gap: 9px; align-items: baseline; }
.plan .inc li::before { content: "✓"; color: var(--violet); font-weight: 700; }
.plan .inc li.no { color: #667085; }
.plan .inc li.no::before { content: "–"; color: #c3c9d4; }
@media (max-width: 700px) { .rail-btn { display: none; } .plans.six .plan { flex-basis: 82%; } }

/* Works well with */
.pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pair { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; text-decoration: none; transition: border-color 160ms ease, transform 200ms var(--ease-out); }
.pair img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.pair b { font: 600 16px var(--display); display: block; }
.pair span { color: var(--ink-3); font-size: 14.5px; }
@media (hover: hover) and (pointer: fine) { .pair:hover { border-color: #cdc5ff; transform: translateY(-2px); } }

/* Data strip */
.data-strip { display: flex; gap: 28px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 32px; }
.data-strip h3 { font-weight: 600; font-size: 22px; margin-bottom: 6px; }
.data-strip p { margin: 0; color: var(--ink-2); }

@media (max-width: 900px) {
  .app-hero-grid, .frow, .recipes, .plans, .pairs { grid-template-columns: 1fr; }
  .frow.flip .frow-art { order: 0; }
  .hero-panel { min-height: 0; padding: 28px 16px; }
  .frow-art { min-height: 0; padding: 24px; }
  .data-strip { flex-direction: column; align-items: flex-start; }
}

/* Awards: recognition from the monday.com marketplace, in our own type */
section.band.awards { padding: 56px 0; background: var(--violet-soft); }
.awards .sec-head { margin-bottom: 32px; }
.aw-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; }
.aw-it { position: relative; flex: 0 1 270px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.aw-it > svg { flex: none; width: 24px; height: 50px; color: var(--violet); }
.aw-it > svg.flip { transform: scaleX(-1); }
.aw-tx { display: grid; gap: 2px; text-align: center; }
.aw-tx small { font: 600 11px var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.aw-tx b { font: 600 15.5px/1.25 var(--display); color: var(--ink); }
.aw-tx span { font: 500 12.5px/1.3 var(--body); color: var(--ink-2); }

/* Reviews: rating summary + real marketplace quotes */
.rv-sum { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; margin: -8px auto 32px; }
.rv-sum .big { font: 700 40px/1 var(--display); color: var(--ink); }
.rv-sum .stars { color: #f5a623; letter-spacing: 2px; font-size: 18px; }
.rv-sum span { color: var(--ink-2); font-size: 15px; }
.rv-sum a { font-weight: 600; color: var(--violet); }
.review .who i { display: grid; place-items: center; font: 700 13px var(--display); font-style: normal; color: #5b46dc; }
.review.hl { border-color: var(--violet); box-shadow: 0 24px 48px -32px rgba(106,85,232,.6); }
/* Reviews as a scrolling strip (same rail as pricing) */
.rail-wrap { position: relative; }
.reviews.rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 10px 4px 26px; scrollbar-width: none; overscroll-behavior-x: contain; }
.reviews.rail::-webkit-scrollbar { display: none; }
.reviews.rail .review { flex: 0 0 calc((100% - 40px) / 3.2); min-width: 280px; scroll-snap-align: start; padding: 30px; }
.reviews.rail .review p { font-size: 16.5px; line-height: 1.6; }
.reviews.rail .who { gap: 14px; }
.reviews.rail .who i { width: 58px; height: 58px; font-size: 17px; flex: none; }
.reviews.rail .who b { font: 600 17px var(--display); margin-bottom: 2px; }
@media (max-width: 700px) { .reviews.rail .review { flex-basis: 85%; } }

/* Security: navy band, data-flow diagram, authority badges, one human contact */
section.secu { color: #fff; }
.secu-card { background: var(--ink); border-radius: 32px; padding: 64px; }
.secu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.secu h2 { color: #fff; font-weight: 700; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1; }
.secu h2 span { color: #b9a9ff; }
.secu-promise { list-style: none; margin: 30px 0 28px; padding: 0; display: grid; gap: 16px; }
.secu-promise li { display: flex; align-items: center; gap: 14px; color: #fff; font: 600 19px/1.35 var(--display); }
.secu-promise svg { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 50%; background: rgba(185,169,255,.16); color: #b9a9ff; }
.secu-more { color: #b9a9ff; font-weight: 600; font-size: 15px; }
.secu-help { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.secu-help p { margin: 0; flex: 1 1 260px; color: #fff; font: 600 16px/1.45 var(--display); }
.secu-help .btn { height: 46px; background: #fff; color: var(--ink); }
.secu-help a.more { color: #b9a9ff; font-weight: 600; font-size: 15px; }
/* diagram */
.flow { display: flex; flex-direction: column; align-items: center; }
.flow-acct { position: relative; width: 100%; padding: 24px; border-radius: 22px; background: rgba(185,169,255,.07); border: 1.5px solid rgba(185,169,255,.55); box-shadow: 0 0 0 6px rgba(185,169,255,.07), 0 30px 60px -30px rgba(0,0,0,.6); }
.flow-seal { position: absolute; top: -22px; right: 22px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #1d2f55; border: 1.5px solid rgba(185,169,255,.6); color: #b9a9ff; }
.flow-seal svg { width: 26px; height: 26px; }
.flow-prot { margin-top: 6px; font-size: 13px; color: #c9d3e0; }
.flow-acct small { display: block; font: 600 13px var(--display); color: #c9d3e0; margin-bottom: 14px; }
.flow-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flow-chips span { padding: 8px 14px; border-radius: 10px; background: #fff; color: var(--ink); font: 600 14px var(--display); }
.flow-stay { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: #fff; font: 600 15px var(--display); }
.flow-stay svg { width: 20px; height: 20px; color: #b9a9ff; }
.flow-link { position: relative; width: 2px; height: 96px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
.flow-link i { position: absolute; left: -4px; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #b9a9ff; box-shadow: 0 0 0 4px rgba(185,169,255,.2); animation: flow-up 2.4s var(--ease-in-out) infinite; }
.flow-link i:nth-child(2) { animation-delay: 1.2s; }
@keyframes flow-up { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(-92px); opacity: 0; } }
.flow-link span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: max-content; max-width: 250px; font-size: 14px; line-height: 1.45; color: #e6ebf3; }
.flow-app { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.flow-app img { width: 44px; height: 44px; border-radius: 12px; }
.flow-app b { display: block; font: 600 16px var(--display); color: #fff; }
.flow-app span { font-size: 13.5px; color: #c9d3e0; }
/* badges */
.secu-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
.secu-badges div { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,.16); }
.secu-badges svg { width: 34px; height: 34px; flex: none; color: #b9a9ff; }
.secu-badges b { display: block; font: 600 15.5px var(--display); color: #fff; }
.secu-badges span { font-size: 13.5px; color: #c9d3e0; }
@media (max-width: 900px) { .secu-grid, .secu-badges { grid-template-columns: 1fr; } .secu-card { padding: 40px 24px; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .flow-link i { animation: none; opacity: 0; } }

/* Works well with: two pairing cards, each with a small picture of the pair working */
.combos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.combo { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; }
.combo-vis { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 34px 24px; background: var(--tint, var(--violet-soft)); }
.combo-vis .mini { flex: 0 1 190px; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 14px 30px -20px rgba(17,38,63,.45); font-size: 13px; color: var(--ink); }
.combo-vis .mini small { display: flex; align-items: center; gap: 7px; white-space: nowrap; font: 600 11.5px var(--display); color: var(--ink-3); margin-bottom: 9px; }
.combo-vis .mini small img { width: 18px; height: 18px; border-radius: 5px; }
.combo-vis .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; padding: 7px 9px; border-radius: 8px; background: #f3f0ff; font-weight: 600; }
.combo-vis .row em { white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 6px; background: #e6ecff; color: #1f4fd1; }
.combo-vis .row.ghost { background: #f6f7fb; color: #9699a6; font-weight: 500; margin-top: 6px; }
.combo-vis .day { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; font: 700 22px var(--display); }
.combo-vis .day span { font: 600 12px var(--body); color: var(--ink-3); }
.combo-vis .ev { padding: 7px 9px; border-radius: 8px; background: #1a73e8; color: #fff; font-weight: 600; }
.combo-arrow { position: relative; flex: none; width: 56px; height: 2px; background: repeating-linear-gradient(90deg, rgba(17,38,63,.3) 0 5px, transparent 5px 10px); }
.combo-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; width: 7px; height: 10px; background: rgba(17,38,63,.45); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.combo-arrow i { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); animation: combo-go 2.2s var(--ease-in-out) infinite; }
@keyframes combo-go { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(44px); opacity: 0; } }
.combo-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.combo-with { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.combo-with img { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 6px 10px rgba(17,38,63,.16)); }
.combo-with b { display: block; font: 700 21px/1.2 var(--display); color: var(--ink); }
.combo-with small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-3); }
.combo-with .pair-logos { display: flex; gap: 6px; flex: none; }
.combo-with.two .pair-logos img { width: 44px; height: 44px; }
.combo h3 { font-weight: 600; font-size: 20px; line-height: 1.3; }
.combo p { margin: 10px 0 22px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.combo-links { display: flex; align-items: center; gap: 18px; margin-top: auto; font-weight: 600; font-size: 15px; }
.combo-links a { text-decoration: none; }
.combo-links a.see { color: var(--violet); }
.combo-links a.inst { color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .combo { transition: border-color 160ms ease, transform 200ms var(--ease-out); } .combo:hover { border-color: #cdc5ff; transform: translateY(-2px); } .combo-links a:hover { text-decoration: underline; } }
@media (max-width: 860px) { .combos { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .combo-arrow i { animation: none; opacity: 0; } }

/* Calendars card: Google or Outlook switch */
.calcard .combo-vis { flex-direction: column; gap: 22px; padding-top: 22px; }
.cal-switch { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border-radius: 99px; box-shadow: 0 8px 20px -14px rgba(17,38,63,.4); }
.cal-switch button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 8px; border: 0; border-radius: 99px; background: none; color: var(--ink-2); font: 600 13.5px var(--display); cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.cal-switch button img { width: 20px; height: 20px; }
.cal-switch button.on { background: var(--ink); color: #fff; }
.cal-switch button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.cal-row { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.combo-vis .ev.ol { border-radius: 4px; background: #0f6cbd; }
.calcard .cal-o { display: none; }
.calcard.is-o .cal-o { display: revert; }
.calcard.is-o .cal-g { display: none; }
.calcard .mini.cal-g, .calcard .mini.cal-o { animation: cal-in 260ms var(--ease-out); }
@keyframes cal-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .calcard .mini.cal-g, .calcard .mini.cal-o { animation: none; } }
/* Phones: stack the pairing mini boards and let the security diagram label wrap */
@media (max-width: 520px) {
  .combo-vis { flex-direction: column; padding: 24px 16px; }
  .cal-row { flex-direction: column; }
  .combo-vis .mini { flex: none; width: 100%; max-width: 260px; }
  .combo-arrow { transform: rotate(90deg); }
  .flow { align-items: flex-start; }
  .flow-link { margin-left: 26px; }
  .flow-link span { width: min(230px, calc(100vw - 150px)); max-width: none; font-size: 13px; }
  .flow-acct small { padding-right: 56px; }
}
.reviews.rail .who img.av { width: 58px; height: 58px; }