/* 21st.dev reference pass: Kokonut pricing, Tailark feature composition,
   and lndev FAQ disclosure rhythm. Native HTML/CSS, with Aperture's own tokens.
   Reference decisions are recorded in design-previews/agency-refinement-2026-09-13. */
:is(.agency-home,.pricing-page) {
  --component-line:#cdd7e7;
  --component-surface:#fff;
  --component-tint:#edf2fb;
  --component-dark:#142d58;
}
:is(.agency-home,.pricing-page) .ap-button {padding-inline:24px;box-shadow:none;}
.agency-home .hero-copy h1 {margin-top:0;}
.agency-home .art-edge {border-radius:0;}
.agency-home .home-services {gap:24px;padding-block:64px;}
.agency-home .home-services article {min-width:0;display:flex;flex-direction:column;padding:36px;border:1px solid #ffffff45;border-radius:var(--tv-radius-panel);background:#ffffff08;}
.agency-home .home-services article+article {padding-left:36px;margin:0;border:1px solid #ffffff45;}
.agency-home .home-services h2 {font-size:clamp(2.25rem,3.8vw,3.375rem);margin-bottom:24px;}
.agency-home .home-services article p {max-width:44ch;font-size:1.0625rem;}
.agency-home .home-services article .ap-link {margin-top:auto;align-self:flex-start;padding-top:24px;}
.agency-home .home-services .services-review {margin-top:12px;padding-top:30px;border-color:#ffffff45;}
.agency-home .designer-portrait {border-radius:0;overflow:hidden;}

.service-plans {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.service-plan {display:flex;flex-direction:column;min-width:0;border:1px solid var(--component-line);border-radius:var(--tv-radius-panel);background:var(--component-surface);padding:36px;scroll-margin-top:28px;box-shadow:none;}
.plan-topline {font-size:.8125rem;font-weight:600;color:var(--sc-ink-soft);line-height:1.5;margin:0 0 24px;}
.service-plan h3 {font-size:clamp(1.5rem,2.3vw,2rem);font-weight:550;margin:0;line-height:1.2;letter-spacing:-.03em;}
.service-plan .plan-rate {display:flex;align-items:baseline;gap:10px;margin:26px 0 16px;}
.plan-rate strong {font-size:clamp(3.5rem,4.8vw,4.5rem);line-height:1;letter-spacing:-.055em;font-weight:550;font-variant-numeric:lining-nums tabular-nums;}
.plan-rate span {font-size:.9375rem;color:var(--sc-ink-soft);}
.service-plan .plan-description {min-height:58px;font-size:.9375rem;line-height:1.7;color:var(--sc-ink-soft);margin:0 0 24px;max-width:46ch;}
.plan-action {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:50px;padding:13px 18px;border:1px solid var(--component-line);border-radius:var(--tv-radius-control);font-size:.875rem;font-weight:650;background:var(--component-surface);color:var(--sc-ink);transition:background-color 160ms,border-color 160ms;}
.plan-action span {font-size:1.25rem;line-height:1;}
.plan-inclusions {border-top:1px solid var(--component-line);margin-top:28px;padding-top:24px;}
.service-plan .inclusions-label {font-size:.8125rem;font-weight:650;margin:0 0 12px;}
.service-plan ul {list-style:none;padding:0;margin:0;}
.service-plan li {position:relative;font-size:.9375rem;line-height:1.6;padding:8px 0 8px 25px;}
.service-plan li:before {content:'';position:absolute;left:1px;top:16px;width:9px;height:5px;border-left:1.5px solid var(--sc-accent);border-bottom:1.5px solid var(--sc-accent);transform:rotate(-45deg);}
.service-plan .plan-total {margin:auto 0 0;padding-top:28px;font-size:.8125rem;line-height:1.6;color:var(--sc-ink-soft);}
.plan-total strong {font-weight:650;}
.service-plan.visibility-plan {background:var(--component-dark);border-color:var(--component-dark);color:#fff;box-shadow:none;}
.visibility-plan :is(.plan-topline,.plan-rate span,.plan-description,.plan-total) {color:#d8e2f4;}
.visibility-plan .plan-inclusions {border-color:#ffffff30;}
.visibility-plan li:before {border-color:#b1c7ff;}
.visibility-plan .plan-action {background:#f0f4ff;border-color:#f0f4ff;color:#142d58;}

/* Carry the same hierarchy into the full pricing sheet. */
.pricing-page .pricing-hero {grid-template-columns:1.35fr 1fr;align-items:center;gap:8%;padding-top:64px;padding-bottom:52px;}
.pricing-page .pricing-hero h1 {font-size:clamp(2.875rem,5vw,4.75rem);line-height:1.08;}
.pricing-page .pricing-hero p {font-size:1.0625rem;}
.pricing-page .pricing-page-plans {padding-top:16px;}
.pricing-page .design-fee {grid-template-columns:1.5fr 1fr;gap:48px;padding:32px;border-radius:var(--tv-radius-panel);background:var(--component-tint);border-color:var(--component-line);}
.pricing-page .design-amount {border-top:0;border-left:1px solid var(--component-line);padding:0 0 0 40px;}
.pricing-page .design-amount strong {font-size:3.5rem;}
.pricing-page .design-price small {font-size:.8125rem;}
.pricing-page .monthly-heading {margin:48px 0 28px;}
.pricing-page .monthly-heading>p {font-size:.9375rem;}
.pricing-page .service-plan .plan-description {min-height:78px;}
.pricing-page .service-plan ul {border-top:1px solid var(--component-line);padding-top:22px;}
.pricing-page .visibility-plan ul {border-color:#ffffff30;}
.pricing-page .service-plan .plan-total {padding-top:28px;margin-bottom:20px;}
.pricing-page .pricing-footnote {font-size:.875rem;line-height:1.75;margin-top:28px;}
.pricing-faq {display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;border-top:1px solid var(--component-line);padding-top:56px;margin-top:56px;align-items:start;}
.pricing-faq-intro h2 {font-size:clamp(2rem,3.5vw,3rem);margin:0 0 18px;}
.pricing-faq-intro p {font-size:1rem;color:var(--sc-ink-soft);margin:0;}
.pricing-details {display:grid;gap:12px;max-width:none;}
.pricing-details details {border:1px solid var(--component-line);border-radius:var(--tv-radius-panel);background:var(--component-surface);padding:0;overflow:hidden;}
.pricing-details summary {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;list-style:none;line-height:1.5;min-height:64px;font-size:.9375rem;cursor:pointer;}
.pricing-details summary::-webkit-details-marker {display:none;}
.pricing-details summary:after {content:'+';font-size:1.375rem;font-weight:450;flex-shrink:0;}
.pricing-details details[open] summary:after {content:'−';}
.pricing-details details[open] {border-color:#8b9fc0;}
.pricing-details details p {padding:0 22px 22px;margin:0;font-size:.9375rem;line-height:1.75;}
.pricing-details summary:focus-visible {outline-offset:-4px;}
:is(.agency-home,.pricing-page) .structure-close {margin:28px var(--g) 32px;padding:52px;border:1px solid var(--component-line);border-radius:var(--tv-radius-panel);background:var(--component-tint);}
:is(.agency-home,.pricing-page) .structure-close h2 {font-size:clamp(2.5rem,4.3vw,3.75rem);}
.plan-action:focus-visible {outline:3px solid var(--sc-accent);outline-offset:4px;}
.visibility-plan .plan-action:focus-visible {outline-color:#b1c7ff;}
@media(hover:hover) and (pointer:fine) {
  .plan-action:hover {background:var(--component-tint);border-color:#8b9fc0;}
  .visibility-plan .plan-action:hover {background:#d9e4ff;border-color:#d9e4ff;}
  .pricing-details summary:hover {background:var(--component-tint);}
}
@media(max-width:1000px) {
  .service-plan {padding:28px;}
  .pricing-page .design-fee {gap:28px;grid-template-columns:1.3fr 1fr;}
  .pricing-page .design-amount {padding-left:28px;}
  :is(.agency-home,.pricing-page) .structure-close {padding:36px;}
}
@media(max-width:760px) {
  .agency-home .home-services {display:grid;grid-template-columns:1fr;padding:36px 24px;gap:18px;}
  .agency-home .home-services article,.agency-home .home-services article+article {padding:26px;}
  .agency-home .home-services h2 {font-size:2.375rem;}
  .agency-home .home-services article .ap-link {padding-top:10px;}
  .agency-home .home-services .services-review {margin-top:8px;}
  .service-plans {grid-template-columns:1fr;gap:18px;}
  .service-plan {padding:26px;}
  .service-plan h3 {font-size:1.625rem;}
  .service-plan .plan-rate strong {font-size:3.75rem;}
  .service-plan .plan-description,.pricing-page .service-plan .plan-description {min-height:0;}
  .pricing-page .pricing-hero {display:block;padding:36px 24px;}
  .pricing-page .pricing-hero h1 {font-size:clamp(2.75rem,10.5vw,4rem);}
  .pricing-page .design-fee {grid-template-columns:1fr;padding:26px;gap:24px;}
  .pricing-page .design-amount {border-left:0;border-top:1px solid var(--component-line);padding:24px 0 0;}
  .pricing-faq {grid-template-columns:1fr;gap:28px;padding-top:40px;margin-top:40px;}
  .pricing-faq-intro h2 br,.pricing-faq-intro p br {display:none;}
  .pricing-faq-intro h2 {font-size:2.25rem;}
  :is(.agency-home,.pricing-page) .structure-close {margin:24px;padding:28px;}
  :is(.agency-home,.pricing-page) .structure-close h2 {font-size:2.375rem;}
  :is(.agency-home,.pricing-page) .structure-close .ap-button {font-size:.8125rem;padding-inline:18px;}
}
@media screen and (prefers-color-scheme:dark) {
  :is(.agency-home,.pricing-page) {--component-line:#34455d;--component-surface:#142034;--component-tint:#192940;--component-dark:#1b3760;}
  .pricing-page .design-fee,.service-plan {border-color:var(--component-line);}
  .service-plan.visibility-plan {border-color:#57739c;}
  .plan-action:hover {color:var(--sc-ink);}
  .visibility-plan .plan-action:hover {color:#142d58;}
  .pricing-details details {border-color:var(--component-line);}
  .pricing-details details[open] {border-color:#7189af;}
}
@media(prefers-reduced-motion:reduce) {.plan-action {transition:none;}}
@media(forced-colors:active) {.service-plan.visibility-plan,.plan-action {border:1px solid CanvasText;}}

/* Retain the first pricing composition on its dedicated page. */
.pricing-page .design-fee {display:flex;justify-content:space-between;gap:32px;padding:26px 32px;}
.pricing-page .design-fee .design-title {font-size:1.25rem;margin:0 0 6px;}
.pricing-page .design-fee p {margin:0;}
.pricing-page .design-amount {display:flex;flex-direction:row;align-items:center;gap:20px;border:0;padding:0;flex-shrink:0;}
.pricing-page .design-amount strong {font-size:3rem;}
.pricing-page .design-amount span {font-size:.8125rem;line-height:1.6;color:var(--sc-ink-soft);}
.support-heading {display:flex;justify-content:space-between;gap:20px;align-items:baseline;font-size:1rem;margin:28px 0 18px;letter-spacing:0;}
.support-heading span {font-size:.8125rem;font-weight:450;color:var(--sc-ink-soft);}
.pricing-page .service-plan .plan-description {min-height:78px;}
.pricing-page .service-plan ul {border:0;padding:0;}
.pricing-page .service-plan .plan-total {margin-bottom:0;}
.design-scope {display:grid;grid-template-columns:1fr 1.5fr;column-gap:8%;border-top:1px solid var(--component-line);margin-top:40px;padding-top:32px;}
.design-scope h2 {font-size:1.375rem;line-height:1.3;margin:0;}
.design-scope p {font-size:.9375rem;color:var(--sc-ink-soft);margin:0 0 12px;}
.design-scope p+p {grid-column:2;}
@media(max-width:760px) {
 .pricing-page .design-fee {display:block;padding:26px;}
 .pricing-page .design-amount {margin-top:22px;}
 .support-heading {display:block;line-height:1.6;}
 .support-heading span {display:block;}
 .pricing-page .service-plan .plan-description {min-height:0;}
 .design-scope {display:block;}
 .design-scope h2 {margin-bottom:16px;}
}