/* Intellica homepage — pricing section (2026-10-12). Loaded after home.css by index.html and index-alt.html. */

/* ---------- pricing (2026-10-12, pass 2): popcorn.space's pricing band, adapted (Calvin), under a centred header like
   every other section. Calvin: "way less text in the pricing section boxes". The boxes carry the bare essentials;
   the context lives in the header (Charlie's line as the h2, the fee line as the subhead).
   Three planes, as on popcorn: left, how fast you're live (light); middle, the phone, a screen only (UI, no code-drawn
   hardware) tilted over both; right, the price (ink). All three share one centre line, the ink panel stands proud of
   the light one at both ends, and the text hugs the outer edges so the phone never reaches it.
   Geometry is in container units of the band's width (cqw), so from 960 up the overlap keeps its proportions at any
   width. Below 960 the planes stack and the phone rises out of the ink panel, which is popcorn's own mobile layout.
   The old .price-grid rules in home.css stay for v1. ---------- */
.pricing.pop { padding: 10px 0 76px; }
.pop .wrap { max-width: 1240px; container-type: inline-size; }   /* the results grid's edges. 1cqw = 1% of this width */
.pricing.pop .wrap > .head { text-align: center; padding-top: 70px; margin-bottom: 36px; }   /* this selector outranks home.css's v1 .head rules */
.pricing.pop .wrap > .head .h2 { max-width: none; margin: 0 auto; white-space: nowrap; font-size: min(56px, calc(100cqw / 16.6)); }   /* one line (Calvin): the line is 15.7em wide, so it scales to fit the band */
@media (max-width: 599px) { .pricing.pop .wrap > .head .h2 { white-space: normal; font-size: 32px; text-wrap: balance; } }   /* phones: two even lines, "get paid." kept together (nbsp) */

