/* Product pages on the journey: the page's own blocks (tiles, steps, prices, the comparison, the
   FAQ, the try tool) set at the film's card sizes inside the glass cards. The cards themselves are
   film.css; this file only scales what sits in them. */

.cine { text-align: left; }
.cine .ap-wrap { width: auto; margin: 0; }
.cine .ap-head, .cine .ap-head--center { max-width: none; margin: 0 0 16px; text-align: left; }
.cine .ap-head--center .ap-intro, .cine .ap-intro.ap-head--center { margin-inline: 0; text-align: left; }
.cine .ap-rise > * { animation: none; }

/* type: Home's card scale */
.cine .ap-eyebrow { margin: 0 0 10px; font-size: 11.5px; letter-spacing: 0.16em; }
.cine .ap-h1 { font-size: 64px; line-height: 0.98; }
.cine .ap-h2 { font-size: 31px; line-height: 1.05; letter-spacing: -0.025em; }
.cine .ap-h3 { font-size: 19px; line-height: 1.15; }
.cine .ap-intro { margin-top: 10px; font-size: 16px; line-height: 1.5; max-width: 40em; }
.cine .ap-body { font-size: 14.5px; line-height: 1.5; }
.cine .ap-fine, .cine .ap-notes { font-size: 12.5px; line-height: 1.5; }
.cine .ap-notes ol, .cine .ap-notes ul { margin: 8px 0 0; padding-left: 1.2em; }

