/* sec-products.css: /products/, LedgerCare, ClientConnect and Appointments. Owned by builder P2. Colours, radii, shadows and
   easing come from tokens.css. Numbers are the template's /business and home feature rows (dna/DETAILS part A to C,
   MOTION-DECODE section 3): hero grid 705 / 470 with a 64 gap and a 352.8 photo card r24, feature rows 580 / 580 with an 80
   gap, the sticky card 400 x 233 r16 with text blocks at 0.35, olive card r32 pad 64 48, dark panel data-corners 80. */
.d3 { text-wrap: balance; }
/* the business headline role: 75 at 1440, 40 at 390, tracking -0.05em, line height 1 (not a token in tokens.css) */
.band--prod-hero, .page-head { --fs-biz: clamp(40px, calc(40px + (100vw - 390px) * .033333), 75px); }

/* ---- shared small devices (a copy of what sec-pricing.css carries: each page loads only its own module) -------------- */
.tl { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/20.8px var(--body); color: var(--ink); text-decoration: none; min-height: 24px; }
.tl:hover span { text-decoration: underline; text-underline-offset: 4px; }
.tl__chev { width: 20px; height: 20px; flex: none; }
.band--anchor .tl, .band--dark .tl { color: var(--ground); }
.chk { width: 18px; height: 18px; flex: none; }
.stk { display: inline-block; min-width: 72px; padding: 5px 9.5px; border: 2px solid var(--ground); border-radius: var(--r-pill); box-shadow: var(--shadow-float);
  font: 600 18px/23.4px var(--body); text-align: center; color: var(--ink); transform: rotate(-7.7deg); white-space: nowrap; }
.stk--lilac { background: var(--lilac); } .stk--orange { background: var(--orange); } .stk--coral { background: var(--coral); } .stk--mint { background: var(--mint); }
.sec-head { max-width: 864px; margin: 0 auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 16px; }
.sec-head .lead { margin-inline: auto; }
.ticks { list-style: none; margin: 24px 0; padding: 0; display: flex; flex-direction: column; }
.ticks li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font: 500 16px/20.8px var(--body); }
.ticks li > span { flex: 1 1 0%; }

/* ---- the page head as the template's business hero: headline left, lead right ------------------------------------------ */
.page-head { padding-bottom: 48px; }
.page-head .d1 { font-size: var(--fs-biz); line-height: 1; letter-spacing: -.05em; }
.page-head .lead { color: var(--ink); font-size: 20px; line-height: 26px; }
@media (min-width: 992px) {
  .page-head .wrap { display: grid; grid-template-columns: minmax(0, 705fr) minmax(0, 470fr); column-gap: 64px; align-items: end; }
  .page-head .crumbs, .page-head .eyebrow { grid-column: 1 / -1; }
  .page-head .d1 { grid-column: 1; }
  .page-head .lead { grid-column: 2; margin: 0; max-width: none; }
}

