/* Pricing-page styles. Shared Cogran tokens and resets come from cogran-modern-core.css. */
#cogran-pricing h1 {font-size: clamp(54px, 7vw, 98px); line-height: .94; letter-spacing: -.068em;}
#cogran-pricing h2 {font-size: clamp(38px, 4.8vw, 68px); line-height: 1.02; letter-spacing: -.055em;}
#cogran-pricing h3 {font-size: clamp(22px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -.035em;}
#cogran-pricing a:focus-visible,
#cogran-pricing button:focus-visible,
#cogran-pricing input:focus-visible,
#cogran-pricing summary:focus-visible,
#cogran-pricing [tabindex="0"]:focus-visible {outline: 3px solid var(--cg-lime); outline-offset: 4px;}
#cogran-pricing button,
#cogran-pricing input {font: inherit;}
#cogran-pricing button {text-transform: none;}
#cogran-pricing .cp-wrap {width: min(1280px, calc(100% - 96px)); margin-inline: auto;}
#cogran-pricing .cp-section {padding-block: clamp(88px, 9vw, 140px);}
#cogran-pricing .cp-kicker {margin: 0 0 20px; color: var(--cg-green); font-size: 11px; font-weight: 760; letter-spacing: .16em; line-height: 1.5;}
#cogran-pricing .cp-lede {max-width: 690px; margin-top: 28px; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.6; letter-spacing: -.014em;}
#cogran-pricing .cp-btn {display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 20px; padding: 15px 25px; border: 1px solid var(--cg-green); border-radius: 999px; color: #fff; background: var(--cg-green); box-shadow: 0 14px 34px rgba(11,48,34,.18); font-size: 14px; font-weight: 680; line-height: 1.4; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;}
#cogran-pricing .cp-btn:hover {color: #fff; background: var(--cg-green-dark); box-shadow: 0 19px 42px rgba(11,48,34,.25); transform: translateY(-2px);}
#cogran-pricing .cp-btn--lime {color: var(--cg-deep); border-color: var(--cg-lime); background: var(--cg-lime); box-shadow: 0 14px 34px rgba(0,0,0,.14);}
#cogran-pricing .cp-btn--lime:hover {color: #fff; border-color: var(--cg-green); background: var(--cg-green);}
#cogran-pricing .cp-btn--light {color: var(--cg-deep); border-color: #fff; background: #fff; box-shadow: none;}
#cogran-pricing .cp-btn--light:hover {color: var(--cg-deep); border-color: var(--cg-lime); background: var(--cg-lime);}
#cogran-pricing .cp-link {display: inline-flex; align-items: center; gap: 12px; color: var(--cg-deep); font-size: 14px; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(25,120,62,.4); text-underline-offset: 7px;}
#cogran-pricing .cp-link:hover {color: var(--cg-green); text-decoration-color: currentColor;}
#cogran-pricing .cp-link--light {color: #fff; text-decoration-color: rgba(255,255,255,.45);}
#cogran-pricing .cp-link--light:hover {color: var(--cg-lime);}
#cogran-pricing .cp-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin-top: 38px;}

body.header-semi-transparent #cogran-pricing .cp-header-backdrop {height: var(--cg-header-height); background: var(--cg-deep);}