/* the hero card: the page headline on the dark side, its price and buttons under it */
.cine-hero { text-align: left; }
.cine-hero .ap-intro { margin: 18px 0 0; font-size: 18px; color: #d9d5d1; }
.cine-hero .ap-hero__price { margin: 16px 0 0; max-width: none; font-size: 15px; }
.cine .ap-cta { justify-content: flex-start; margin-top: 22px; gap: 10px; }

/* blocks inside a card: tighter than the open page, same look */
.cine .ap-tiles, .cine .ap-steps, .cine .ap-prices, .cine .ap-shop { gap: 12px; }
.cine .ap-tile, .cine .ap-card, .cine .ap-price, .cine .ap-shop__item { padding: 16px 18px; box-shadow: none; }
.cine .ap-tile .ap-body, .cine .ap-card .ap-body { margin-top: 6px; font-size: 13.5px; }
.cine .ap-price__big { font-size: 40px; }
.cine .ap-compare th, .cine .ap-compare td { padding: 8px 10px; font-size: 13.5px; }
.cine .ap-faq summary { padding: 12px 0; font-size: 15px; }
.cine .ap-faq details > p { font-size: 14px; }
.cine .ap-band { padding: 0; gap: 14px; }
.cine .ap-sms, .cine .ap-chatmock { max-width: 360px; }

/* every card fits its stop without scrolling inside: the page's lists set tight, in columns
   where the card is wide enough (the centred card is 880 units wide on a laptop) */
.cine .ap-head { margin-bottom: 12px; }
.cine .ap-h2 + .ap-intro, .cine .ap-head .ap-intro { margin-top: 8px; font-size: 14.5px; }
.cine .ap-ticks { margin-top: 10px; gap: 5px; }
.cine .ap-ticks li { padding-left: 22px; font-size: 13.5px; line-height: 1.4; }
.cine .ap-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cine .ap-tiles > * { grid-column: span 3; }
.cine .ap-tiles > .ap-tile--wide { grid-column: span 4; }
.cine .ap-tiles > .ap-tile--narrow { grid-column: span 2; }
.cine .ap-tile, .cine .ap-card { padding: 13px 15px; }
.cine .ap-tile .ap-h3, .cine .ap-card .ap-h3 { font-size: 16.5px; }
.cine .ap-tile--split { gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cine .ap-tile--split .ap-msg { max-width: none; }
.cine .ap-sms__bubble, .cine .ap-chatmock__them, .cine .ap-chatmock__bot { font-size: 12.5px; line-height: 1.4; }
.cine .ap-msg figcaption { margin-top: 4px; font-size: 11.5px; }
.cine .ap-sms { padding: 10px 11px 11px; }
.cine .ap-chips { margin-top: 10px; gap: 6px; }
.cine .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cine .ap-prices { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.cine .ap-price .ap-ticks { margin-top: 10px; padding-top: 10px; }
.cine .ap-price .btn { margin-top: 14px; min-height: 44px; }
.cine .ap-price__big { margin: 4px 0 0; }
.cine .ap-price__big b { font-size: 40px; }
.cine .ap-price__then { margin-top: 6px; font-size: 14px; line-height: 1.4; }
.cine .ap-price .ap-eyebrow { margin-bottom: 4px; }
.cine .ap-price .ap-fine { margin-top: 8px; }
.cine .ap-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px; align-items: start; max-width: none; border-top: 0; }
.cine .ap-faq details { border-top: 1px solid var(--ap-line); }
.cine .ap-tile, .cine .ap-card { padding: 11px 13px; }
.cine .ap-tile .ap-body, .cine .ap-card .ap-body { margin-top: 4px; font-size: 13px; line-height: 1.42; }
.cine .ap-tile .ap-h3, .cine .ap-card .ap-h3 { font-size: 15.5px; }
.cine .ap-faq summary { padding: 9px 30px 9px 0; font-size: 14.5px; line-height: 1.3; min-height: 0; }
.cine .ap-faq details > p { margin: -2px 0 10px; font-size: 13.5px; line-height: 1.5; }
.cine .ap-compare th, .cine .ap-compare td { padding: 6px 9px; font-size: 13px; line-height: 1.35; }
.cine .ap-talk { margin-top: 12px; font-size: 14.5px; }
.cine .ap-cta .btn { min-height: 44px; }
.cine-fine .ap-wrap ul, .cine-fine ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }

/* even grids: equal columns, equal heights in a row, no lone card (cine_pages.py marks a row's
   odd one out .cine-span, and a tile with a picture in it runs the full width) */
.cine .ap-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.cine .ap-tiles > *, .cine .ap-tiles > .ap-tile--wide, .cine .ap-tiles > .ap-tile--narrow { grid-column: auto; }
.cine .ap-tiles > .ap-tile--split, .cine .ap-tiles > .cine-span { grid-column: 1 / -1; }
.cine .ap-steps { align-items: stretch; }

/* price tiles side by side: the same height, every row lined up across them (eyebrow, price,
   line, list, button), the lists left aligned, the buttons the same size on one line */
.cine .ap-price, .cine .ap-price * { text-align: left; }
.cine .ap-price { display: flex; flex-direction: column; }
.cine .ap-price .btn { width: 100%; margin-top: auto; }
.cine .ap-price .ap-ticks { margin-bottom: 14px; }
.cine .ap-prices { align-items: stretch; }
@supports (grid-template-rows: subgrid) {
  .cine .ap-prices { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .cine .ap-prices > .ap-price { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .cine .ap-prices > .ap-price > .btn { align-self: end; }
  /* cards side by side: six rows, as one can carry two lines under its price (the website card does); the
     button takes the last row, so the shorter card's button still lines up and nothing runs under it */
  .cine .ap-prices:has(> .ap-price + .ap-price) { grid-template-rows: repeat(6, auto); }
  .cine .ap-prices:has(> .ap-price + .ap-price) > .ap-price { grid-row: span 6; }
  .cine .ap-prices:has(> .ap-price + .ap-price) > .ap-price > .btn { grid-row: -2 / -1; }
}
.cine .ap-prices + .ap-fine { margin-top: 10px; }

/* the fine print: a compact card sized to its words */
.cine .ap-notes { margin: 0; padding: 0; border: 0; }
.cine .ap-notes ul { gap: 5px; font-size: 12.5px; }
.cine-fine { text-align: left; }

/* the try tool: one stateful card, its steps sit straight on the glass */
.cine-tool .try-card { background: none; border: 0; box-shadow: none; padding: 0; animation: none; }
.cine-tool .try-card + .try-card { margin-top: 0; }
.cine-tool .try-h1 { font-size: 46px; }
.cine-fine .try-fine, .cine-fine.ap-notes { text-align: left; }

/* phones: the pane at the foot reads at the phone card sizes */
.film.is-p .cine .ap-h1 { font-size: 38px; }
.film.is-p .cine .ap-h2 { font-size: 24px; }
.film.is-p .cine-tool .try-h1 { font-size: 30px; }
.film.is-p .cine .ap-tiles, .film.is-p .cine .ap-steps, .film.is-p .cine .ap-prices { grid-template-columns: 1fr; }
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000), (hover: none) and (pointer: coarse) and (min-aspect-ratio: 1351/1000), (max-width: 820px) {
  .cine .ap-h1 { font-size: clamp(30px, 8.6vw, 38px); }
  .cine .ap-h2 { font-size: 24px; }
  .cine-tool .try-h1 { font-size: 30px; }
}
.cine .ap-tiles { gap: 8px; }
.cine .ap-tiles .ap-tile { padding: 10px 13px; }

/* the try tool on the film: its longest step (the details form) fits a short laptop without
   scrolling: the choices side by side, each field beside its label */
.cine-tool .try-h2 { font-size: 28px; }
.cine-tool .try-form { margin-top: 14px; gap: 6px; }
.cine-tool .try-choices { grid-template-columns: 1fr 1fr; gap: 8px; }
.cine-tool .try-choices legend { grid-column: 1 / -1; }
.cine-tool .try-choice { padding: 10px 12px; font-size: 14px; }
.cine-tool .try-choice em { font-size: 12.5px; line-height: 1.4; }
#step-next .try-form { grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 14px; }
#step-next .try-form > .try-choices, #step-next .try-form > .try-consent, #step-next .try-form > .try-btn, #step-next .try-form > .try-msg, #step-next .try-form > .try-hp { grid-column: 1 / -1; }
#step-next .try-label { margin-top: 0; }
.cine-tool .try-consent { margin-top: 6px; font-size: 13px; }
.cine-tool .try-btn { margin-top: 8px; }

/* phones: the same cards in fewer screens, never under the 13px reading floor */
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000) {
  .cine .ap-tiles, .cine .ap-steps, .cine .ap-prices { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .cine .ap-tiles > .ap-tile--split, .cine .ap-tiles > .cine-span { grid-column: 1 / -1; }
  .cine .ap-tile, .cine .ap-card { padding: 9px 10px; }
  .cine .ap-tile .ap-h3, .cine .ap-card .ap-h3 { font-size: 14.5px; }
  .cine .ap-tile .ap-body, .cine .ap-card .ap-body, .cine .ap-ticks li { font-size: 13px; line-height: 1.38; }
  .cine .ap-price__big b { font-size: 30px; }
  .cine .ap-faq { grid-template-columns: minmax(0, 1fr); }
}
.cine .ap-prices:has(> .ap-price:only-child) { grid-template-columns: minmax(0, 1fr); }
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000) {
  .cine .ap-tile--split { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cine .ap-sms, .cine .ap-chatmock { max-width: none; padding: 8px 9px; }
  .cine .ap-sms__head { margin-bottom: 6px; }
  .cine .ap-sms__bubble, .cine .ap-chatmock__them, .cine .ap-chatmock__bot { font-size: 13px; line-height: 1.35; }
  .cine .ap-head { margin-bottom: 8px; }
}
@media (hover: none) and (pointer: coarse) and (max-aspect-ratio: 799/1000), (max-width: 820px) {
  .cine .ap-compare tbody { gap: 6px; }
  .cine .ap-compare tr { padding: 2px 10px; }
  .cine .ap-compare tbody th { padding: 7px 0 4px; font-size: 14.5px; }
  .cine .ap-compare td { padding: 4px 0; gap: 8px; font-size: 13px; line-height: 1.35; }
  .cine .ap-compare td::before { font-size: 13px; }
  .cine .ap-compare td.is-us { margin: 0 -6px 4px; padding: 5px 6px; }
}

/* the example lead, drawn the way the TradeSmart portal shows one: a dark tile, the New lead tag,
   the caller and the job, and the Call back button (a picture of it: not a link) */
.cine .ap-lead { padding: 12px 13px 13px; background: #0B0D10; border: 1px solid rgba(255, 255, 255, 0.12); border-left: 3px solid var(--brand); text-align: left; }
.cine .ap-lead__head { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cine .ap-lead__tag { font: 700 10.5px/1.2 var(--sc-font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--night-accent); }
.cine .ap-lead__meta { font-size: 11.5px; color: #a7a3a0; }
.cine .ap-lead__name { margin: 6px 0 0; font: 700 17px/1.2 var(--sc-font-display); color: #ffffff; }
.cine .ap-lead__rows { margin: 8px 0 0; display: grid; gap: 4px; }
.cine .ap-lead__rows > div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.35; }
.cine .ap-lead__rows dt { color: #a7a3a0; }
.cine .ap-lead__rows dd { margin: 0; color: #E7E5E1; }
/* the two website builds under the plans: two even columns */
.cine .cine-builds { margin-top: 12px; }
.cine .cine-builds .ap-eyebrow { margin-bottom: 6px; }
.cine .cine-builds__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cine .cine-build { padding: 10px 12px; border: 1px solid rgba(139, 0, 0, 0.42); background: #000; }
.cine .cine-build p { margin: 0; }
.cine .cine-build__name { font: 700 14.5px/1.25 var(--sc-font-display); color: #fff; }
.cine .cine-build__name b { margin-left: 6px; color: var(--night-accent); }
.cine .cine-build__what { margin-top: 4px !important; font-size: 13px; line-height: 1.4; color: #E7E5E1; }
.cine .cine-build__cap { margin-top: 4px !important; font-size: 12.5px; color: #a7a3a0; }

/* a merged card: the second section sits under the first, set off by a hairline */
.cine .cine-more { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.cine .cine-more .ap-wrap, .cine .cine-more .ap-notes { margin: 0; padding: 0; border: 0; }
.cine .cine-more .ap-card { padding: 0; border: 0; background: none; box-shadow: none; }
.cine .cine-more .ap-card + .ap-card, .cine .cine-more .ap-wrap + .ap-wrap { margin-top: 14px; }
.cine .cine-more .ap-notes ul { columns: 2; column-gap: 24px; display: block; }
.cine .cine-more .ap-notes li { margin-bottom: 5px; }
.cine:has(> .cine-more) .ap-band { padding: 0; border: 0; background: none; box-shadow: none; }
.cine .ap-talk__ways { justify-content: flex-start; }
.cine-tool .try-fine { margin-top: 12px; text-align: left; font-size: 12.5px; }
.cine .ap-lead__call { display: block; margin-top: 10px; padding: 9px 0; text-align: center; background: var(--brand); color: #ffffff; font: 700 13.5px/1 var(--sc-font-display); }

/* the website price card with its build row: set tight to fit a laptop */
.cine .ap-prices .ap-ticks li { font-size: 13px; line-height: 1.32; }
.cine .ap-prices .ap-price .ap-ticks { margin-top: 8px; padding-top: 8px; }
.cine .ap-prices .ap-price__big b { font-size: 34px; }
.cine .ap-prices .ap-price .btn { margin-top: 10px; }
.cine .cine-builds { margin-top: 10px; }
.cine .ap-prices .ap-tile, .cine .ap-prices .ap-card { padding: 11px 13px; }
.cine .cine-build { padding: 8px 10px; }
.cine .cine-builds .ap-eyebrow { margin-bottom: 4px; }
.cine .ap-prices .ap-ticks li { font-size: 12.5px; }
.cine .ap-prices .ap-price__then { font-size: 13px; line-height: 1.35; }
.cine .cine-build__what { font-size: 12.5px; line-height: 1.35; }
.cine .cine-builds, .cine .cine-build { text-align: left; }