/* ── About + Press pages — page-specific blocks ──────────────────────────── */

/* About: values list ── presented as a grid of titled cards inside the prose */
.about-values {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.about-values li {
  background: var(--green-l);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* override .legal-article li default pseudo bullet */
}

.about-values li::before { display: none; content: none; }

.about-value-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.about-value-body {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}

.about-section-separator {
  margin: 44px 0 22px;
  border-top: 1px solid var(--border);
}

/* Press: fast facts dl ── definition list rendered as a two-column key/value grid */
.press-facts {
  margin: 16px 0 24px;
  display: grid;
  grid-template-columns: minmax(140px, 0.35fr) 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}

.press-fact {
  display: contents;
}

.press-fact dt {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.press-fact dd {
  font-size: 14px;
  color: var(--text);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  margin: 0;
  line-height: 1.55;
}

.press-fact:last-child dt,
.press-fact:last-child dd {
  border-bottom: none;
}

/* Press: brand color grid ── swatches with hex + usage hint */
.press-color-grid {
  margin: 16px 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.press-color-swatch {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}

.press-color-block {
  height: 80px;
  width: 100%;
}

.press-color-meta {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.press-color-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.press-color-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
}

.press-color-usage {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Press: asset download list ── styled like buttons but inline-stacked */
.press-assets {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.press-assets li {
  display: block; /* override legal-article flex */
}

.press-assets li::before { display: none; content: none; }

.press-assets a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background 120ms ease;
}

.press-assets a::before {
  content: '↓';
  font-size: 14px;
  line-height: 1;
}

.press-assets a:hover {
  background: var(--green-d);
}

/* Small screens: stack press-facts vertically */
@media (max-width: 540px) {
  .press-facts {
    grid-template-columns: 1fr;
  }
  .press-fact dt {
    padding-bottom: 4px;
    border-bottom: none;
  }
  .press-fact dd {
    padding-top: 4px;
  }
}

/* ── About: trust system (story blocks, feedback, professional perspectives) ─
   Calm, restrained cards on the warm brand tokens. No star-rating aesthetics,
   no oversized quotation marks — clear attribution and generous spacing. */

/* Done / Next / Not today explainer cards */
.abt-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0 22px;
}
.abt-action {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
}
.abt-action-k {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  color: var(--green-d);
  background: var(--green-l);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.abt-action-b {
  margin: 12px 0 0 !important;
  font-size: 14.5px !important;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 680px) {
  .abt-actions { grid-template-columns: 1fr; }
}

/* Early-reach fact strip */
.abt-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 20px 0 22px;
}
.abt-fact {
  flex: 1 1 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  text-align: center;
}
.abt-fact-n {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.abt-fact-l {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* Trust cards (user feedback + professional perspectives) */
.abt-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0 8px;
}
@media (max-width: 680px) {
  .abt-trust-grid { grid-template-columns: 1fr; }
}
.abt-trust-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.abt-trust-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
.abt-trust-attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.abt-attr-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.abt-attr-meta {
  font-size: 12.5px;
  color: var(--muted);
}
.abt-trans-note {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.85;
}
.abt-rel-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--green-d);
  background: var(--green-l);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

/* Honest empty state — modest card, no fake carousel */
.abt-trust-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  margin: 20px 0 8px;
}
.abt-trust-empty p {
  margin: 0 !important;
  color: var(--muted);
  font-size: 15px;
}

/* Share-your-experience invite */
.abt-share {
  margin-top: 16px;
}
/* .legal-article a outranks a bare class — match its specificity so the
   button/card links drop the prose underline treatment. */
.legal-article .abt-share-cta {
  display: inline-block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--green-d);
  border: 1px solid var(--green);
  border-radius: var(--r-sm);
  padding: 10px 18px;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.legal-article .abt-share-cta:hover {
  background: var(--green);
  color: #fff;
}
.abt-share-note {
  margin: 10px 0 0 !important;
  font-size: 12.5px !important;
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.55;
}

/* Done!Next Care block — sub-brand lockup leads a calm card */
.abt-care {
  background: #f8fbfe;
  border: 1px solid #d7e2ed;
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin-top: 40px;
}
.abt-care-h {
  margin: 0 0 14px !important;
}
.abt-care-h .dnc-lock {
  --dnc-size: clamp(21px, 2.6vw, 26px);
}
.abt-care-link {
  font-weight: 600;
  color: #0c496f;
}

/* Instagram / email contact cards */
.abt-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.legal-article .abt-link-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  min-width: 200px;
  text-decoration: none; /* out-specify .legal-article a underline */
  transition: border-color var(--t-fast);
}
.legal-article .abt-link-card:hover {
  border-color: var(--green);
}
.abt-link-k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}
.abt-link-v {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
/* Quiet share link under the contact cards — small, no emphasis */
.abt-contact-share {
  margin: 14px 0 0 !important;
  font-size: 13.5px !important;
  color: var(--muted);
}

/* Design-preview labels (localhost-only; never in production HTML) */
.abt-preview-banner {
  margin: 16px 0 0 !important;
  background: var(--gold-l);
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 12.5px !important;
  color: var(--text);
}
.abt-preview-badge {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #7A5B1E;
  background: var(--gold-l);
  border: 1px solid var(--gold);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

/* About editorial composition --------------------------------------------- */
body[data-page-kind="about"] .legal-hero {
  padding-block: clamp(72px, 10vw, 122px) clamp(58px, 8vw, 92px);
  background:
    radial-gradient(circle at 78% 18%, rgba(58, 125, 93, 0.13), transparent 28%),
    linear-gradient(180deg, #faf8f4, var(--cream));
}

body[data-page-kind="about"] .legal-hero-inner { max-width: 800px; }
body[data-page-kind="about"] .legal-article { max-width: 1040px; }
body[data-page-kind="about"] .legal-section { padding-block: 0 clamp(72px, 9vw, 112px); }

.abt-section {
  padding: clamp(52px, 7vw, 82px) 0;
  border-top: 1px solid var(--border);
}

.abt-section:first-child { border-top: 0; }
.abt-section > h2,
.abt-section h2 {
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.035em;
}

.abt-section-story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.7fr);
  align-items: center;
  gap: clamp(44px, 8vw, 100px);
}

.abt-story-copy p { max-width: 64ch; }
.abt-story-quote {
  margin: 0;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 26px;
  background: var(--green-l);
  color: var(--green-d);
  font-size: clamp(23px, 2.8vw, 34px);
  font-weight: 690;
  letter-spacing: -0.035em;
  line-height: 1.25;
}

.abt-section-actions {
  padding-inline: clamp(24px, 5vw, 56px);
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface-2);
}

