/* Recuerdi product site: pages beyond the landing (pricing, guides, legal) and shared extras.
   Same language as the landing: paper, ink, fine rules, one accent via --brand-accent.
   Rule: no one-sided borders on rounded elements (design/DESIGN-RULES.md). */

/* Footer: five columns, legal line */
.ftr__cols { grid-template-columns: 2fr repeat(4, 1fr); }
@media (max-width: 1080px) { .ftr__cols { grid-template-columns: repeat(2, 1fr); } .ftr__cols > :first-child { grid-column: 1 / -1; } }
.ftr__btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-2); font-size: inherit; text-align: left; }
.ftr__btn:hover { color: var(--accent-text); }
.seal { text-decoration: none; color: inherit; }
.seal:hover b { color: var(--accent-text) !important; }

/* Consent bar (only rendered when ad pixels are configured) */
.consent { position: fixed; z-index: 80; left: var(--gutter); right: var(--gutter); bottom: var(--space-4); max-width: 640px; margin-inline: auto;
  background: var(--ivory); border: 1px solid var(--rule); border-radius: var(--radius-3); box-shadow: var(--shadow-3);
  padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); font-size: var(--step--1); color: var(--ink-2); }
.consent[hidden] { display: none; }
.consent__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.consent .btn { min-height: 40px; }

/* Template card 6: losamoros, a real wedding */
.t6 { background: var(--brand-accent); color: #FBF8F2; justify-content: center; }
.t6 .in { position: absolute; inset: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  border: 1px solid color-mix(in oklab, var(--champagne) 55%, transparent); border-radius: calc(var(--radius-2) - 2px); }
.t6 .nm { font-family: var(--font-display); font-weight: 300; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; }
.t6 .nm em { color: var(--champagne); }
.t6 small { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.t6 .url { font-family: var(--font-mono); font-size: 10.5px; opacity: .85; }

/* Page hero for inner pages */
.page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem) var(--space-7); }
.page-hero h1 { font-size: var(--step-5); line-height: 1; margin-top: var(--space-5); max-width: 16ch; }
.page-hero h1 em { color: var(--accent-text); }
.page-hero .lede { margin-top: var(--space-5); max-width: 52ch; }
.section--tight { padding-bottom: var(--space-10); }

/* Pricing: cards */
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--accent-text); }
.pcard { position: relative; padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.pcard + .pcard { border-left: 1px solid var(--rule); }
.pcard h2 { font-size: var(--step-3); }
.pcard h2 em { color: var(--accent-text); }
.pcard .for { color: var(--ink-3); font-size: var(--step--1); min-height: 3em; }
.pcard .price { margin: var(--space-3) 0 var(--space-5); }
.pcard .btn { margin-top: auto; }
.pcard--hi { background: var(--accent-soft); }
.pcard .plan__tag { left: var(--space-5); }
@media (max-width: 920px) {
  .pcards { grid-template-columns: 1fr; }
  .pcard + .pcard { border-left: 0; border-top: 1px solid var(--rule); }
}

/* Pricing: comparison table */
.cmp-title { font-size: var(--step-3); margin: var(--space-9) 0 var(--space-5); }
.cmp-wrap { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--step--1); }
.cmp th, .cmp td { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--rule); text-align: center; vertical-align: top; }
.cmp thead th { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.cmp thead th span { display: block; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); margin-top: 4px; }
.cmp tbody th { text-align: left; font-weight: 500; color: var(--ink); width: 40%; }
.cmp tbody th small { display: block; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.cmp td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmp .is-hi { background: var(--accent-soft); }
.cmp__yes { color: var(--accent-text); font-weight: 500; }
.cmp__yes::before { content: "✓ "; }
@media (max-width: 640px) {
  .cmp-wrap { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .cmp, .cmp thead, .cmp tbody { display: block; min-width: 0; }
  .cmp tr { display: grid; grid-template-columns: repeat(3, 1fr); }
  .cmp thead tr { position: sticky; top: 76px; background: var(--paper); z-index: 2; }
  .cmp thead th:first-child { display: none; }
  .cmp tbody th { grid-column: 1 / -1; width: auto; border-bottom: 0; padding: var(--space-4) 0 var(--space-1); }
  .cmp td { padding: var(--space-2) var(--space-1) var(--space-4); }
}

/* Pricing: extras */
.extras { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-7); }
.extras > :first-child { grid-column: 1 / span 6; }
.extras > :first-child h2 { margin-top: var(--space-5); }
.extras > :first-child .lede { margin-top: var(--space-5); }
.extras .packs { grid-column: 8 / span 5; align-self: end; }
.extras > :nth-child(3) { grid-column: 1 / span 6; }
.extras > :nth-child(4) { grid-column: 8 / span 5; }
.extras h3 { margin-bottom: var(--space-3); }
.packs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.packs li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.packs li span { font-family: var(--font-display); font-size: var(--step-1); }
.packs li b { font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 920px) { .extras > * { grid-column: 1 / -1 !important; } }

/* Lists of guides / legal documents */
.posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--accent-text); }
.post { border-bottom: 1px solid var(--rule); }
.post:nth-child(odd) { border-right: 1px solid var(--rule); }
.post a { display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-5); text-decoration: none; height: 100%; transition: background-color var(--dur-2); }
.post a:hover { background: var(--accent-soft); }
.post h2 { font-size: var(--step-2); line-height: var(--leading-snug); }
.post p { color: var(--ink-2); font-size: var(--step--1); max-width: 56ch; }
.post__more { font-size: var(--step--1); color: var(--accent-text); font-weight: 500; }
.post a:hover .arr { transform: translateX(4px); }
.post .arr { display: inline-block; transition: transform var(--dur-2) var(--ease-out); }
@media (max-width: 760px) { .posts { grid-template-columns: 1fr; } .post:nth-child(odd) { border-right: 0; } .post a { padding-inline: 0; } }

