/* sec-pros.css: section styles for the profession pages and the Chicago page. Owned by P4. Every colour, radius, shadow and
   easing reads a token from tokens.css. Devices: eyebrow, headline pairing, the pale card, the plan card with its tilted
   sticker tag (DETAILS part A section 6), the tilted colour card (part B section 13), text links (part A section 5). */

/* ---- tone: one custom property per colour card ------------------------------------------------ */
.t-lilac  { --tone: var(--lilac); }
.t-orange { --tone: var(--orange); }
.t-coral  { --tone: var(--coral); }
.t-mint   { --tone: var(--mint); }
.t-signal { --tone: var(--signal, #FFBCF2); }      /* the template's signal pink (round 4, critic 6); --signal is Y1's token, the fallback is the same value */
.t-pale  { --tone: var(--card); }

/* ---- section head (centred eyebrow-less head, the template's h2-bigger) --------------------------- */
.sec-head { text-align: center; max-width: 54rem; margin: 0 auto var(--gap-xl); }
.sec-head .d2 { text-wrap: balance; }
.sec-head__lead { margin: var(--gap) auto 0; text-wrap: balance; }

/* ---- hero: text left, the tilted colour card right ------------------------------------------------ */
.pro-hero { padding: 196px 0 var(--band-pad); }
.pro-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap-xxl); align-items: center; }
.pro-hero .d1 { font-size: var(--fs-h2big); line-height: 1; }
.pro-hero .actions { margin-top: var(--gap-l); }
.tilt-stage { perspective: 1500px; display: grid; justify-items: center; }
.tilt-card {
  position: relative; margin: 0; width: min(100%, 26rem); padding: var(--gap-m); border-radius: calc(var(--r-xl) * 1.5);
  background: var(--tone); color: var(--ink); backface-visibility: hidden; will-change: transform;
}
.tilt-card__photo { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3.3; background: var(--card); }
.tilt-card__photo img, .loc-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.tilt-card__cap { display: grid; gap: var(--gap-m); padding: 20px var(--gap-s) var(--gap-s); }
.tilt-card__k { font: 400 40px/.95 var(--display); letter-spacing: -.03em; }
.pchips { display: flex; flex-wrap: wrap; gap: var(--gap-s); }
.pchip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: var(--r-sm);
  font: 600 14px/1.2 var(--body); color: var(--ink); background: var(--ground); text-decoration: none; width: fit-content;
}
a.pchip--link { transition: transform .2s; }
a.pchip--link:hover { transform: scale(.97); }

/* the Chicago hero card: a pale card holding the photo, with the sticker tag across its top edge */
.loc-stage { display: grid; justify-items: center; padding-top: var(--gap); }
.loc-card { position: relative; margin: 0; width: min(100%, 30rem); padding: var(--gap-m); border-radius: var(--r-xl); background: var(--card); }
.loc-card__photo { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1 / 1; }

/* ---- the sticker tag (DETAILS part A section 6): rotate -7.7deg, full pill, cream border, small hard shadow ----------- */
.sticker {
  position: absolute; top: 2px; left: 50%; z-index: 2; min-width: 72px; padding: 5px 9.5px; border-radius: 100px; background: var(--tone, var(--lilac));
  border: 2px solid var(--ground); box-shadow: var(--shadow-float); color: var(--ink); text-align: center; white-space: nowrap;
  font: 600 18px/1.3 var(--body); transform: translate(-50%, -50%) rotate(-7.7deg);
}