/* Hero */
#cogran-pricing .cp-hero {position: relative; overflow: hidden; color: #fff; background: var(--cg-deep);}
#cogran-pricing .cp-hero::before {position: absolute; inset: 0; content: ''; background: radial-gradient(circle at 78% 18%, rgba(207,232,92,.12), transparent 24%), linear-gradient(118deg, transparent 0 52%, rgba(255,255,255,.035) 52% 100%);}
#cogran-pricing .cp-hero-grid {position: relative; z-index: 2; display: grid; min-height: 680px; grid-template-columns: minmax(0,1.12fr) minmax(370px,.68fr); align-items: center; gap: clamp(65px,8vw,130px); padding-block: 100px 115px;}
#cogran-pricing .cp-hero h1 {max-width: 940px; color: #fff;}
#cogran-pricing .cp-hero h1 span {color: var(--cg-lime);}
#cogran-pricing .cp-hero .cp-kicker {color: var(--cg-lime);}
#cogran-pricing .cp-hero .cp-lede {color: rgba(255,255,255,.76);}
#cogran-pricing .cp-hero-card {position: relative; padding: 36px 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.075); box-shadow: 0 30px 80px rgba(0,0,0,.19); backdrop-filter: blur(12px);}
#cogran-pricing .cp-card-label {display: block; margin-bottom: 28px; color: var(--cg-lime); font-size: 10px; font-weight: 760; letter-spacing: .14em;}
#cogran-pricing .cp-hero-card > strong {display: block; margin-bottom: 28px; color: #fff; font-size: clamp(25px,2.3vw,34px); line-height: 1.14; letter-spacing: -.04em;}
#cogran-pricing .cp-hero-rule {display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.16);}
#cogran-pricing .cp-hero-rule b {color: var(--cg-lime); font-size: 10px; letter-spacing: .1em;}
#cogran-pricing .cp-hero-rule span {color: rgba(255,255,255,.82); font-size: 13px; font-weight: 580;}
#cogran-pricing .cp-orbits {position: absolute; right: -180px; bottom: -230px; width: 680px; height: 520px; pointer-events: none; transform: rotate(-10deg);}
#cogran-pricing .cp-orbits i {position: absolute; inset: 0; border: 1px solid rgba(207,232,92,.19); border-radius: 50%;}
#cogran-pricing .cp-orbits i:nth-child(2) {inset: 48px;}
#cogran-pricing .cp-orbits i:nth-child(3) {inset: 96px;}

/* Proof and route choice */
#cogran-pricing .cp-proof {color: #fff; background: var(--cg-green);}
#cogran-pricing .cp-proof-grid {display: grid; grid-template-columns: repeat(4,1fr);}
#cogran-pricing .cp-proof-grid > span {display: flex; min-height: 88px; align-items: center; gap: 14px; padding: 20px 25px; border-left: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.92); font-size: 13px; font-weight: 590;}
#cogran-pricing .cp-proof-grid > span:last-child {border-right: 1px solid rgba(255,255,255,.2);}
#cogran-pricing .cp-proof-grid b {color: var(--cg-lime); font-size: 10px; letter-spacing: .1em;}
#cogran-pricing .cp-path {background: #fff;}
#cogran-pricing .cp-section-head {display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); align-items: end; gap: 75px; margin-bottom: 60px;}
#cogran-pricing .cp-section-head > p {max-width: 500px; margin-bottom: 5px; font-size: 17px;}
#cogran-pricing .cp-route-switch {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--cg-line); border-bottom: 1px solid var(--cg-line);}
#cogran-pricing .cp-route-button {position: relative; display: flex; min-height: 315px; flex-direction: column; align-items: flex-start; padding: 38px 40px; text-align: left; border: 0; border-right: 1px solid var(--cg-line); color: var(--cg-ink); background: #fff; cursor: pointer; transition: color 180ms ease, background 180ms ease, transform 180ms ease;}
#cogran-pricing .cp-route-button:last-child {border-right: 0;}
#cogran-pricing .cp-route-button:hover {background: var(--cg-soft); transform: translateY(-4px);}
#cogran-pricing .cp-route-button.is-active {color: #fff; background: var(--cg-deep);}
#cogran-pricing .cp-route-button > span {margin-bottom: 34px; color: var(--cg-green); font-size: 10px; font-weight: 760; letter-spacing: .14em;}
#cogran-pricing .cp-route-button.is-active > span {color: var(--cg-lime);}
#cogran-pricing .cp-route-button > strong {display: block; margin-bottom: 14px; color: inherit; font-size: clamp(25px,2.5vw,36px); line-height: 1.12; letter-spacing: -.04em;}
#cogran-pricing .cp-route-button > small {max-width: 510px; color: var(--cg-muted); font-size: 14px; line-height: 1.65;}
#cogran-pricing .cp-route-button.is-active > small {color: rgba(255,255,255,.68);}
#cogran-pricing .cp-route-button > em {display: flex; width: 100%; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 28px; color: var(--cg-green); font-size: 13px; font-style: normal; font-weight: 680;}
#cogran-pricing .cp-route-button.is-active > em {color: var(--cg-lime);}