/* ---- hero card (352.8 high, r24) with the coded trial card, the pair chip and the action row ----------------------------- */
.band--prod-hero { padding-top: 0; padding-bottom: 0; }
.hero-card { position: relative; height: 352.8px; border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.hero-card picture, .hero-card > img { display: block; width: 100%; height: 100%; }
.hero-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-card--none { height: auto; min-height: 0; background: transparent; overflow: visible; }
/* Appointments (round 4): a portrait crop of the flowers, notebook and window light; object-position picks the band the card shows
   (the blooms and window shadow at 1440, the whole jug and notebook corner at 390) */
.hero-card--appt img { object-position: 50% 34%; }
.hero-card__over { position: absolute; inset: auto 48px 48px auto; }
/* the product's coded card on the hero photo, as the home scene does (right side, vertically centred; on a phone, at the top) */
.hero-card__ui { position: absolute; top: 50%; right: 64px; transform: translateY(-50%); width: min(340px, calc(100% - 48px)); }
.hero-card__ui .ui { width: 100%; box-shadow: var(--shadow-float); }
.trial { width: 340px; padding: 24px; border-radius: var(--r-md); background: var(--ground); box-shadow: var(--shadow-float); }
.trial__n { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.trial__num { font: 400 64px/.95 var(--display); letter-spacing: -.03em; }
.trial__unit { font: italic 400 24px/1 var(--display); }
.trial__t { margin: 0 0 8px; font: 600 16px/20.8px var(--body); }
.trial__b { margin: 0 0 16px; font: 500 14px/18.2px var(--body); color: var(--ink-70); }
.works { position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--ground); color: var(--ink);
  font: 600 14px/18.2px var(--body); text-decoration: none; box-shadow: var(--shadow-float); }
.hero-card--none .works { position: static; box-shadow: none; border: 2px solid var(--card); }
.works .tl__chev { width: 18px; height: 18px; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 32px; }
.hero-note { margin: 0; max-width: 34rem; font: 500 20px/26px var(--body); }
.hero-actions { margin-top: 0; }
.hero-card + .hero-actions { margin-top: 32px; }

/* ---- fit: two olive cards ------------------------------------------------------------------------------------------------ */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.fit { padding: 48px; border-radius: var(--r-xl); background: var(--card); }
.fit .d3 { margin-bottom: 8px; }

/* ---- features: alternating rows, card 580 wide r24 ---------------------------------------------------------------------- */
.frow { display: grid; grid-template-columns: 580px 580px; justify-content: space-between; align-items: center; gap: 80px; margin-top: 64px; }
.frow--flip .frow__card { order: 2; }
/* the home scenes' construction: a rounded blurred photo card with the product's UI card on top (blur 8, brightness .8 as there) */
.frow__card { position: relative; display: grid; place-items: center; min-height: 420px; padding: 32px; overflow: hidden; border-radius: var(--r-lg); background: var(--card); }
.frow__photo { position: absolute; inset: 0; }
.frow__photo picture, .frow__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frow__photo img { filter: blur(8px) brightness(.8); transform: scale(1.06); }
.frow__ui { position: relative; width: 100%; display: flex; justify-content: center; }
.frow__ui .ui { width: min(100%, 360px); padding: 20px 22px; box-shadow: var(--shadow-float); }
.frow__ui .ui__t { font-size: 16px; }
.frow__text .d3 { margin-bottom: 16px; }
.frow__body { margin: 0; font: 500 16px/20.8px var(--body); }

/* ---- coded UI cards: their own coded sample content with readable values (the home scenes' card, a little larger here), no grey bars ---- */
.ui { width: min(100%, 340px); padding: 16px 18px; background: var(--ground); border: 1px solid var(--edge); border-radius: var(--r-md); color: var(--ink); font: 600 14px/20px var(--body); }
.ui__t { margin: 0 0 12px; display: flex; justify-content: space-between; gap: 8px; font: 600 15px/20px var(--body); }
.ui__sub { font-weight: 500; color: var(--ink-70); }
.ui__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ui__list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--card); border-radius: var(--r-xs); }
.ui__list--inv li { background: none; border-bottom: 1px solid var(--edge); border-radius: 0; padding: 9px 0; }
.ui__list--inv li:last-child { border-bottom: 0; }
.ui__id { flex: 1; }
.ui__amt { font-weight: 600; }
.ui__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--anchor); flex: none; }
.ui__chip { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font: 600 12px/18px var(--body); background: var(--card); }
.ui__chip--paid { background: var(--mint); }
.ui__chip--sent { background: var(--lilac); }
.ui__chip--processing { background: var(--orange); }
.ui__msg { margin: 0; font: 500 14px/20px var(--body); }
.ui__file { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; font: 600 14px/20px var(--body); }
.ui__doc { width: 13px; height: 16px; border: 2px solid var(--ink); border-radius: 2px; flex: none; }
.ui__row { margin: 0; display: flex; align-items: center; gap: 8px; }
.ui__arr { width: 9px; height: 9px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); margin-inline: 4px; flex: none; }
.ui__list .ui__arr { margin-inline: 0 4px; }
.ui__ok { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 600 14px/20px var(--body); }
/* in the 400 x 233 stage card the panel has to fit: tighter rows */
.stage__card .ui { width: min(100%, 320px); padding: 14px 16px; }
.stage__card .ui__t { margin-bottom: 8px; }
.stage__card .ui__list { gap: 6px; }
.stage__card .ui__list li { padding: 6px 10px; }
.stage__card .ui__list--inv li { padding: 6px 0; }