/* ---- "what changes": pale cards with the product on top --------------------------------------------- */
.changes__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-m); }
.changes__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.change { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-m); padding: 40px 32px 40px; border-radius: var(--r-xl); background: var(--card); }
.change__t { margin: 0; font: 400 40px/.95 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.change__b { margin: 0; font-weight: 500; color: var(--ink); max-width: 32rem; }

/* ---- plan cards ----------------------------------------------------------------------------------------- */
.plans { list-style: none; margin: var(--gap-xl) 0 0; padding: 0; display: grid; gap: var(--gap-xl) var(--gap-l); justify-content: center; align-items: stretch; }
.plans--2 { grid-template-columns: repeat(2, minmax(0, 24rem)); }
.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plans--1 { grid-template-columns: minmax(0, 24rem); }
.plan-wrap { position: relative; display: flex; flex-direction: column; height: 100%; }
.plan {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-l); flex: 1;
  padding: 32px 30px; background: var(--ground); border: 2px solid var(--ink); border-radius: var(--r-xl);
}
.plan__top { display: flex; flex-direction: column; gap: 12px; padding-top: var(--gap); }
.plan__name { margin: 0; }
.plan__blurb { margin: 0; font: 500 14px/18.2px var(--body); color: var(--ink-70); }
/* round 3 (critic 4): the tilted sticker on the card's top edge, built as sec-pricing.css builds it (a copy: each page loads only its own module) */
.plan__tagwrap { position: absolute; inset: 0 0 auto; display: flex; justify-content: center; align-items: flex-start; transform: translateY(-50%); pointer-events: 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); } .stk--pale { background: var(--card); }
.plan__price { margin: 0; font-family: var(--display); letter-spacing: -.03em; line-height: .95; }
.plan__num, .plan__per { font-size: 40px; }   /* DETAILS part A section 6: the whole price string is one size, no small suffix */
.plan__annual { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-70); }
.plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.plan__list li { display: flex; align-items: flex-start; gap: var(--gap-s); padding: 6px 0; font-size: 14px; font-weight: 500; line-height: 1.3; }
.plan__tick { flex: none; width: 18px; height: 18px; margin-top: 0; }
.btn--dark { background: var(--ink); color: var(--ground); }
.btn--dark:hover { color: var(--ground); }
.plan__btn { width: 100%; }
.plans__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap-m) var(--gap-l); margin-top: var(--gap-xl); }
.plans__note { margin: 0; font-weight: 600; }

/* ---- text link with the chevron (DETAILS part A section 5) ----------------------------------------------------- */
.tlink { display: inline-flex; align-items: center; gap: var(--gap-s); min-height: 24px; font: 600 16px/1.3 var(--body); color: var(--ink); text-decoration: none; }
.tlink span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tlink__arrow { width: 20px; height: 20px; flex: none; transition: transform .35s var(--ease-rise); }
.tlink:hover .tlink__arrow { transform: translateX(3px); }

/* ---- Chicago: the pale block with the local notes, and the five colour cards -------------------------------------- */
.paleblock { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items: start; padding: 64px var(--gap-xl); border-radius: var(--r-xl); background: var(--card); }
.paleblock .d3 { text-wrap: balance; }

/* ---- Chicago: the researched Illinois facts. The hero photo is cropped in the page, not in the file: the picture is zoomed from
   its right edge so the street sign and the building number on the left of the original are outside the frame. ------------- */