/* Pricing panels */
#cogran-pricing .cp-route-panel[hidden] {display: none;}
#cogran-pricing .cp-route-intro {padding-block: clamp(75px,8vw,115px) 20px; background: var(--cg-soft);}
#cogran-pricing .cp-route-intro-grid {display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,.55fr); align-items: end; gap: clamp(55px,8vw,120px);}
#cogran-pricing .cp-route-intro h2 {max-width: 780px;}
#cogran-pricing .cp-route-intro .cp-lede {color: var(--cg-muted);}
#cogran-pricing .cp-route-stat {padding: 30px; border-left: 3px solid var(--cg-green); background: #fff; box-shadow: 0 22px 60px rgba(11,48,34,.08);}
#cogran-pricing .cp-route-stat span {display: block; color: var(--cg-green); font-size: 10px; font-weight: 760; letter-spacing: .13em;}
#cogran-pricing .cp-route-stat strong {display: block; margin: 12px 0 8px; color: var(--cg-deep); font-size: clamp(46px,5vw,70px); line-height: 1; letter-spacing: -.06em;}
#cogran-pricing .cp-route-stat p {margin: 0; font-size: 13px;}
#cogran-pricing .cp-pricing-grid {display: grid; grid-template-columns: minmax(0,1.32fr) minmax(310px,.68fr); align-items: start; gap: clamp(45px,7vw,95px);}
#cogran-pricing .cp-table-wrap {overflow-x: auto; border-top: 1px solid var(--cg-line); border-bottom: 1px solid var(--cg-line); background: #fff;}
#cogran-pricing table {width: 100%; min-width: 510px; border-collapse: collapse;}
#cogran-pricing caption {position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
#cogran-pricing th,
#cogran-pricing td {padding: 20px 22px; text-align: left;}
#cogran-pricing thead {background: var(--cg-soft);}
#cogran-pricing th {color: var(--cg-green-dark); font-size: 10px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase;}
#cogran-pricing tbody tr + tr {border-top: 1px solid var(--cg-line);}
#cogran-pricing tbody tr:hover {background: #f8fbf8;}
#cogran-pricing th:last-child,
#cogran-pricing td:last-child {text-align: right;}
#cogran-pricing td {color: var(--cg-muted); font-size: 15px;}
#cogran-pricing td:last-child {color: var(--cg-deep); font-size: 18px; font-weight: 730;}
#cogran-pricing .cp-calculator {position: sticky; top: 128px; padding: 32px; color: #fff; border: 0; border-radius: 18px; background: var(--cg-deep); box-shadow: 0 30px 75px rgba(11,48,34,.18);}
#cogran-pricing .cp-calculator .cp-kicker {color: var(--cg-lime);}
#cogran-pricing .cp-calculator h3 {margin-bottom: 14px; color: #fff;}
#cogran-pricing .cp-calculator > p:not(.cp-kicker) {color: rgba(255,255,255,.69); font-size: 14px;}
#cogran-pricing .cp-calculator label {display: block; margin: 26px 0 8px; color: #fff; font-size: 13px; font-weight: 650;}
#cogran-pricing .cp-calculator input {width: 100%; min-height: 54px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; color: var(--cg-deep); background: #fff;}
#cogran-pricing .cp-calculator .cp-btn {width: 100%; margin-top: 12px; border-radius: 8px;}
#cogran-pricing .cp-estimate {min-height: 115px; margin-top: 20px; padding: 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: rgba(255,255,255,.07);}
#cogran-pricing .cp-estimate.is-success {color: var(--cg-deep); border-color: transparent; background: #fff;}
#cogran-pricing .cp-estimate > span {display: block; color: var(--cg-green); font-size: 10px; font-weight: 760; letter-spacing: .11em;}
#cogran-pricing .cp-estimate > strong {display: block; margin: 5px 0; color: inherit; font-size: 23px; line-height: 1.2; letter-spacing: -.035em;}
#cogran-pricing .cp-estimate p {margin: 0; color: inherit; font-size: 12px;}

