/* Public page templates built from design-system.css primitives. */
.public-main,.pricing-content,.legal-main,.editorial-main { width: 100%; margin: 0 auto; }
.page-hero { max-width: var(--site-width); padding: 64px var(--page-gutter) 70px; margin: 0 auto; }
.page-hero > .ds-kicker,.industry-copy > .ds-kicker { margin-bottom: var(--space-6); }
.page-title { max-width: 860px; }
.page-title .highlight,.pricing-title-accent { color: var(--color-subtle); }
.page-lead,.pricing-subtitle { color: var(--color-muted); font-size: 17px; line-height: 1.8; max-width: 660px; margin-top: 25px; }
.industry-hero { display: grid; grid-template-columns: 1fr 1.02fr; align-items: center; gap: 60px; padding-top: 70px; padding-bottom: 80px; }
.industry-copy .page-title { font-size: clamp(36px,4vw,54px); max-width: 520px; }
.industry-copy .page-lead { font-size: 15px; margin: 25px 0 20px; max-width: 425px; }
.industry-visual { background: var(--color-oat); border-radius: var(--radius-lg); padding: 35px 26px 26px; min-width: 0; }
.industry-visual > .ds-kicker { font-size: 9px; color: var(--color-muted); text-align: center; margin-bottom: 30px; }
.industry-visual .input-field { height: 44px; font-size: 14px; padding-left: 12px; }.industry-visual .rotating-examples { height: 44px; }
.industry-visual .example-text { padding: 8px 9px; font-size: 11px; }
.industry-visual .start-btn { height: 44px; width: 44px; }
.industry-visual .input-helper { font-size: 10px; line-height: 1.7; margin-top: 14px; }
.industry-visual .input-bar { box-shadow: 0 8px 24px #77614c0a; }
.sample-entry { padding: 26px; margin-top: var(--space-8); background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-preview); }
.sample-entry-top { display: flex; align-items: center; gap: var(--space-3); }
.sample-avatar { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; background: var(--color-peach); color: var(--color-coral); border-radius: 11px; font-size: 16px; }
.sample-entry h2 { font-size: 14px; font-weight: 500; line-height: 1.4; }
.sample-entry p { font-size: 11px; color: var(--color-muted); margin-top: var(--space-1); }
.sample-entry strong { margin-left: auto; font-size: 21px; letter-spacing: -1px; font-weight: 500; white-space: nowrap; }
.sample-entry-bottom { display: flex; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--color-line); margin-top: 26px; padding-top: 17px; color: var(--color-muted); font-size: 9px; }
.sample-entry-bottom > span:last-child { color: #526547; }
.benefits-section { max-width: var(--site-width); padding: 32px var(--page-gutter) 90px; margin: auto; }
.benefits-heading { display: flex; align-items: start; justify-content: space-between; gap: 45px; border-top: 1px solid var(--color-line); padding-top: 28px; margin-bottom: 36px; }
.benefits-heading h2 { font-size: 34px; letter-spacing: -1.4px; font-weight: 500; line-height: 1.2; width: 50%; }
.benefits-heading h2 em { font-style: normal; color: var(--color-subtle); }
.benefits-heading .ds-kicker { padding-top: var(--space-2); }
.benefits-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.benefit-item { display: grid; grid-template-columns: 27px 1fr; gap: 15px; padding: 34px; background: var(--color-oat); border-radius: var(--radius-lg); }
.benefit-item:nth-child(4n+2) { background: var(--color-sage); }.benefit-item:nth-child(4n+3) { background: var(--color-peach); }
.benefit-num,.compare-num { font-size: 11px; color: var(--color-coral); padding-top: 5px; }
.benefit-title { font-size: 23px; font-weight: 500; line-height: 1.3; letter-spacing: -.7px; margin-bottom: 14px; }
.benefit-desc { font-size: 14px; line-height: 1.8; color: var(--color-muted); max-width: 365px; }
.reading-layout { max-width: var(--site-width); margin: 0 auto; padding: 30px var(--page-gutter) 40px; display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 85px; }
.reading-aside { min-width: 0; }
.reading-toc { position: sticky; top: 28px; border-top: 1px solid var(--color-line); padding-top: 22px; }
.reading-toc summary { display: block; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-coral); list-style: none; min-height: 32px; }
.reading-toc summary::-webkit-details-marker { display: none; }
.reading-toc summary::after { content: ' −'; }.reading-toc:not([open]) summary::after { content: ' +'; }
.reading-toc nav { display: grid; gap: 5px; max-height: calc(100svh - 110px); overflow: auto; padding: 4px 7px 12px 0; }
.reading-toc a { font-size: 11px; line-height: 1.7; color: var(--color-muted); text-decoration: none; padding: 9px 0; display: block; }
.reading-toc a:hover { color: var(--color-coral); }
.reading-body { min-width: 0; }
.lawyer-content,.legal-prose { max-width: var(--reading-width); margin: 0; }
.reading-body h2,.content-heading { font-size: 30px; font-weight: 500; line-height: 1.3; letter-spacing: -1px; margin: 0 0 24px; }
.reading-body h3 { font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: -.5px; margin: 40px 0 17px; }
.reading-body p { font-size: 15px; line-height: 1.9; color: var(--color-muted); margin: 0 0 22px; max-width: var(--reading-width); }
.reading-body strong { color: var(--color-ink); font-weight: 500; }
.reading-body ul,.reading-body ol { font-size: 15px; line-height: 1.9; color: var(--color-muted); padding-left: 24px; margin: 0 0 24px; }
.reading-body li { margin: 8px 0; }
.reading-body a { color: var(--color-coral); text-decoration: underline; text-decoration-color: #bd4b3266; overflow-wrap: anywhere; }
.reading-body a:hover { text-decoration-color: currentColor; }
.reading-body h2,.reading-body h3 { scroll-margin-top: 40px; }
.legal-hero { padding-bottom: 30px; }.legal-updated { color: var(--color-muted); font-size: 12px; margin-top: 23px; }
.legal-prose section { margin-bottom: 44px; }.legal-prose h2 { font-size: 25px; margin-bottom: 20px; }.legal-prose h3 { font-size: 18px; margin-top: 27px; }
.legal-prose .ds-notice { margin-bottom: 28px; }.legal-prose .ds-notice p:last-child { margin-bottom: 0; }
.founder-section { max-width: var(--site-width); margin: auto; padding: 0 var(--page-gutter) 70px; }
.founder-card { display: grid; grid-template-columns: 128px minmax(0,1fr); align-items: center; gap: var(--space-8); padding: 40px; background: var(--color-sage); border-radius: var(--radius-lg); }
.founder-photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; object-position: center 28%; }
.founder-copy { min-width: 0; }
.founder-copy h2 { font-size: 34px; font-weight: 500; line-height: 1.2; letter-spacing: -1.3px; margin: 20px 0 32px; }
.founder-name { font-size: 21px; font-weight: 500; }.founder-role { font-size: 12px; color: var(--color-muted); margin: 6px 0 18px; }
.founder-bio { font-size: 14px; line-height: 1.9; color: var(--color-muted); max-width: 600px; }
.about-page .page-hero { padding-bottom: 55px; }
.compare-section { max-width: var(--site-width); margin: auto; padding: 0 var(--page-gutter) 70px; }
.compare-list { padding: 14px 40px; background: var(--color-sage); border-radius: var(--radius-lg); }
.compare-item { display: grid; grid-template-columns: 35px 1fr; gap: 15px; padding: 30px 0; border-bottom: 1px solid #cfd6c6; }
.compare-item:last-child { border-bottom: none; }
.compare-content { display: grid; grid-template-columns: .75fr 1.25fr; gap: 35px; }
.compare-title { font-size: 21px; line-height: 1.4; font-weight: 500; letter-spacing: -.5px; }
.compare-desc { font-size: 14px; line-height: 1.85; color: var(--color-muted); }
.compare-desc a { color: var(--color-coral); }
/* Pricing: one shared card anatomy; annual billing is the initial selection. */
.pricing-content { max-width: var(--site-width); padding: 0 var(--page-gutter); }
.pricing-hero { text-align: center; padding: 55px 0 30px; }
.pricing-hero .ds-kicker { margin-bottom: var(--space-6); }.pricing-subtitle { margin: 25px auto 0; font-size: 15px; }
.pricing-toggle { display: flex; justify-content: center; margin: 4px 0 55px; }
.toggle-container { display: inline-flex; padding: 5px; gap: 5px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-oat); }
.toggle-btn { border: 0; background: transparent; color: var(--color-muted); font-size: 12px; min-height: 44px; padding: 10px 20px; border-radius: var(--radius-pill); }
.toggle-btn.active { background: var(--color-forest); color: var(--color-surface); }
.savings-badge { font-size: 10px; padding: 3px 6px; margin-left: 5px; color: #e2eaca; background: #5d6f4d; border-radius: 15px; }
.pricing-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.pricing-card { position: relative; min-width: 0; padding: 31px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.pricing-card.popular { background: var(--color-forest); color: var(--color-surface); border-color: var(--color-forest); }
.card-icon { width: 42px; height: 42px; display: grid; place-items: center; background: var(--color-oat); border-radius: 12px; color: #7b856b; margin-bottom: 25px; }
.card-icon.starter { background: var(--color-peach); color: var(--color-coral); }.card-icon.pro { background: #516149; color: var(--color-gold); }
.card-name { font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.6px; margin-bottom: var(--space-3); }
.card-description { color: var(--color-muted); font-size: 12px; min-height: 38px; }
.popular .card-description,.popular .price-note { color: #c0c9b6; }
.card-price { margin: 28px 0 30px; min-height: 86px; }
.price-amount { font-size: 56px; line-height: 1.2; letter-spacing: -3px; font-weight: 500; }
.price-period { font-size: 13px; color: var(--color-muted); }.popular .price-period { color: #c0c9b6; }
.price-note { color: var(--color-muted); font-size: 11px; margin-top: 7px; }
.card-cta { width: 100%; min-height: 48px; font-size: 12px; }
.popular .card-cta { background: var(--color-gold); color: var(--color-forest); }.popular .card-cta:hover { background: #f7da9f; }
.popular-badge { position: absolute; top: 31px; right: 26px; font-size: 9px; letter-spacing: .6px; text-transform: uppercase; padding: 6px 10px; background: #546449; color: #ecedcf; border-radius: var(--radius-pill); }
.card-features { list-style: none; padding: 26px 0 0; margin-top: 26px; border-top: 1px solid var(--color-line); display: grid; gap: 15px; }
.popular .card-features { border-color: #627054; }
.card-features li { display: flex; align-items: start; gap: 9px; font-size: 12px; line-height: 1.7; color: var(--color-muted); }.popular .card-features li { color: #e0e5d7; }
.feature-icon { width: 17px; height: 17px; flex-shrink: 0; display: grid; place-items: center; color: #6c8356; margin-top: 2px; }
.popular .feature-icon { color: var(--color-gold); }.feature-icon.dash > span { width: 6px; height: 1px; background: currentColor; }
.card-features .excluded { color: #7f8478; }.card-features .excluded .feature-icon { color: #aaa99a; }
.believer-banner { margin-top: 30px; padding: 32px 36px; display: grid; grid-template-columns: 1fr 220px; align-items: center; gap: 50px; border-radius: var(--radius-lg); background: var(--color-peach); }
.believer-badge { color: #956749; font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px; }
.believer-title { font-size: 26px; font-weight: 500; letter-spacing: -.7px; margin: 15px 0 12px; }
.believer-description { color: #756b60; font-size: 13px; line-height: 1.8; max-width: 620px; }
.believer-fine { color: #786953; font-size: 11px; line-height: 1.7; margin-top: 14px; }
.believer-side { text-align: center; }.believer-price { font-size: 46px; font-weight: 500; letter-spacing: -2px; line-height: 1.2; }.believer-price-note { color: #786953; font-size: 11px; margin: 5px 0 19px; }
.pricing-content > .ds-faq { padding-inline: 0; padding-bottom: 30px; }
.pricing-footer { text-align: center; font-size: 11px; color: var(--color-muted); margin-bottom: 25px; }.pricing-footer button { color: var(--color-coral); padding: 12px 8px; min-height: 44px; }
/* Editorial reading layout; wider tables stay in their own scroll region. */
.editorial-hero { padding-bottom: 30px; }
.editorial-hero > p { color: var(--color-muted); font-size: 16px; line-height: 1.8; max-width: 820px; margin-top: 25px; }.editorial-hero > .ds-kicker { font-size: 10px; margin-top: 0; color: var(--color-coral); }
.editorial-hero .eyebrow,.editorial-hero .badge { display: block; color: var(--color-coral); font-size: 10px; letter-spacing: 1px; margin-bottom: var(--space-6); }
.editorial-hero .meta { font-size: 11px; color: var(--color-muted); }
.editorial-prose .content-card { padding: 0 0 45px; margin: 0 0 42px; border-bottom: 1px solid var(--color-line); }
.editorial-prose .content-card:last-child { border: 0; margin-bottom: 0; padding-bottom: 0; }
.tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 28px; }
.tool-card { padding: var(--space-6); background: var(--color-oat); border-radius: var(--radius-md); }
.tool-card:first-child { background: var(--color-sage); }
.reading-body .tool-card h3 { font-size: 21px; margin: 0 0 20px; }.reading-body .tool-card p { font-size: 13px; line-height: 1.9; margin-bottom: 18px; }.reading-body .tool-card p:last-child { margin-bottom: 0; }
.table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-md); margin: 25px 0; }
.ds-table { width: 100%; min-width: 570px; border-collapse: collapse; font-size: 12px; line-height: 1.8; }
.ds-table th { text-align: left; background: var(--color-sage); padding: 17px 18px; font-weight: 500; }
.ds-table td { padding: 20px 18px; color: var(--color-muted); border-top: 1px solid var(--color-line); vertical-align: top; }
.ds-table th:first-child { width: 29%; }.ds-table th:nth-child(2) { width: 20%; }
.editorial-main > .ds-closing p { max-width: 610px; margin: 0 auto 23px; font-size: 13px; line-height: 1.8; }
/* Special public pages still use the same shell, palette and controls. */
.believer-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1040px; margin: auto; padding: 75px var(--page-gutter) 70px; align-items: center; }
.believer-intro { padding: 0; margin: 0; }.believer-intro .ds-heading { font-size: 66px; }.believer-intro .heart { font-size: 31px; }
.believer-intro .subtitle { font-size: 18px; line-height: 1.8; color: var(--color-muted); margin-top: 28px; max-width: 320px; }
.believer-spark { color: #dba66b; font-size: 150px; line-height: 1; margin-top: 42px; transform: rotate(10deg); width: fit-content; }
.believer-offer { padding: 38px; border-radius: var(--radius-lg); background: var(--color-forest); color: var(--color-surface); }
.believer-offer .price { font-size: 76px; font-weight: 500; letter-spacing: -4px; line-height: 1.1; }.believer-offer .price-note { font-size: 12px; color: var(--color-sage-text); margin-top: 10px; }
.believer-offer .features { border-top: 1px solid #627054; padding-top: 28px; margin: 29px 0; display: grid; gap: 17px; }
.believer-offer .feature { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #e0e5d7; }.believer-offer .feature-icon { color: var(--color-gold); }
.believer-offer .cta { width: 100%; background: var(--color-gold); color: var(--color-forest); }.believer-offer .cta:hover { background: #f7da9f; }
.believer-offer .footer-note { font-size: 11px; color: var(--color-sage-text); line-height: 1.9; margin-top: 20px; }
.error-page { text-align: center; padding: 65px var(--page-gutter) 80px; max-width: 760px; margin: auto; }
.error-number { font-size: clamp(120px,18vw,220px); font-weight: 500; letter-spacing: -.08em; color: #dca678; line-height: 1.1; margin: 15px 0 20px; }
.message-subtitle { font-size: 15px; color: var(--color-muted); line-height: 1.8; max-width: 440px; margin: 25px auto 30px; }
.secondary-links { display: flex; justify-content: center; gap: 26px; margin-top: var(--space-6); font-size: 12px; }.secondary-link { padding: 12px 0; color: var(--color-muted); }
@media (max-width: 1050px) {
  .industry-hero { gap: var(--space-8); }.industry-visual { padding: 28px 20px 22px; }.sample-entry { padding: 20px; }.sample-entry-top { flex-wrap: wrap; }.sample-entry strong { font-size: 20px; }
  .reading-layout { grid-template-columns: 175px minmax(0,1fr); gap: 50px; }
  .pricing-card { padding: var(--space-6); }.popular-badge { top: 27px; right: 18px; font-size: 8px; }.price-amount { font-size: 49px; }
  .founder-card { padding: var(--space-8); }
  .tool-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .page-hero { padding-top: 40px; padding-bottom: 45px; }.page-lead { font-size: 15px; }
  .industry-hero { grid-template-columns: 1fr; gap: 38px; }
  .industry-copy .page-title { font-size: clamp(36px,7vw,50px); }.industry-copy .page-lead { max-width: 550px; }
  .industry-visual { max-width: 600px; width: 100%; padding: 28px; }
  .industry-visual .input-field { font-size: 16px; }
  .benefits-section { padding-top: 18px; padding-bottom: 55px; }.benefits-heading { display: block; }.benefits-heading h2 { width: auto; font-size: 31px; margin-top: 20px; }
  .benefits-list { gap: 14px; }.benefit-item { padding: var(--space-6); grid-template-columns: 20px 1fr; gap: 10px; }.benefit-title { font-size: 20px; }.benefit-desc { font-size: 13px; }
  .reading-layout { grid-template-columns: 1fr; gap: var(--space-8); padding-top: 18px; }.reading-toc { position: static; padding-top: var(--space-4); }.reading-toc summary { min-height: 44px; }.reading-toc nav { max-height: 40vh; grid-template-columns: 1fr 1fr; gap: 0 24px; }.reading-toc a { min-height: 44px; }
  .reading-body h2 { font-size: 27px; }.reading-body p,.reading-body ul,.reading-body ol { font-size: 14px; }.reading-body h3 { font-size: 21px; }
  .compare-list { padding: 5px 26px; }.compare-content { grid-template-columns: 1fr; gap: var(--space-3); }.compare-section { padding-bottom: 45px; }.compare-title { font-size: 21px; }
  .founder-copy h2 { font-size: 28px; margin-bottom: 25px; }.founder-bio { font-size: 13px; }
  .pricing-hero { padding: 40px 0 26px; }.pricing-toggle { margin-bottom: 40px; }
  .pricing-cards { gap: 14px; }.pricing-card { padding: 23px 20px; }.price-amount { font-size: 42px; }.price-period { font-size: 11px; }.card-description { min-height: 57px; }.card-features li { font-size: 11px; }.card-icon { margin-bottom: 22px; }.popular-badge { position: static; display: table; margin: -7px 0 15px; }.popular .card-icon { display: none; }
  .believer-banner { grid-template-columns: 1fr 170px; gap: 25px; padding: 28px; }.believer-title { font-size: 23px; }
  .believer-layout { gap: 38px; padding-top: 45px; }.believer-intro .ds-heading { font-size: 48px; }.believer-offer { padding: 27px; }.believer-intro .subtitle { font-size: 15px; }.believer-spark { font-size: 100px; }
}
@media (max-width: 580px) {
  .benefits-list { grid-template-columns: 1fr; }.benefit-item { padding: 27px; }
  .founder-card { grid-template-columns: 1fr; gap: var(--space-6); padding: 28px; }.founder-photo { width: 96px; height: 96px; }.founder-section { padding-bottom: 45px; }
  .pricing-cards { grid-template-columns: 1fr; gap: 22px; }.pricing-card { padding: 30px; }.card-description { min-height: 0; }.price-amount { font-size: 56px; }.card-price { margin: 23px 0; }.card-features li { font-size: 13px; }.popular-badge { position: absolute; top: 32px; right: 28px; margin: 0; font-size: 9px; }.popular .card-icon { display: grid; }
  .believer-banner { grid-template-columns: 1fr; gap: 25px; padding: 30px; }.believer-side { text-align: left; }.believer-side .card-cta { max-width: 300px; }
  .believer-layout { grid-template-columns: 1fr; gap: 35px; padding-top: 42px; }.believer-intro { position: relative; padding-right: 35px; }.believer-intro .ds-heading { font-size: 54px; }.believer-spark { position: absolute; right: 0; bottom: 0; font-size: 65px; }.believer-intro .subtitle { max-width: 250px; }.believer-offer { padding: var(--space-8); }
  .reading-toc nav { grid-template-columns: 1fr; }.reading-body .ds-notice { padding: 20px; }
  .sample-entry-top { gap: 10px; }.sample-entry h2 { font-size: 13px; }.sample-entry strong { font-size: 19px; }.sample-avatar { width: 34px; height: 34px; }.industry-visual { padding: 25px 17px 20px; }
  .compare-list { padding-inline: 22px; }.compare-item { grid-template-columns: 22px 1fr; gap: 10px; }.compare-desc { font-size: 13px; }
}
@media (max-width: 350px) {
  .industry-visual > .ds-kicker { font-size: 8px; }.sample-entry { padding: 18px 14px; }.sample-entry-top { display: grid; grid-template-columns: 32px 1fr; }.sample-entry strong { grid-column: 2; margin: 0; }.sample-entry-bottom { font-size: 8px; gap: var(--space-2); }
  .believer-spark { display: none; }.believer-intro { padding-right: 0; }.believer-offer { padding: 26px; }
  .pricing-card { padding: 26px; }.popular-badge { right: 24px; }.benefit-item { padding: 23px; }
}
.editorial-hero .pill { display: inline-block; padding: 7px 12px; margin-bottom: 22px; background: var(--color-sage); color: #526547; border-radius: var(--radius-pill); font-size: 10px; }
.billing-note { display: block; font-size: 12px; color: var(--color-muted); margin: -12px 0 24px; }
.system-section { max-width: var(--site-width); padding: 20px var(--page-gutter) 65px; margin: auto; }
.system-section-title { display: grid; grid-template-columns: .7fr 1.3fr; gap: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-line); margin-bottom: var(--space-8); }
.system-section-title h2 { font-size: 31px; font-weight: 500; line-height: 1.25; letter-spacing: -1px; }
.swatch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.swatch { min-height: 180px; padding: 25px; border-radius: var(--radius-md); display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }
.swatch strong { font-size: 20px; font-weight: 500; }.swatch span { font-size: 10px; }
.swatch[data-color="paper"] { background: var(--color-paper); border: 1px solid var(--color-line); }.swatch[data-color="ink"] { background: var(--color-ink); color: var(--color-paper); }.swatch[data-color="forest"] { background: var(--color-forest); color: var(--color-paper); }.swatch[data-color="sage"] { background: var(--color-sage); }.swatch[data-color="peach"] { background: var(--color-peach); }.swatch[data-color="coral"] { background: var(--color-coral); color: var(--color-paper); }
.type-specimen { padding: 38px; background: var(--color-oat); border-radius: var(--radius-lg); }.type-specimen > .ds-kicker { margin-bottom: 25px; }.type-specimen h3 { font-size: 25px; font-weight: 500; margin: 28px 0 16px; }.specimen-prose { max-width: 65ch; font-size: 15px; line-height: 1.9; color: var(--color-muted); }.specimen-prose a { color: var(--color-coral); }
.button-specimen { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }.system-note { font-size: 12px; line-height: 1.8; color: var(--color-muted); margin-top: var(--space-6); }
.template-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }.template-grid a { padding: 27px; border-radius: var(--radius-md); background: var(--color-sage); text-decoration: none; }.template-grid a:nth-child(even) { background: var(--color-peach); }.template-grid span { font-size: 10px; color: var(--color-coral); }.template-grid strong { display: block; font-size: 21px; font-weight: 500; line-height: 1.3; margin: 18px 0 12px; }.template-grid p { color: var(--color-muted); font-size: 13px; line-height: 1.8; }
@media (max-width: 700px) { .system-section-title { grid-template-columns: 1fr; gap: 18px; }.swatch-grid,.template-grid { grid-template-columns: 1fr 1fr; }.type-specimen { padding: 26px; }.swatch { padding: 20px; min-height: 160px; }.system-section-title h2 { font-size: 28px; } }
@media (max-width: 450px) { .template-grid { grid-template-columns: 1fr; }.swatch-grid { gap: 10px; }.swatch { padding: 17px; }.swatch span { font-size: 9px; }.swatch strong { font-size: 18px; } }