/* TMN Creative pricing page in the TMN Flow world. Loads after tmn-home.css, which carries the tokens,
   type, buttons, header, menu, footer, package cards, ledger rows and FAQ. This file adds only what the
   pricing page needs on top. Every price and line of copy is the page's own (docs/pricing-v2/COPY-CHANGES.md). */

/* ===== Hero: the promise beside an index of every price group ===== */
.price-hero .display { max-width: 12.5em; }
.price-trust { margin-top: 1.6rem; }

@media (min-width: 1100px) {
  .price-hero .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5.2fr); }
}

/* The index: a white Flow surface, 3 rows on a static gold spine (website first, care and platforms
   added later, the order the page and the studio sell them), then the 4 page facts */
.price-index {
  position: relative;
  padding: 0.5rem clamp(1.4rem, 2.6vw, 2.1rem) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.pi-rows { position: relative; list-style: none; }
.pi-rows::before {
  content: "";
  position: absolute;
  top: 2.6rem;
  bottom: 2.6rem;
  left: 7px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-b), var(--gold) 55%, var(--gold-a));
  pointer-events: none;
}
.pi-rows li + li { border-top: 1px solid var(--line-2); }
.pi-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 0.75rem;
  align-items: center;
  column-gap: 1.1rem;
  min-height: 5rem;
  padding: 1.15rem 0 1.15rem 2.25rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
}
.pi-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px var(--gold);
}
.pi-name {
  font-size: clamp(1.25rem, 1.75vw, 1.55rem);
  font-weight: 460;
  font-stretch: 108%;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.pi-price { font-size: 1rem; font-weight: 560; color: var(--ink-2); white-space: nowrap; }
.pi-arrow { width: 0.7rem; height: auto; color: var(--ink-3); transition: transform 0.35s var(--ease-out), color 0.2s ease; }
.pi-row:hover .pi-arrow { transform: translateY(3px); color: var(--ink); }
.pi-row:hover .pi-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgb(15 27 47 / 0.3); }