/* Included, add-ons, notes, FAQ and close */
#cogran-pricing .cp-included {background: var(--cg-soft);}
#cogran-pricing .cp-included-grid {display: grid; grid-template-columns: minmax(0,1fr) minmax(390px,.78fr); align-items: start; gap: clamp(60px,8vw,125px);}
#cogran-pricing .cp-feature-list {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; padding: 0; margin: 0; border-top: 1px solid rgba(11,48,34,.15); list-style: none;}
#cogran-pricing .cp-feature-list li {position: relative; padding: 16px 16px 16px 24px; border-bottom: 1px solid rgba(11,48,34,.15); color: var(--cg-deep); font-size: 13px; font-weight: 590;}
#cogran-pricing .cp-feature-list li::before {position: absolute; left: 3px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--cg-green); content: '';}
#cogran-pricing .cp-addons {background: #fff;}
#cogran-pricing .cp-addon-grid {display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--cg-line); border-bottom: 1px solid var(--cg-line);}
#cogran-pricing .cp-addon-grid article {min-height: 260px; padding: 30px 27px; border-right: 1px solid var(--cg-line);}
#cogran-pricing .cp-addon-grid article:last-child {border-right: 0;}
#cogran-pricing .cp-addon-grid article > span {display: block; margin-bottom: 38px; color: var(--cg-green); font-size: 10px; font-weight: 760; letter-spacing: .11em;}
#cogran-pricing .cp-addon-grid h3 {margin-bottom: 14px; font-size: 21px;}
#cogran-pricing .cp-addon-grid strong {display: block; margin-bottom: 12px; color: var(--cg-green-dark); font-size: 16px;}
#cogran-pricing .cp-addon-grid p {margin: 0; font-size: 13px;}
#cogran-pricing .cp-notes {color: #fff; background: var(--cg-deep);}
#cogran-pricing .cp-notes .cp-kicker {color: var(--cg-lime);}
#cogran-pricing .cp-notes h2 {color: #fff;}
#cogran-pricing .cp-notes .cp-section-head > p {color: rgba(255,255,255,.68);}
#cogran-pricing .cp-note-grid {display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16);}
#cogran-pricing .cp-note-grid article {min-height: 235px; padding: 30px 30px 34px; border-right: 1px solid rgba(255,255,255,.16);}
#cogran-pricing .cp-note-grid article:last-child {border-right: 0;}
#cogran-pricing .cp-note-grid b {display: block; margin-bottom: 34px; color: var(--cg-lime); font-size: 10px; letter-spacing: .11em;}
#cogran-pricing .cp-note-grid h3 {margin-bottom: 13px; color: #fff; font-size: 22px;}
#cogran-pricing .cp-note-grid p {margin: 0; color: rgba(255,255,255,.68); font-size: 13px;}
#cogran-pricing .cp-faq-section {background: var(--cg-soft);}
#cogran-pricing .cp-faq-grid {display: grid; grid-template-columns: minmax(270px,.7fr) minmax(520px,1.3fr); align-items: start; gap: clamp(55px,8vw,115px);}
#cogran-pricing .cp-faq-grid > div:first-child > p:not(.cp-kicker) {margin-top: 28px; font-size: 17px;}
#cogran-pricing .cp-faq {padding: 14px 36px; border: 1px solid var(--cg-line); border-radius: 18px; background: #fff; box-shadow: 0 24px 65px rgba(11,48,34,.08);}
#cogran-pricing .cp-faq details {border-bottom: 1px solid var(--cg-line);}
#cogran-pricing .cp-faq details:last-child {border-bottom: 0;}
#cogran-pricing .cp-faq summary {position: relative; padding: 24px 45px 24px 0; color: var(--cg-deep); font-size: 16px; font-weight: 680; cursor: pointer; list-style: none;}
#cogran-pricing .cp-faq summary::-webkit-details-marker {display: none;}
#cogran-pricing .cp-faq summary::after {position: absolute; right: 2px; top: 20px; color: var(--cg-green); content: '+'; font-size: 25px; font-weight: 400;}
#cogran-pricing .cp-faq details[open] summary::after {content: '−';}
#cogran-pricing .cp-faq details p {padding: 0 45px 24px 0; margin: 0; font-size: 14px;}
#cogran-pricing .cp-final {color: #fff; background: var(--cg-green);}
#cogran-pricing .cp-final-grid {display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 90px; padding-block: clamp(85px,9vw,130px);}
#cogran-pricing .cp-final .cp-kicker {color: var(--cg-lime);}
#cogran-pricing .cp-final h2 {max-width: 760px; color: #fff;}
#cogran-pricing .cp-final-grid > div:last-child p {max-width: 500px; color: rgba(255,255,255,.8); font-size: 18px;}