/* Article (guides and legal) */
.article__head { padding-block: clamp(2rem, 1rem + 4vw, 5rem) var(--space-7); max-width: calc(var(--max-w)); }
.article__head h1 { font-size: var(--step-4); line-height: 1.04; margin-top: var(--space-4); max-width: 22ch; }
.article__head .lede { margin-top: var(--space-5); max-width: 60ch; }
.article__meta { margin-top: var(--space-5); }
.crumbs a { color: var(--accent-text); text-decoration: none; }
.crumbs a::before { content: "← "; }
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-9); align-items: start; padding-top: var(--space-7); border-top: 1px solid var(--rule); }
.article__side { position: sticky; top: 100px; display: grid; gap: var(--space-6); }
@media (max-width: 1000px) { .article__grid { grid-template-columns: 1fr; gap: var(--space-7); } .article__side { display: none; } }

.prose { max-width: 68ch; color: var(--ink-2); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--step-3); color: var(--ink); margin-top: var(--space-8); line-height: 1.1; scroll-margin-top: 100px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); color: var(--ink); margin-top: var(--space-6); font-weight: 500; font-family: var(--font-ui); letter-spacing: 0; }
.prose p, .prose li { line-height: 1.7; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--accent-text); }
.prose blockquote { margin: var(--space-6) 0; padding: var(--space-5) var(--space-6); background: var(--accent-soft); border-radius: var(--radius-2);
  font-family: var(--font-display); font-size: var(--step-1); font-style: italic; color: var(--ink); }
.prose blockquote p { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose thead th { color: var(--ink); border-bottom: 1px solid var(--ink); font-weight: 500; }
.prose td { font-variant-numeric: tabular-nums; }
.prose-faq { margin-top: var(--space-8); border-top: 1px solid var(--accent-text); }
.prose-faq h2 { margin: var(--space-6) 0 var(--space-2); }
.prose-faq details .ans { padding-right: 0; }
.article--legal .prose h2 { font-size: var(--step-2); }

.toc ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: toc; font-size: var(--step--1); }
.toc li { border-bottom: 1px solid var(--rule); counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 1.8rem 1fr; padding: var(--space-3) 0; text-decoration: none; color: var(--ink-2); }
.toc a::before { content: counter(toc, lower-roman); font-family: var(--font-display); font-style: italic; color: var(--accent-text); }
.toc a:hover { color: var(--accent-text); }
@media (max-width: 1000px) { .toc { display: none; } }

.side-cta { background: var(--accent-soft); border-radius: var(--radius-2); padding: var(--space-5); display: grid; gap: var(--space-3); justify-items: start; }
.side-cta .serif { font-size: var(--step-2); line-height: 1.1; color: var(--ink); font-weight: 300; }
.side-cta .serif em { color: var(--accent-text); }
.side-cta .muted { font-size: var(--step--1); }
.side-cta .link-u { font-size: var(--step--1); }

.more { padding-block: var(--space-9) var(--space-10); }
.more ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--rule); }
.more li { border-bottom: 1px solid var(--rule); }
.more a { display: block; padding: var(--space-4) var(--space-4) var(--space-4) 0; font-family: var(--font-display); font-size: var(--step-1); text-decoration: none; }
.more a:hover { color: var(--accent-text); font-style: italic; }

.guarantee { padding-block: 0 var(--space-8); }
.guarantee .all-in { margin-top: 0; }