.pi-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0.5rem calc(clamp(1.4rem, 2.6vw, 2.1rem) * -1) 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: var(--paper);
}
.pi-facts > div { padding: 1.05rem 0.9rem 1.15rem clamp(1.1rem, 2vw, 1.6rem); }
.pi-facts > div + div { border-left: 1px solid var(--line-2); }
.pi-facts dt {
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 460;
  font-stretch: 108%;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.pi-facts .unit { margin-left: 0.04em; font-size: 0.62em; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.pi-facts dd { margin: 0.35rem 0 0; font-size: 0.875rem; line-height: 1.35; color: var(--ink-3); }

@media (max-width: 640px) {
  .pi-row { min-height: 4.25rem; column-gap: 0.75rem; padding-block: 0.95rem; }
  .pi-rows::before { top: 2.2rem; bottom: 2.2rem; }
  .pi-name { font-size: 1.1875rem; }
  .pi-price { font-size: 0.9375rem; }
  .pi-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-facts > div:nth-child(3) { border-left: 0; }
  .pi-facts > div:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
}
/* Narrow phones: the price drops under its group name */
@media (max-width: 480px) {
  .pi-row { grid-template-columns: minmax(0, 1fr) 0.75rem; }
  .pi-price { grid-column: 1; grid-row: 2; margin-top: 0.15rem; }
  .pi-arrow { grid-column: 2; grid-row: 1 / span 2; }
}

/* ===== Sections: in-page jumps land with the heading 2.5rem under the header ===== */
.hash-anchor { display: block; height: 0; scroll-margin-top: calc(2.5rem - 12px - var(--section)); }
main > section.price-websites[id],
main > section.price-care[id],
main > section.price-platforms[id] { scroll-margin-top: calc(2.5rem - 12px - var(--section)); }

.price-intro h2 { max-width: 24ch; }
.price-intro p { max-width: 40em; }

/* ===== Websites: the 3 packages (tmn-home.css), the note, the project ledger ===== */
.price-packages--sites { margin-top: clamp(2rem, 4vw, 2.75rem); }
.pc-more { display: grid; justify-items: start; margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px solid var(--line-2); }
.pc-more .text-link { font-size: 0.9375rem; font-weight: 560; }
.price-package--ink .pc-unit { color: var(--stage-muted); }

.cards-note {
  margin-top: 1.4rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.cards-note .text-link { font-weight: 560; }

.project-ledger { margin-top: clamp(3rem, 6vw, 4.5rem); }
.project-ledger-head h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 460;
  font-stretch: 108%;
  line-height: 1.12;
  letter-spacing: -0.028em;
  max-width: 24em;
}
.project-ledger-head p { margin-top: 0.6rem; max-width: 42em; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.project-ledger-list { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 1.25rem; list-style: none; }
.project-ledger-list li { border-top: 1px solid var(--line); }
.project-ledger-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 64px;
  padding: 0.8rem 0;
  color: var(--ink);
  text-decoration: none;
}
.project-ledger-list a > span { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }
/* The live homepage of each named client, small and whole (the captures are 16:10), so the proof is seen as well as named */
.pl-thumb { flex: none; width: 120px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 8px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgb(15 27 47 / 0.25); }
.project-ledger-list a:has(.pl-thumb) { justify-content: flex-start; min-height: 96px; padding: 0.9rem 0; }
@media (max-width: 420px) {
  .pl-thumb { width: 96px; }
}
.project-ledger-list strong { font-size: 1.0625rem; font-weight: 580; letter-spacing: -0.01em; }
.project-ledger-list a > span > span { font-size: 0.9375rem; line-height: 1.4; color: var(--ink-3); }
.project-ledger-list svg { flex: none; width: 14px; height: auto; color: var(--ink-3); transition: transform 0.35s var(--ease-out), color 0.2s ease; }
.project-ledger-list a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgb(15 27 47 / 0.35); }
.project-ledger-list a:hover svg { transform: translateX(3px); color: var(--ink); }
@media (min-width: 900px) {
  .project-ledger-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ===== Scope: what moves a project into a larger scope, beside its 4 reasons ===== */
.buyer-context { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 2.5rem); }
.buyer-context-intro h3 {
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  font-weight: 440;
  font-stretch: 108%;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 14em;
  text-wrap: balance;
}
.buyer-context-intro p { margin-top: 1rem; max-width: 34em; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.buyer-context-intro .buyer-context-close { margin-top: 1.1rem; font-size: 0.9375rem; }
.buyer-context-close .text-link { font-weight: 560; }
.buyer-context-list > div { padding: 1.05rem 0 1.15rem; }
.buyer-context-list > div + div { border-top: 1px solid var(--line); }
.buyer-context-list dt { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.buyer-context-list dd { margin: 0.3rem 0 0; max-width: 46em; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 900px) {
  .buyer-context { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
  .buyer-context-list { margin-top: -1.05rem; }
}

/* ===== Comparison: a white Flow surface, the featured column on a faint gold ground ===== */
.cmp { margin-top: clamp(4rem, 8vw, 6rem); }
.cmp-intro h2 { max-width: none; }
.cmp-intro p { margin-top: 0.9rem; }
.price-platforms .cmp { margin-top: clamp(3.5rem, 7vw, 5rem); }

.cmp-card {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.35rem clamp(1rem, 2.6vw, 2.1rem) 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow-x: auto;
}
.t { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; }
.t th,
.t td { padding: 0.72rem 0.9rem; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line-2); }
.t th:first-child,
.t td:first-child { padding-left: 0; text-align: left; color: var(--ink); }
.t thead th { padding-block: 1.15rem 0.95rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink); border-bottom-color: var(--line); white-space: nowrap; }
.t .hi { background: rgb(201 164 76 / 0.08); }
.t thead th.hi { border-radius: 14px 14px 0 0; }
.t tr.t-group td {
  padding: 1.35rem 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  color: var(--ink-3);
  background: none;
  border-bottom-color: var(--line);
}
.t .y { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--ink); vertical-align: middle; }
.t .y svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.t .n { font-size: 0.875rem; color: var(--ink-3); }
.t .val { font-weight: 560; color: var(--ink); }
.t tr.price-r td { font-weight: 560; }
.t tr.price-r .val { font-size: 1rem; font-weight: 600; }
.t tr.cta-r td { padding-block: 1.1rem 1.25rem; border-bottom: 0; }
.t tr.cta-r td.hi { border-radius: 0 0 14px 14px; }
.tcta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid #c8d2de;
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 0.7);
  font-size: 0.9375rem;
  font-weight: 580;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tcta:hover { background: #fff; border-color: var(--ink); }
.tcta-g { border-color: var(--ink); background: var(--ink); color: #fff; }
.tcta-g:hover { background: #1a2b47; border-color: #1a2b47; }
.cmp-note { margin-top: 1rem; max-width: 62em; font-size: 0.875rem; line-height: 1.55; color: var(--ink-3); }

/* Phones: the website comparison reads as 3 plan summaries, the platform table scrolls inside its card */
.mobile-compare { display: none; }
@media (max-width: 760px) {
  .website-cmp .cmp-card { display: none; }
  .mobile-compare { display: grid; gap: 0.85rem; margin-top: 1.5rem; }
  .mplan {
    padding: 1.25rem 1.3rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }
  .mplan-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; }
  .mplan-top h3 { font-size: 1.25rem; font-weight: 520; font-stretch: 106%; letter-spacing: -0.02em; }
  .mplan-price { font-size: 1rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .mplan-copy { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
  .mplan-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line-2); }
  .mplan-dl dt { font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); }
  .mplan-dl dd { margin: 0.1rem 0 0; font-size: 0.9375rem; font-weight: 580; color: var(--ink); }
  .mplan--ink { border-color: var(--ink); background: linear-gradient(160deg, #182843 0%, #0f1b2f 62%); color: var(--stage-ink); box-shadow: var(--shadow-2); }
  .mplan--ink .mplan-price,
  .mplan--ink .mplan-dl dd { color: #f4f7fb; }
  .mplan--ink .mplan-copy,
  .mplan--ink .mplan-dl dt { color: var(--stage-muted); }
  .mplan--ink .mplan-dl { border-top-color: rgb(255 255 255 / 0.12); }
  .mcompare-close { padding: 0.5rem 0.1rem 0; }
  .mcompare-close p { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
  .mcompare-cta { width: 100%; min-height: 52px; margin-top: 1rem; }
  .cmp-card { padding-inline: 0.85rem; border-radius: var(--r-lg); }
  .t { font-size: 0.875rem; }
  .t th,
  .t td { padding: 0.65rem 0.5rem; }
  .t thead th { white-space: normal; }
  .tcta { padding-inline: 0.7rem; font-size: 0.875rem; white-space: normal; text-align: center; }
}

/* ===== Publishing + Care: 6 plans as 1 ledger, name and price, what it covers, the actions ===== */
.care-ledger { margin-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--line); }
.care-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1.6rem 0 1.7rem;
  border-bottom: 1px solid var(--line);
}
.care-name { font-size: 1.1875rem; font-weight: 580; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.care-id .pc-price { margin-top: 0.3rem; }
.care-id .pc-num { font-size: clamp(1.6rem, 2.2vw, 1.85rem); }
.care-body h3 { font-size: 1.125rem; font-weight: 560; line-height: 1.3; letter-spacing: -0.012em; }
.care-body .pc-desc { margin-top: 0.35rem; max-width: 46em; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.care-body .pc-list { margin-top: 0.8rem; gap: 0.4rem; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
.care-body .pc-list li::before { width: 1.1rem; height: 1.1rem; margin-top: 0.12rem; }
.care-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.care-links .text-link { font-weight: 560; }
@media (min-width: 1000px) {
  .care-row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 6.4fr) minmax(0, 2.8fr);
    column-gap: clamp(2rem, 3.6vw, 3.25rem);
    align-items: start;
  }
  .care-body .pc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
  .care-links { flex-direction: column; align-items: flex-start; }
  .care-links .button { white-space: nowrap; }
}

.adhoc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: 1.35rem clamp(1.25rem, 2.6vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.adhoc h4 { font-size: 1.125rem; font-weight: 580; letter-spacing: -0.012em; color: var(--ink); }
.adhoc p { margin-top: 0.2rem; font-size: 0.9375rem; color: var(--ink-2); }

/* ===== Custom Platforms: the 2 option cards (tmn-home.css), the bundle, the comparison ===== */
.price-packages--pair { margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 1200px) {
  .price-packages.price-packages--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}

/* The combined project on Flow's gold-tinted panel, the material of the TMN Flow path */
.bundle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 3rem;
  margin-top: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgb(201 164 76 / 0.38);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgb(201 164 76 / 0.12), rgb(201 164 76 / 0.03));
}
.bundle h3 { font-size: 1.5rem; font-weight: 460; font-stretch: 108%; line-height: 1.1; letter-spacing: -0.03em; }
.bundle .pc-price { margin-top: 0.6rem; }
.bundle .pc-num { font-size: clamp(1.75rem, 2.4vw, 2.125rem); }
.bundle-terms > p:not(.pc-price) { margin-top: 0.55rem; max-width: 30em; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.bundle .button { margin-top: 1.15rem; }
.bundle-feats { gap: 0.45rem; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
.bundle-feats li::before { width: 1.1rem; height: 1.1rem; margin-top: 0.12rem; }
@media (min-width: 900px) {
  .bundle { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; }
}

/* ===== FAQ: the home page's native disclosures. Each question keeps its h3. ===== */
.faq-item summary .faq-qt { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-wrap: pretty; }

/* ===== Close: the ask, on paper with Flow's gold radial ===== */
.price-close { background: radial-gradient(50% 70% at 85% 30%, rgb(201 164 76 / 0.09), transparent 70%), var(--paper); }
.price-close-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.price-close h2 { max-width: 15ch; }
.price-close-body p { max-width: 30em; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.price-close-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 900px) {
  .price-close-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 6vw, 5.5rem); align-items: end; }
}
@media (max-width: 430px) {
  .price-close-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .price-close-actions .button { width: 100%; min-height: 52px; }
}

/* ===== Desktop density, the same step as the home page ===== */
@media (min-width: 900px) {
  .price-intro p { margin-top: 1.1rem; font-size: 1.0625rem; }
  .price-faq .faq-head p { font-size: 1.0625rem; }
}