@media (max-width: 1080px) {
  #cogran-pricing .cp-wrap {width: min(100% - 56px,1280px);}
  #cogran-pricing .cp-hero-grid {grid-template-columns: 1fr .68fr; gap: 50px;}
  #cogran-pricing .cp-proof-grid {grid-template-columns: repeat(2,1fr);}
  #cogran-pricing .cp-proof-grid > span:nth-child(2) {border-right: 1px solid rgba(255,255,255,.2);}
  #cogran-pricing .cp-proof-grid > span:nth-child(-n+2) {border-bottom: 1px solid rgba(255,255,255,.2);}
  #cogran-pricing .cp-pricing-grid {grid-template-columns: 1fr minmax(290px,.62fr); gap: 40px;}
  #cogran-pricing .cp-addon-grid {grid-template-columns: repeat(2,1fr);}
  #cogran-pricing .cp-addon-grid article:nth-child(2) {border-right: 0;}
  #cogran-pricing .cp-addon-grid article:nth-child(-n+2) {border-bottom: 1px solid var(--cg-line);}
}

@media (max-width: 820px) {
  #cogran-pricing .cp-hero-grid,
  #cogran-pricing .cp-section-head,
  #cogran-pricing .cp-route-intro-grid,
  #cogran-pricing .cp-pricing-grid,
  #cogran-pricing .cp-included-grid,
  #cogran-pricing .cp-faq-grid,
  #cogran-pricing .cp-final-grid {grid-template-columns: 1fr;}
  #cogran-pricing .cp-hero-grid {min-height: 0; padding-block: 90px;}
  #cogran-pricing .cp-hero-card {max-width: 560px;}
  #cogran-pricing .cp-section-head {align-items: start; gap: 26px;}
  #cogran-pricing .cp-route-switch {grid-template-columns: 1fr;}
  #cogran-pricing .cp-route-button {min-height: 285px; border-right: 0; border-bottom: 1px solid var(--cg-line);}
  #cogran-pricing .cp-route-button:last-child {border-bottom: 0;}
  #cogran-pricing .cp-route-intro-grid {align-items: start; gap: 34px;}
  #cogran-pricing .cp-route-stat {max-width: 460px;}
  #cogran-pricing .cp-calculator {position: static; max-width: 560px;}
  #cogran-pricing .cp-included-grid {gap: 44px;}
  #cogran-pricing .cp-note-grid {grid-template-columns: 1fr;}
  #cogran-pricing .cp-note-grid article {min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16);}
  #cogran-pricing .cp-note-grid article:last-child {border-bottom: 0;}
  #cogran-pricing .cp-final-grid {gap: 35px;}
}

@media (max-width: 560px) {
  #cogran-pricing .cp-wrap {width: min(100% - 32px,1280px);}
  #cogran-pricing .cp-section {padding-block: 72px;}
  #cogran-pricing h1 {font-size: clamp(46px,14vw,68px);}
  #cogran-pricing h2 {font-size: clamp(34px,10vw,48px);}
  #cogran-pricing .cp-actions {align-items: stretch; flex-direction: column;}
  #cogran-pricing .cp-actions .cp-btn {width: 100%;}
  #cogran-pricing .cp-proof-grid {grid-template-columns: 1fr;}
  #cogran-pricing .cp-proof-grid > span {min-height: 68px; border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2);}
  #cogran-pricing .cp-proof-grid > span:last-child {border-bottom: 0;}
  #cogran-pricing .cp-route-button {min-height: 0; padding: 30px 24px;}
  #cogran-pricing .cp-route-button > em {margin-top: 28px;}
  #cogran-pricing .cp-route-intro {padding-top: 68px;}
  #cogran-pricing .cp-route-stat {padding: 24px;}
  #cogran-pricing .cp-table-wrap {margin-inline: -16px;}
  #cogran-pricing th,
  #cogran-pricing td {padding: 17px 18px;}
  #cogran-pricing .cp-calculator {padding: 26px 22px;}
  #cogran-pricing .cp-feature-list {grid-template-columns: 1fr;}
  #cogran-pricing .cp-addon-grid {grid-template-columns: 1fr;}
  #cogran-pricing .cp-addon-grid article {min-height: 0; border-right: 0; border-bottom: 1px solid var(--cg-line);}
  #cogran-pricing .cp-addon-grid article:last-child {border-bottom: 0;}
  #cogran-pricing .cp-faq {padding: 8px 22px;}
  #cogran-pricing .cp-faq summary {padding-right: 38px;}
  #cogran-pricing .cp-faq details p {padding-right: 20px;}
  #cogran-pricing .cp-final .cp-btn {width: 100%;}
}

@media (prefers-reduced-motion: reduce) {
  #cogran-pricing *,
  #cogran-pricing *::before,
  #cogran-pricing *::after {scroll-behavior: auto !important; transition-duration: .01ms !important;}
}
