.pricing-page { --pricing-rule: #454743; color: #f0f0eb; }
.pricing-intro { padding-top: 52px; padding-bottom: 48px; text-align: left; display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 70px; }
.pricing-intro h1 { margin: 0 auto 16px; font-size: clamp(42px, 4vw, 56px); line-height: 1.08; letter-spacing: -.04em; }
.pricing-intro h1 span { color: #c5bdad; }
.pricing-intro > p { margin: 0 auto; color: #c5bdad; font-size: 16px; }
.pricing-status { max-width: none; margin: 0 0 17px; text-align: center; font-size: 13px; color: #c5bdad; }
.pricing-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.pricing-plan { padding: clamp(24px, 2.5vw, 36px); border: 1px solid var(--pricing-rule); border-radius: 14px; display: flex; flex-direction: column; min-width: 0; background: #18191a; }
.pricing-plan h2 { margin: 0 0 15px; font-size: clamp(24px, 2.15vw, 31px); line-height: 1.2; letter-spacing: -.035em; }
.pricing-plan .plan-description { margin: 0 0 22px; color: #c5bdad; font-size: 14px; line-height: 1.7; }
.pricing-plan .plan-rate { margin: 0 0 22px; font-size: clamp(36px, 3vw, 43px); line-height: 1.2; letter-spacing: -.03em; }
.plan-rate span { display: block; margin-top: 7px; font-size: 12px; line-height: 1.5; letter-spacing: 0; color: #c5bdad; }
.pricing-plan-featured .plan-rate span { color: #55564f; }
.pricing-care { max-width: 66ch; margin: 26px auto 0; text-align: center; color: #c5bdad; font-size: 14px; line-height: 1.7; }
.pricing-care strong { color: #f0f0eb; font-weight: 500; }
.plan-scope { padding-top: 22px; margin-bottom: 30px; border-top: 1px solid var(--pricing-rule); }
.plan-scope h3 { margin: 0 0 15px; font-size: 12px; line-height: 1.5; font-weight: 500; letter-spacing: 0; }
.plan-scope ul { list-style: none; margin: 0; padding: 0; }
.plan-scope li { position: relative; padding-left: 17px; margin-top: 11px; font-size: 13px; line-height: 1.65; color: #c5bdad; }
.plan-scope li::before { content: ''; width: 4px; height: 4px; background: currentColor; border-radius: 50%; position: absolute; top: .65em; left: 0; }
.plan-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; margin-top: auto; padding: 12px 16px; border: 1px solid #736f65; border-radius: 30px; text-decoration: none; font-size: 13px; line-height: 1.5; font-weight: 500; transition: background .18s ease-out, color .18s ease-out; }
.plan-action svg { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; stroke-width: 1.5; }
.plan-action:hover { background: #f0f0eb; color: #111213; }
.pricing-plan-featured { background: #f0f0eb; color: #111213; border-color: #f0f0eb; --pricing-rule: #babbb5; }
.pricing-plan-featured .plan-description, .pricing-plan-featured li { color: #55564f; }
.pricing-plan-featured .plan-action { color: #f0f0eb; background: #111213; border-color: #111213; }
.pricing-plan-featured .plan-action:hover { background: #363833; }
.pricing-plan-featured :focus-visible { outline-color: #111213; }
.pricing-help { text-align: center; margin: 8px auto 0; color: #c5bdad; font-size: 14px; }
.pricing-help a { color: #f0f0eb; display: inline-flex; align-items: center; min-height: 44px; margin-left: 5px; }
.pricing-questions { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; padding-top: clamp(70px, 8vw, 115px); padding-bottom: clamp(70px, 8vw, 115px); }
.pricing-questions-heading h2 { font-size: clamp(31px, 3vw, 43px); margin-bottom: 20px; }
.pricing-questions-heading p { color: #c5bdad; font-size: 14px; }
.pricing-faq details { border-top: 1px solid var(--pricing-rule); }
.pricing-faq details:last-child { border-bottom: 1px solid var(--pricing-rule); }
.pricing-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 0; font-size: 15px; line-height: 1.5; list-style: none; cursor: pointer; }
.pricing-faq summary::-webkit-details-marker { display: none; }
.pricing-faq summary:hover { color: #c5bdad; }
.pricing-faq summary svg { width: 20px; height: 20px; flex: 0 0 20px; stroke: currentColor; stroke-width: 1.5; }
.pricing-faq details[open] .pricing-plus { display: none; }
.pricing-faq details p { margin: 0; padding: 0 26px 24px 0; color: #c5bdad; font-size: 14px; line-height: 1.75; }
@media (min-width: 761px) and (max-width: 1050px) {
  .pricing-plan { padding: 23px 20px; }
  .pricing-plan h2 { min-height: 58px; }
  .plan-action { font-size: 12px; padding-inline: 12px; }
  .plan-scope li { min-height: 43px; }
}
@media (max-width: 760px) {
  .pricing-intro { padding-top: 38px; padding-bottom: 30px; }
  .pricing-intro > p { max-width: 29ch; font-size: 14px; }
  .pricing-status { max-width: 30ch; margin-inline: auto; line-height: 1.65; font-size: 12px; }
  .pricing-plans { grid-template-columns: 1fr; gap: 18px; max-width: 480px; margin-inline: auto; }
  .pricing-plan { padding: 28px; }
  .pricing-plan h2 { font-size: 28px; }
  .pricing-plan .plan-description { margin-bottom: 24px; }
  .pricing-plan .plan-rate { font-size: 38px; }
  .plan-scope { margin-bottom: 27px; }
  .plan-scope li { font-size: 14px; }
  .pricing-help { max-width: 28ch; }
  .pricing-questions { grid-template-columns: 1fr; gap: 23px; }
}

/* Connected scope-sheet planes carry the studio's charcoal, ivory and taupe. */
.pricing-intro h1{margin:0;font-size:clamp(46px,5.4vw,76px);font-weight:500;line-height:1.05;max-width:13ch}
.pricing-intro>p{max-width:32ch;margin:0 0 7px auto;font-size:17px;line-height:1.65}
.pricing-status{margin:0;padding:17px 0;border-top:1px solid #454743;text-align:left}
.pricing-plan{padding:34px 32px 30px;border:0;border-radius:0;background:#c5bdad;color:#111213;--pricing-rule:#958f82}
.pricing-plan h2{font-weight:500}
.pricing-plan .plan-description{margin-bottom:27px;color:#414139;min-height:48px}
.pricing-plan .plan-rate{margin-bottom:30px;font-size:clamp(42px,4.5vw,64px);line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plan-rate span{margin-top:12px;color:#414139}
.plan-scope{padding-top:23px;margin-bottom:33px}
.plan-scope h3{font-size:13px}
.plan-scope li{font-size:14px;color:#414139;margin-top:12px}
.plan-action{padding:12px 0;border:0;border-top:1px solid var(--pricing-rule);border-radius:0;font-size:14px;background:transparent;color:inherit}
.plan-action:hover{background:transparent;color:inherit;text-decoration:underline;text-underline-offset:5px}
.plan-action svg{transition:transform .18s ease-out}
.plan-action:hover svg{transform:translateX(4px)}
.pricing-plan-featured{background:#f0f0eb;--pricing-rule:#b9b9af}
.pricing-plan-featured .plan-action,.pricing-plan-featured .plan-action:hover{background:transparent;color:#111213;border-color:#b9b9af}
.pricing-plan:last-child{background:#222321;color:#f0f0eb;--pricing-rule:#55564e}
.pricing-plan:last-child .plan-description,.pricing-plan:last-child .plan-rate span,.pricing-plan:last-child li{color:#c5bdad}
.pricing-plan .plan-rate-custom{font-size:clamp(40px,4vw,57px);line-height:1.24}
.pricing-plan:not(:last-child) :focus-visible{outline-color:#111213}
.pricing-care{max-width:none;margin:0;padding:25px 32px;background:#32342f;display:grid;grid-template-columns:1fr 1fr;gap:30px;text-align:left;color:#d5d0c5}
.pricing-care strong{font-size:16px}
.pricing-care span{max-width:53ch}
.pricing-help{text-align:right;margin:18px 0 0}
.pricing-questions{background:#f0f0eb;color:#111213;--pricing-rule:#babbb1;width:100%;max-width:none;margin-top:70px;padding:65px max(5vw,calc((100vw - 1296px)/2));gap:90px}
.pricing-questions-heading h2{font-size:clamp(35px,3.8vw,53px);line-height:1.1;letter-spacing:-.04em;font-weight:500;margin:0 0 22px}
.pricing-questions-heading p{color:#56574f;font-size:15px}
.pricing-faq summary{padding:20px 0}
.pricing-faq summary:hover{color:#56574f}
.pricing-faq details p{color:#56574f;max-width:70ch}
.pricing-questions :focus-visible{outline:2px solid #111213;outline-offset:5px}
@media(min-width:761px) and (max-width:1050px){.pricing-intro{gap:35px}.pricing-intro>p{font-size:15px}.pricing-plan{padding:28px 22px}.pricing-plan .plan-description{min-height:72px}.plan-scope li{font-size:13px}.pricing-care{padding:24px 22px}.pricing-questions{gap:45px}}
@media(max-width:760px){.pricing-intro{padding-top:34px;padding-bottom:33px;grid-template-columns:1fr;gap:23px}.pricing-intro h1{font-size:48px;max-width:14ch}.pricing-intro>p{margin:0;max-width:32ch;font-size:15px}.pricing-status{max-width:none;padding:16px 0}.pricing-plans{gap:0;max-width:none}.pricing-plan{padding:29px 25px}.pricing-plan .plan-description{min-height:0;margin-bottom:25px}.pricing-plan .plan-rate{font-size:54px;margin-bottom:25px}.pricing-plan .plan-rate-custom{font-size:49px}.plan-scope{margin-bottom:26px;padding-top:20px}.plan-scope li{font-size:14px}.pricing-care{padding:25px;grid-template-columns:1fr;gap:12px}.pricing-care strong{max-width:24ch}.pricing-care span{font-size:13px}.pricing-help{max-width:none;text-align:left;margin:16px 0 0;font-size:13px}.pricing-help a{margin-left:3px}.pricing-questions{grid-template-columns:1fr;gap:28px;margin-top:42px;padding:45px 25px}.pricing-questions-heading h2{font-size:41px;margin-bottom:18px}.pricing-questions-heading p{font-size:14px}.pricing-faq summary{padding:19px 0;font-size:14px}.pricing-faq details p{padding-right:0}}
@media(prefers-reduced-motion:reduce){.plan-action,.plan-action svg{transition:none}}

/* Page plans make the scope tangible; shared deliverables keep the comparison concise. */
.pricing-intro { grid-template-columns: 1.35fr 1fr; gap: 48px; }
.pricing-intro h1 { max-width: none; font-size: clamp(42px, 4.6vw, 66px); }
.pricing-intro > p { max-width: 38ch; }
.plan-scope .plan-page-list { margin: 0; color: #414139; font-size: 15px; line-height: 1.8; }
.plan-scope .plan-example-note { margin: 15px 0 0; color: #414139; font-size: 13px; line-height: 1.65; }
.pricing-examples-note { max-width: none; margin: 0; padding: 18px 32px; border: 1px solid var(--pricing-rule); color: #c5bdad; font-size: 13px; line-height: 1.7; }
.pricing-portfolio-note { max-width: none; margin: 0; padding: 18px 32px; color: #c5bdad; font-size: 14px; line-height: 1.7; }
.pricing-portfolio-note a { color: var(--ink); text-underline-offset: 4px; }
.pricing-delivery { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; padding-top: 76px; }
.pricing-delivery-heading h2 { margin: 0 0 19px; max-width: 20ch; font-size: clamp(30px, 3vw, 43px); font-weight: 500; line-height: 1.16; letter-spacing: -.035em; }
.pricing-delivery-heading p { max-width: 35ch; margin: 0; color: #c5bdad; font-size: 15px; line-height: 1.75; }
.pricing-deliverables { margin: 0; }
.pricing-deliverables > div { padding: 22px 0; border-top: 1px solid var(--pricing-rule); }
.pricing-deliverables > div:last-child { padding-bottom: 0; }
.pricing-deliverables dt { margin: 0 0 8px; font-size: 16px; font-weight: 500; }
.pricing-deliverables dd { max-width: 65ch; margin: 0; color: #c5bdad; font-size: 14px; line-height: 1.75; }
.plan-scope .plan-inclusions{margin-bottom:26px}
.plan-inclusions+h3{padding-top:22px;border-top:1px solid currentColor}
.pricing-deliverables dd ul{margin:12px 0 0;padding-left:20px}
.pricing-deliverables dd li{padding-left:4px;margin-bottom:9px}
.pricing-deliverables .delivery-note{font-size:13px;line-height:1.7;color:var(--muted);margin:18px 0 0}
@media (min-width: 761px) and (max-width: 1050px) {
  .pricing-intro { gap: 30px; }
  .pricing-delivery { gap: 45px; }
  .pricing-examples-note, .pricing-portfolio-note { padding-inline: 22px; }
}
@media (max-width: 760px) {
  .pricing-intro { grid-template-columns: 1fr; gap: 23px; }
  .pricing-intro h1 { font-size: clamp(38px, 8.7vw, 54px); }
  .pricing-intro > p { max-width: 38ch; }
  .pricing-examples-note, .pricing-portfolio-note { padding: 18px 25px; }
  .pricing-delivery { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; }
  .pricing-delivery-heading h2 { font-size: 35px; }
  .pricing-delivery-heading p { max-width: 38ch; font-size: 14px; }
}