/* ---- together: the dark panel (data-corners 80) with three tilted sticker numerals ----------------------------------------- */
.band--together { margin-top: 0; }
.steps { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { position: relative; padding: 48px 32px 32px; border-radius: var(--r-lg); background: var(--ground); color: var(--ink); }
.step__n { position: absolute; top: 0; left: 24px; transform: translateY(-50%) rotate(-7.7deg); min-width: 48px; }
.step__t { margin: 0 0 12px; font: 400 32px/1.05 var(--display); letter-spacing: -.02em; }
.step__b { margin: 0; font: 500 16px/20.8px var(--body); color: var(--ink-70); }

/* ---- product rows: the sticky card scene (home "Built around how you work" device) ----------------------------------------------- */
.band--rows .sec-head { margin-bottom: 64px; }
.stage { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 90px; align-items: start; }
.stage__cards { position: sticky; top: calc(50vh - 117px); height: 233px; }
.stage__card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--card); opacity: 0; overflow: hidden; transition: opacity .22s ease; }
.stage__card.is-on { opacity: 1; }
.stage__card.is-pop { animation: pop .3s var(--ease-rise); }
@keyframes pop { 0% { transform: scale(1.04); } 100% { transform: scale(1); } }
.stage__texts { list-style: none; margin: 0; padding: 15vh 0; display: flex; flex-direction: column; gap: 160px; }
/* the template dims inactive blocks to 0.35; that reads at 1.9:1, below the gate's 4.5:1, so the dim is 0.65 here (5.2:1) */
.stage__text { max-width: 55ch; min-height: 20vh; opacity: .65; transition: opacity .3s; }
.stage__text.is-active { opacity: 1; }
.stage__text .d3 { margin-bottom: 24px; }
.stage__text p { margin: 0; font: 500 16px/20.8px var(--body); }
.mstacks { display: none; list-style: none; margin: 0; padding: 0; }
.mstack { display: flex; flex-direction: column; gap: 32px; align-items: center; text-align: center; padding: 30px 0; }
.mstack__card { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--card); text-align: left; }
.mstack__card .ui { width: 100%; }
.mstack .d3 { font-size: 32px; line-height: .95; }
.mstack p { margin: 0; font: 500 14px/18.2px var(--body); }
.no-stage .stage__text, .no-stage .stage__text.is-active { opacity: 1; }

/* ---- by plan ---------------------------------------------------------------------------------------------------------------------- */
.prows { list-style: none; margin: 48px 0 0; padding: 0; }
.prow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px 32px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--card); }
.prow__t { margin: 0; font: 400 32px/1.05 var(--display); letter-spacing: -.02em; }
.prow__plans { justify-self: start; padding: 6px 12px; border-radius: var(--r-sm); background: var(--card); font: 600 14px/18.2px var(--body); }
.prow__b { grid-column: 1 / -1; margin: 0; color: var(--ink-70); }