/* the band: the phone sets its height, and both panels sit on the phone's centre line */
.pp { position: relative; height: 49.5cqw; }   /* follows the phone (Calvin: a tad shorter) */
.pp-left, .pp-right { position: absolute; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; justify-content: center; border-radius: 28px; }
.pp-left { left: 0; width: 50.5%; min-height: 30.5cqw; padding: clamp(24px, 2.4cqw, 32px) 0 clamp(42px, 3.9cqw, 50px) 4.6cqw; z-index: 1;   /* grows to fit the tag; the bottom padding keeps the A/B pill clear of the list */
  background: color-mix(in oklab, var(--wash) 32%, #fff); box-shadow: inset 0 0 0 1px var(--line); }   /* a warm off-white (Calvin: no gradient), edged so it holds on the cool ground */
.pp-right { right: 0; width: 50%; height: 36cqw; padding-right: 4.6cqw; z-index: 2; align-items: flex-end; text-align: right;
  background: var(--hero); color: #fff; }   /* brand blue (Calvin, was ink) */
.pp-left > :not(.pp-chip), .pp-right > :not(.pp-phone) { max-width: 30cqw; }   /* the text zone: stops well short of the tilted phone */
.pp-h { margin: 0; font-size: clamp(30px, 3.4cqw, 40px); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.pp-right .pp-h { color: #fff; }

/* left: the three steps */
.pp-steps { list-style: none; margin: clamp(20px, 2.3cqw, 28px) 0 0; padding: 0; display: grid; gap: clamp(10px, 1.1cqw, 13px); }
.pp-steps li { display: flex; align-items: center; gap: clamp(12px, 1.2cqw, 14px); font-size: clamp(15px, 1.45cqw, 17px); line-height: 1.25; color: var(--ink); text-wrap: balance; }
.pp-steps b { flex: none; display: grid; place-items: center; width: clamp(34px, 3.45cqw, 40px); height: clamp(34px, 3.45cqw, 40px); border-radius: 50%; background: #fff;
  font-family: var(--display); font-variation-settings: var(--display-fvs); font-weight: 400; font-size: 1.1em; line-height: 1; box-shadow: 0 1px 2px rgba(2,11,36,.05); }
/* the aside: a UI chip on the panel's bottom edge. Straight, no sticker */
.pp-chip { position: absolute; left: 4.6cqw; bottom: 0; translate: 0 50%; display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px 11px 18px;
  border-radius: 999px; background: #fff; font-size: 15px; line-height: 1; color: var(--ink); white-space: nowrap; box-shadow: 0 0 0 1px var(--line), 0 8px 22px rgba(2,11,36,.1); }
.pp-chip i { display: block; width: 18px; height: 18px; }
.pp-chip svg { display: block; width: 100%; height: 100%; }
.pp-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: 0 0 clamp(14px, 1.6cqw, 20px); padding: 7px 13px 7px 10px;
  border-radius: 999px; background: var(--hero-tint); color: var(--hero); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; }
  /* "no annual contract" (client, 2026-10-19; Calvin: top left of the card, a different pill from the A/B test's): brand-blue tint and an open padlock, inside the card */
.pp-tag svg { display: block; flex: none; width: 15px; height: 15px; }

/* right: the price */
.pp-kick { font-size: clamp(15px, 1.5cqw, 18px); line-height: 1.2; color: rgba(255,255,255,.8); }   /* "you pay us" (Calvin) */
.pp-price { margin-top: clamp(8px, .9cqw, 12px); font-family: var(--sans); font-weight: 400; font-size: clamp(76px, 9cqw, 104px); line-height: .84; letter-spacing: -.055em; }
.pp-per { margin-top: 14px; font-size: clamp(20px, 2.15cqw, 26px); line-height: 1.25; color: rgba(255,255,255,.92); }   /* bigger (Calvin) */
.pp-per b { font-weight: 600; color: #fff; }
.pp-btn { margin-top: clamp(20px, 2.3cqw, 28px); background: #fff; color: var(--ink); }
.pp-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.35); }

/* the phone: a screen only, tilted over both panels. Sized in em off --pw, so the screen scales as one piece */
.pp-phone { --pw: 23.5cqw; position: absolute; left: 0; top: 50%; z-index: 1; font-size: calc(var(--pw) / 18.3); width: 18.3em; height: 36em;   /* Calvin: a tad shorter, top and bottom (was 38.9em) */
  translate: -50% -50%; rotate: 7deg; border-radius: 2.6em; background: #fff; overflow: hidden; text-align: left;
  box-shadow: 0 0 0 1px rgba(2,11,36,.08), 0 2.4em 4.6em -1.2em rgba(2,11,36,.32), 0 .7em 1.8em rgba(2,11,36,.1); }
.ps { display: flex; flex-direction: column; height: 100%; font-family: var(--sans); color: #000; }
.ps-bar { flex: none; display: flex; align-items: center; justify-content: space-between; height: 2.35em; padding: .62em 1.55em 0 1.9em; }   /* Calvin: the top was way too big; iOS proportions now */
.ps-bar b { font-weight: 600; font-size: .8em; letter-spacing: -.01em; }
.ps-icons { display: flex; align-items: center; gap: .3em; }
.ps-icons svg { display: block; height: .6em; width: auto; fill: currentColor; }
.ps-head { flex: none; display: flex; flex-direction: column; align-items: center; gap: .2em; padding: .15em 0 .45em; border-bottom: 1px solid rgba(0,0,0,.07); }
.ps-av { display: grid; place-items: center; width: 2.15em; height: 2.15em; border-radius: 50%; font-size: .95em; font-weight: 500; color: #fff;
  background: linear-gradient(180deg, #A5ACBA, #858C9A); }
.ps-head b { display: flex; align-items: center; gap: .3em; font-weight: 500; font-size: .62em; }
.ps-head b svg { width: .42em; height: .7em; color: #8E8E93; }
.ps-msgs { display: flex; flex-direction: column; padding: .9em .95em 0; }
/* bubbles: iMessage shapes, received #E9E9EB, sent iMessage blue (a person sent it). Tails as on the FAQ: an ellipse cut from a small box */
.ps-b { position: relative; max-width: 76%; padding: .47em .8em .5em; border-radius: 1.15em; font-size: 1em; line-height: 1.3; letter-spacing: -.008em; }
.ps-b + .ps-b { margin-top: .5em; }
.ps-b.in { align-self: flex-start; background: var(--bubble-in); color: #000; border-bottom-left-radius: .3em; }
.ps-b.out { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: .3em; }
.ps-b::after { content: ""; position: absolute; bottom: 0; width: 1em; height: 1.05em; }
.ps-b.out::after { right: -.55em; background: radial-gradient(1em 1.05em at 100% 0, transparent 96%, var(--blue) 100%); }
.ps-b.in::after { left: -.55em; background: radial-gradient(1em 1.05em at 0 0, transparent 96%, var(--bubble-in) 100%); }
.ps-stamp { align-self: center; margin: 1em 0 .55em; font-size: .72em; font-weight: 500; color: #8E8E93; letter-spacing: .01em; }
/* the payoff */
.ps-order { display: flex; align-items: center; gap: .65em; margin-top: .9em; padding: .68em .9em .68em .7em; border-radius: .95em; background: #fff;
  box-shadow: 0 0 0 1px rgba(2,11,36,.09), 0 .35em 1em rgba(2,11,36,.07); font-size: .86em; line-height: 1.3; color: var(--ink-2); }
.ps-order .ok { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--green-ui); }
.ps-order .ok svg { width: 1.15em; height: 1.15em; }
.ps-order b { display: block; color: var(--ink); font-weight: 600; }
.ps-order .amt { margin-left: auto; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-compose { margin-top: auto; flex: none; display: flex; align-items: center; gap: .55em; padding: .6em .9em 1.35em; }
.ps-plus { flex: none; display: grid; place-items: center; width: 2.15em; height: 2.15em; border-radius: 50%; background: #EEEEF0; color: #7C7C80; }
.ps-plus svg { width: .85em; height: .85em; }
.ps-field { flex: 1; display: flex; align-items: center; height: 2.3em; padding: 0 .95em; border-radius: 1.15em; box-shadow: inset 0 0 0 1px rgba(0,0,0,.13); color: #A0A0A6; font-size: .95em; }

/* below 960: the planes stack, centred. Light panel, then ink, with the phone rising out of the ink panel (cropped by
   its bottom edge, the composer and the empty screen below the thread fall outside) */
@media (max-width: 520px) { .pricing.pop .wrap > .head .h2 { text-wrap: balance; } }   /* even lines on a phone */

@media (max-width: 959px) {
  .pricing.pop { padding-bottom: 56px; }
  .pricing.pop .wrap > .head { padding-top: 56px; margin-bottom: 36px; }
  .pp { height: auto; max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; }
  .pp-left, .pp-right { position: relative; top: auto; left: auto; right: auto; translate: none; width: auto; height: auto; align-items: center; text-align: center; border-radius: 26px; }
  .pp-left > :not(.pp-chip), .pp-right > :not(.pp-phone) { max-width: 100%; }
  .pp-left { padding: 40px 24px 48px; }
  .pp-right { padding: 44px 24px 0; overflow: hidden; }
  .pp-h { font-size: 30px; }
  .pp-steps { text-align: left; }
  .pp-chip { left: 50%; translate: -50% 50%; }
  .pp-tag { align-self: center; }
  .pp-phone { --pw: min(248px, 66cqw); position: relative; left: auto; top: auto; z-index: auto; translate: none; rotate: 4deg; flex: none; height: 38.9em; margin: 40px 0 -6.25em; }   /* full height here: the crop shows the thread down to the order card, and the tilt keeps the composer clear of it */
}
@media (max-width: 400px) { .pp-left, .pp-right { padding-left: 16px; padding-right: 16px; } .pp-steps li { gap: 10px; } }   /* every step stays on one line at 320 */

/* direct attribution, shown (Calvin, 2026-10-17, after Intellica's own LinkedIn post): the restock text carries a tracked
   link, and the order card names the tag it came through. The tag sits a touch brighter in the link so it reads. */
.ps-link { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .14em; }
.ps-link > span { white-space: nowrap; }   /* it breaks only before the ?, so the tag reads on its own line */
.ps-link { display: block; margin-top: .2em; }   /* the link starts its own line */
.ps-b:has(.ps-link) { text-wrap: balance; }   /* and the words above it balance, no lone "you:" */
.ps-link i { font-style: normal; font-weight: 600; }
.ps-order .t { min-width: 0; }
/* phones: the panel crops the phone at its bottom edge, just under the order card (the tracked link made the thread longer,
   the smaller header gave the room back). The composer, which could peek in at the tilted corner, is hidden there. */
@media (max-width: 959px) {
  .pp-phone { margin-bottom: -5.35em; }
  .pp-phone .ps-compose { visibility: hidden; }
}

/* phones: the section rhythm, about a third tighter (Calvin, 2026-10-17: "all sections a bit too spaced on mobile") */
@media (max-width: 640px) { .pricing.pop { padding-bottom: 32px; } .pricing.pop .wrap > .head { padding-top: 44px; } }