.loc-card__photo img { transform: scale(2); transform-origin: 100% 64%; }
.src-refs { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.src-ref {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; padding: 0 6px; border: 2px solid var(--ink);
  border-radius: var(--r-pill); font: 600 13px/1 var(--body); color: var(--ink); text-decoration: none; background: var(--ground);
}
.src-ref:hover { background: var(--ink); color: var(--ground); }
.lic__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-m); }
.lic__card { display: flex; flex-direction: column; gap: var(--gap-m); padding: 32px 28px; border-radius: var(--r-xl); background: var(--card); }
.lic__card--note { background: var(--lilac); }
.lic__who { margin: 0; font: 400 32px/.98 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.lic__titles { margin: 0; font-weight: 600; }
.lic__act { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); display: grid; gap: 4px; }
.lic__k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70); }
.lic__quote { margin: 0; font-weight: 500; }
.lic__src { margin: auto 0 0; display: flex; align-items: center; gap: var(--gap-s); font-size: 13px; font-weight: 600; color: var(--ink-70); }
.lic__lookup { margin: var(--gap-l) auto 0; max-width: 46rem; text-align: center; font-weight: 500; text-wrap: balance; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-l); }
.facts__i { display: grid; gap: var(--gap-s); padding-bottom: var(--gap-l); border-bottom: 1px solid var(--line-soft); }
.facts__i:last-child { border-bottom: 0; padding-bottom: 0; }
.facts__t { margin: 0; font: 400 28px/1 var(--display); letter-spacing: -.02em; }
.facts__b { margin: 0; font-weight: 500; }
.facts__ol { margin: 4px 0 0; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
.facts__lead { margin: var(--gap) 0 0; }
.paleblock__h { position: sticky; top: 120px; }
.reading { margin-top: var(--gap-m); padding: 40px var(--gap-xl); border-radius: var(--r-xl); border: 2px solid var(--ink); display: grid; gap: var(--gap-m); }
.reading__t { margin: 0; font: 400 36px/1 var(--display); letter-spacing: -.03em; }
.reading__i { margin: 0; font-weight: 600; }
.reading__ul { margin: 0; padding-left: 22px; display: grid; gap: var(--gap-s); font-weight: 500; max-width: 52rem; }
.srcs { max-width: 56rem; margin: 0 auto; padding: 40px var(--gap-xl); border-radius: var(--r-xl); background: var(--card); }
.srcs__lead { margin: 0 0 var(--gap) 0; font-weight: 500; }
.srcs__ga { display: inline-block; min-height: 24px; line-height: 24px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.srcs__ol { margin: 0; padding-left: 28px; display: grid; gap: var(--gap-m); font-weight: 500; }
.srcs__ol li { scroll-margin-top: 140px; padding-left: 4px; }
.srcs__ol a { display: inline-block; min-height: 24px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.srcs__host { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--ink-70); }
.procards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-m); }
.procard {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-xl); min-height: 200px; padding: var(--gap-l) 24px; height: 100%;
  border-radius: var(--r-xl); background: var(--tone); color: var(--ink); text-decoration: none; transition: transform .2s;
}
.procard:hover { transform: scale(.98); }
.procard__t { font: 400 32px/.95 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.procard .tlink__arrow { width: 28px; height: 28px; align-self: flex-end; }

/* ---- responsive ----------------------------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .procards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .pro-hero { padding-top: 150px; }
  .pro-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--gap-xl); }
  .changes__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paleblock { grid-template-columns: minmax(0, 1fr); gap: var(--gap-l); }
  .paleblock__h { position: static; }
  .lic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .plan__num, .plan__per { font-size: 48px; }
  .tilt-card { border-radius: var(--r-lg); }
  .changes__grid, .changes__grid--3, .plans--2, .plans--3 { grid-template-columns: minmax(0, 1fr); }
  .plan, .paleblock, .change, .lic__card, .reading, .srcs { border-radius: var(--r-lg); }
  .paleblock { padding: var(--gap-l); }
  .lic__grid { grid-template-columns: minmax(0, 1fr); }
  .lic__card { padding: var(--gap-l) 24px; }
  .reading { padding: var(--gap-l) 24px; }
  .reading__t { font-size: 32px; }
  .srcs { padding: var(--gap-l) 24px; }
  .facts__t { font-size: 26px; }
  .change { padding: var(--gap-l) 24px; }
  .change__t { font-size: 32px; }
  .procards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { gap: var(--gap-xl); }
}
@media (max-width: 479px) {
  .sticker { font-size: 16px; line-height: 1.3; }
  .stk { font-size: 16px; line-height: 20.8px; }
  .tilt-card__k { font-size: 32px; }
  .procards { grid-template-columns: minmax(0, 1fr); }
  .procard { min-height: 120px; gap: var(--gap-l); }
}
@media (prefers-reduced-motion: reduce) {
  .tilt-card { transform: none !important; }
}