/* ---- roles: the olive card and parts ------------------------------------------------------------------------------------------------ */
.olive { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; padding: 64px 48px; background: var(--card); border-radius: var(--r-xl); }
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.role__t { margin: 0 0 12px; font: 400 28px/1.05 var(--display); letter-spacing: -.02em; }
.role p { margin: 0; font: 500 16px/20.8px var(--body); color: var(--ink-70); }
.parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.part { padding: 32px; border-radius: var(--r-lg); background: var(--card); }
/* a small product snippet in place of an icon: their coded sample content on a cream chip row (decorative) */
.snip { display: flex; align-items: center; gap: 10px; max-width: 100%; box-sizing: border-box; height: 48px; margin-bottom: 24px; overflow: hidden; padding: 10px 14px; background: var(--ground);
  border: 1px solid var(--edge); border-radius: var(--r-sm); font: 600 14px/20px var(--body); color: var(--ink); }
.snip__id { flex: 1; }
.snip__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snip__when { font-weight: 500; color: var(--ink-70); }
.snip__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--anchor); flex: none; }
.snip__pill { padding: 3px 11px; border-radius: var(--r-pill); background: var(--card); font: 600 13px/18px var(--body); white-space: nowrap; }
.snip__pill--on { background: var(--cta); }
.snip .ui__chip { flex: none; }
.snip .ui__doc { width: 13px; height: 16px; }
.hero-actions--top { margin: 0 0 32px; }
.part__t { margin: 0 0 12px; font: 400 32px/1.05 var(--display); letter-spacing: -.02em; }
.part p { margin: 0; font: 500 16px/20.8px var(--body); }
.part__more { margin-top: 20px; }
/* an inline link inside a bullet: its underline stays (WCAG 1.4.1) and deepens to cobalt on hover */
.ilink { color: inherit; padding-block: 3px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }   /* the block padding lifts the touch target to 24 px without moving the line */
.ilink:hover { text-decoration-color: var(--link); text-decoration-thickness: 2px; }

/* ---- before / after: the deep anchor panel over blurred photographs -------------------------------------------------------------------- */
.band--ba { --blur-frame: 8px; }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.ba__frame { position: relative; margin: 0; min-height: 420px; display: flex; align-items: flex-end; border-radius: var(--r-lg); overflow: hidden; background: var(--anchor-deep); }
.ba__bg { position: absolute; inset: 0; }
.ba__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(var(--blur-frame)); transform: scale(1.08); }
.ba__frame::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 46%, transparent); }
.ba__tag { position: absolute; top: 32px; left: 32px; z-index: 2; }
.ba__text { position: relative; z-index: 2; padding: 32px; font: 400 32px/1.05 var(--display); letter-spacing: -.02em; color: var(--ground); text-wrap: balance; }

/* ---- breakpoints ---------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .hero-card__over { inset: auto 24px 24px 24px; }
  .trial { width: auto; max-width: 340px; }
  .fit-grid, .ba { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 1fr; gap: 32px; }
  .frow--flip .frow__card { order: 0; }
  .frow__card { min-height: 320px; padding: 24px; }
  .hero-card__ui { top: 24px; right: 50%; transform: translateX(50%); }
  .steps, .parts, .roles { grid-template-columns: 1fr; }
  .steps { gap: 40px; }
  .stage { display: none; }
  .mstacks { display: flex; flex-direction: column; gap: 60px; padding: 48px 0 0; }
  .olive { grid-template-columns: 1fr; gap: 32px; }
  .prow { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hero-card { height: 320px; border-radius: var(--r-lg); }
  .page-head .lead { font-size: 18px; line-height: 23.4px; }
  .fit { padding: 32px; }
  .olive { padding: 32px; border-radius: var(--r-lg); }
  .hero-card__over { inset: auto 12px 12px 12px; }
  .trial { padding: 16px; max-width: none; }
  .trial__b { display: none; }
  .ba__frame { min-height: 360px; }
  .ba__text { font-size: 28px; }
  .ba__tag { top: 24px; left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage__card, .stage__text { transition: none; }
  .stage__text { opacity: 1; }
  .stage__card.is-pop { animation: none; }
}