.abt-section-actions > h2,
.abt-section-actions > p { max-width: 720px; }
.abt-section-actions .abt-actions { margin-top: 28px; }
.abt-section-actions .abt-action { min-height: 188px; padding: 24px; }

.abt-section-feature {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  padding-left: clamp(28px, 5vw, 72px);
}
.abt-section-feature::before {
  content: "";
  position: absolute;
  inset: clamp(52px, 7vw, 82px) auto clamp(52px, 7vw, 82px) 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--green), #efc69f);
}

.abt-section-facts {
  padding-inline: clamp(24px, 5vw, 56px);
  border: 1px solid rgba(58, 125, 93, 0.18);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--green-l), #f6f2e9);
}
.abt-section-facts .abt-facts { margin-top: 30px; }
.abt-section-facts .abt-fact {
  padding-block: 26px;
  border-color: rgba(58, 125, 93, 0.2);
  background: rgba(255, 255, 255, 0.72);
}
.abt-section-facts .abt-fact-n { font-size: clamp(30px, 4vw, 42px); color: var(--green-d); }
.abt-section-facts > p { max-width: 62ch; }

.abt-section-founder {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: clamp(42px, 8vw, 96px);
  align-items: start;
}
.abt-founder-heading > span {
  display: block;
  margin-bottom: 14px;
  color: var(--green-d);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.abt-founder-copy blockquote {
  margin: 0 0 26px;
  color: var(--text);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.abt-founder-copy p { max-width: 60ch; }

.abt-section-care { border-top: 0; padding-top: 18px; }
.abt-section-care .abt-care {
  margin-top: 0;
  padding: clamp(34px, 6vw, 62px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 10%, rgba(13, 124, 120, 0.11), transparent 26%),
    #eef5fb;
}
.abt-care-h { margin: 0 0 30px; }
.abt-care-title { max-width: 18ch; color: #092b4b !important; }
.abt-section-care .abt-care p { max-width: 68ch; color: #31465e; }
.legal-article .abt-care-link { color: #0c496f; font-weight: 700; }

.abt-section-contact {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: 12px clamp(42px, 8vw, 96px);
  align-items: start;
}
.abt-section-contact h2 { grid-row: 1 / span 3; }
.abt-section-contact > p,
.abt-section-contact .abt-links,
.abt-section-contact .abt-contact-share { grid-column: 2; }

@media (max-width: 800px) {
  .abt-section-story,
  .abt-section-founder,
  .abt-section-contact { grid-template-columns: 1fr; }
  .abt-section-contact h2 { grid-row: auto; }
  .abt-section-contact > p,
  .abt-section-contact .abt-links,
  .abt-section-contact .abt-contact-share { grid-column: 1; }
}

@media (max-width: 560px) {
  .abt-section-actions,
  .abt-section-facts { padding-inline: 22px; border-radius: 22px; }
  .abt-section-feature { padding-left: 24px; }
  .abt-section-care .abt-care { padding: 30px 24px; border-radius: 22px; }
}