/* Base + components. Mobile-first (FT design system: mobile product adapted to web). */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ft-background);
  color: var(--ft-text-primary);
  font-family: var(--ft-font-sans);
  font-size: var(--ft-body-lg-size);
  line-height: var(--ft-leading-text);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--ft-on-primary-container); }
:focus-visible { outline: 2px solid var(--ft-primary); outline-offset: 2px; border-radius: 4px; }

/* —— page scaffolding —— */
.ft-page { padding-inline: var(--ft-page-default); max-width: 720px; margin-inline: auto; }
.ft-page--focus { padding-inline: var(--ft-page-dense); }
@media (min-width: 768px) { .ft-page { padding-inline: var(--ft-space-10); } }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ft-space-4) var(--ft-page-default);
  border-bottom: var(--ft-border-hairline) solid var(--ft-border);
  position: sticky; top: 0; background: rgb(252 251 250 / 92%); backdrop-filter: blur(8px);
  z-index: 20; max-width: 720px; margin-inline: auto;
}
.brand { display: flex; align-items: center; gap: var(--ft-space-2); text-decoration: none; color: inherit; }
.brand-mark { width: 28px; height: 28px; }
.brand-name { font-family: var(--ft-font-serif); font-size: var(--ft-display-sm-size); font-weight: var(--ft-weight-bold); letter-spacing: 0.02em; }
.nav-links { display: flex; gap: var(--ft-space-2); }
.nav-links a { text-decoration: none; color: var(--ft-text-secondary); font-size: var(--ft-label-sm-size); padding: var(--ft-space-2); min-height: var(--ft-target-min); display: inline-flex; align-items: center; }

.site-footer {
  margin-top: var(--ft-space-12); padding: var(--ft-space-8) var(--ft-page-default) var(--ft-space-10);
  border-top: var(--ft-border-hairline) solid var(--ft-border);
  font-size: var(--ft-body-md-size); color: var(--ft-text-secondary);
}
.site-footer .disclaimer { color: var(--ft-text-muted); margin-top: var(--ft-space-4); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--ft-space-4); }
.footer-links a { color: var(--ft-text-secondary); }

/* —— typography roles —— */
.display-lg, .display-md, .display-sm, h1, h2, h3 { font-family: var(--ft-font-serif); margin: 0; }
.display-lg { font-size: var(--ft-display-lg-size); line-height: var(--ft-leading-display); font-weight: var(--ft-weight-regular); }
.display-md { font-size: var(--ft-display-md-size); line-height: var(--ft-leading-display); font-weight: var(--ft-weight-regular); }
.display-sm { font-size: var(--ft-display-sm-size); line-height: 1.5; font-weight: var(--ft-weight-regular); }
.headline-lg { font-family: var(--ft-font-sans); font-size: var(--ft-headline-lg-size); font-weight: var(--ft-weight-medium); line-height: 1.5; }
.headline-sm { font-family: var(--ft-font-sans); font-size: var(--ft-headline-sm-size); font-weight: var(--ft-weight-bold); }
.body-md { font-size: var(--ft-body-md-size); }
.text-secondary { color: var(--ft-text-secondary); }
.text-muted { color: var(--ft-text-muted); }
.section { margin-block: var(--ft-space-10); }
.section-title { display: flex; align-items: baseline; gap: var(--ft-space-3); margin-bottom: var(--ft-space-4); }
.section-title .no { font-family: var(--ft-font-serif); color: var(--ft-primary); font-size: var(--ft-body-md-size); }
.lede { font-size: var(--ft-display-sm-size); color: var(--ft-text-secondary); line-height: 1.5; }

/* —— buttons (FT S07: 44px visual, 48px target, radius 32 pill) —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ft-space-2);
  min-height: var(--ft-target-min); padding: 0 var(--ft-space-5);
  font-family: var(--ft-font-sans); font-size: var(--ft-label-lg-size); font-weight: var(--ft-weight-medium);
  border-radius: var(--ft-radius-button); border: var(--ft-border-default) solid transparent;
  cursor: pointer; text-decoration: none; transition: background var(--ft-motion-fast), border-color var(--ft-motion-fast);
  background: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary { background: var(--ft-primary); color: var(--ft-on-primary); }
.btn--primary:hover:not(:disabled) { background: #a8815a; }
.btn--secondary { background: transparent; color: var(--ft-on-primary-container); border-color: var(--ft-border); }
.btn--secondary:hover:not(:disabled) { background: var(--ft-secondary-container); }
.btn--ghost { color: var(--ft-text-secondary); padding-inline: var(--ft-space-3); }
.btn--block { width: 100%; }
.btn--sm { min-height: var(--ft-button-height); font-size: var(--ft-label-sm-size); }

/* —— cards & lists —— */
.card {
  background: var(--ft-surface); border: var(--ft-border-hairline) solid var(--ft-border);
  border-radius: var(--ft-radius-card); padding: var(--ft-space-5);
}
.card + .card { margin-top: var(--ft-space-4); }
.card--tint { background: linear-gradient(135deg, var(--ft-secondary-container), var(--ft-surface-container-lowest)); }

.list-group {
  border: var(--ft-border-hairline) solid var(--ft-border);
  border-radius: var(--ft-radius-list-group); overflow: hidden; background: var(--ft-surface);
}
.list-row {
  display: flex; align-items: center; gap: var(--ft-space-3);
  min-height: var(--ft-list-row-height); padding: var(--ft-space-3) var(--ft-space-5);
  border-top: var(--ft-border-hairline) solid var(--ft-border); text-decoration: none; color: inherit;
}
.list-row:first-child { border-top: 0; }
.list-row .row-main { flex: 1; min-width: 0; }
.list-row .row-value { color: var(--ft-text-secondary); font-size: var(--ft-body-md-size); text-align: right; }
.list-row .chev { color: var(--ft-grey-3); flex-shrink: 0; }

/* —— form fields (FT S16) —— */
.field { display: block; margin-bottom: var(--ft-space-4); }
.field > label { display: block; font-size: var(--ft-label-sm-size); font-weight: var(--ft-weight-medium); color: var(--ft-text-secondary); margin-bottom: var(--ft-space-2); }
.input, .select, .textarea {
  width: 100%; min-height: var(--ft-button-height); padding: var(--ft-space-2) var(--ft-space-4);
  font-family: inherit; font-size: var(--ft-body-lg-size); color: var(--ft-text-primary);
  background: var(--ft-surface); border: var(--ft-border-default) solid var(--ft-border);
  border-radius: var(--ft-radius-input); appearance: none;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--ft-primary); outline: none; }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%238f8a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: var(--ft-space-10); }
.textarea { min-height: 112px; resize: vertical; }
.field-hint { font-size: var(--ft-body-md-size); color: var(--ft-text-muted); margin-top: var(--ft-space-1); }
.field-error { color: var(--ft-error); font-size: var(--ft-body-md-size); margin-top: var(--ft-space-1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ft-space-4); }

/* —— pills / chips (FT S07) —— */
.pill {
  display: inline-flex; align-items: center; gap: var(--ft-space-1);
  border-radius: var(--ft-radius-pill); padding: var(--ft-space-1) var(--ft-space-4);
  font-size: var(--ft-label-sm-size); font-weight: var(--ft-weight-medium);
  background: var(--ft-secondary-container); color: var(--ft-on-primary-container);
}
.pill--brand { background: var(--ft-primary); color: var(--ft-on-primary); }
.pill--outline { background: transparent; border: var(--ft-border-default) solid var(--ft-border); color: var(--ft-text-secondary); }

/* —— toast (FT S09) —— */
.toast {
  position: fixed; top: var(--ft-space-4); left: 50%; transform: translateX(-50%);
  background: var(--ft-toast-neutral); color: var(--ft-on-secondary);
  border-radius: var(--ft-radius-pill); padding: var(--ft-space-2) var(--ft-space-5);
  font-size: var(--ft-body-md-size); z-index: 60; max-width: min(92vw, 480px); text-align: center;
  transition: opacity var(--ft-motion-fast);
}
.toast--error { background: var(--ft-error); color: var(--ft-on-error); }
.toast--success { background: var(--ft-positive); color: var(--ft-on-positive); }

/* —— hero —— */
.hero { position: relative; padding: var(--ft-space-10) 0 var(--ft-space-8); overflow: hidden; }
.hero::before {
  /* subtle ink-wash texture, corner-only decoration (FT §1: decoration never crosses body copy) */
  content: ""; position: absolute; inset-inline-end: -120px; inset-block-start: -140px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgb(187 146 102 / 14%) 0%, rgb(187 146 102 / 5%) 45%, transparent 70%);
  pointer-events: none;
}
.hero h1 { max-width: 14ch; }
.hero .lede { max-width: 46ch; margin-top: var(--ft-space-4); }
.hero-cta { display: flex; gap: var(--ft-space-4); margin-top: var(--ft-space-6); flex-wrap: wrap; }

/* —— chart result —— */
.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ft-space-3); }
@media (min-width: 560px) { .summary-grid { grid-template-columns: repeat(3, 1fr); } }
.summary-cell { background: var(--ft-secondary-container); border-radius: var(--ft-radius-input); padding: var(--ft-space-3) var(--ft-space-4); }
.summary-cell .k { font-size: var(--ft-label-sm-size); color: var(--ft-text-secondary); }
.summary-cell .v { font-family: var(--ft-font-serif); font-size: var(--ft-display-sm-size); margin-top: 2px; }

.bodygraph-wrap { display: flex; justify-content: center; padding: var(--ft-space-4) 0; }
.bodygraph-legend { display: flex; flex-wrap: wrap; gap: var(--ft-space-4); justify-content: center; font-size: var(--ft-body-md-size); color: var(--ft-text-secondary); }
.legend-chip { display: inline-flex; align-items: center; gap: var(--ft-space-1); }
.legend-chip .dot { width: 10px; height: 10px; border-radius: 50%; }

.center-grid { display: grid; grid-template-columns: 1fr; gap: var(--ft-space-3); }
@media (min-width: 640px) { .center-grid { grid-template-columns: 1fr 1fr; } }
.center-card { border: var(--ft-border-hairline) solid var(--ft-border); border-radius: var(--ft-radius-input); padding: var(--ft-space-4); }
.center-card h3 { font-family: var(--ft-font-sans); font-size: var(--ft-headline-sm-size); display: flex; align-items: center; gap: var(--ft-space-2); }
.center-card .state { font-size: var(--ft-label-sm-size); font-weight: var(--ft-weight-bold); }
.center-card .state--defined { color: var(--ft-on-primary-container); }
.center-card .state--open { color: var(--ft-text-secondary); }

.gate-table { width: 100%; border-collapse: collapse; font-size: var(--ft-body-md-size); }
.gate-table th { text-align: left; color: var(--ft-text-muted); font-weight: var(--ft-weight-medium); padding: var(--ft-space-2); border-bottom: var(--ft-border-hairline) solid var(--ft-border); }
.gate-table td { padding: var(--ft-space-2); border-bottom: var(--ft-border-hairline) solid var(--ft-border); vertical-align: top; }
.gate-table .side-p { color: var(--chart-personality); font-weight: var(--ft-weight-bold); }
.gate-table .side-d { color: var(--chart-design); font-weight: var(--ft-weight-bold); }

/* —— paywall —— */
.paywall { border: 1px solid var(--ft-primary-container); border-radius: var(--ft-radius-card); padding: var(--ft-space-5); margin-top: var(--ft-space-6); background: linear-gradient(180deg, rgb(224 207 179 / 35%), transparent 60%); }
.paywall h2 { font-family: var(--ft-font-serif); font-weight: var(--ft-weight-regular); font-size: var(--ft-display-sm-size); }
.price-tag { font-family: var(--ft-font-serif); font-size: var(--ft-display-md-size); }
.paywall .btn { margin-top: var(--ft-space-4); }

/* —— prose —— */
.prose p { margin: 0 0 var(--ft-space-4); }
.prose ul { margin: 0 0 var(--ft-space-4); padding-left: var(--ft-space-5); }
.prose li { margin-bottom: var(--ft-space-2); }
.divider { border: 0; border-top: var(--ft-border-hairline) solid var(--ft-border); margin: var(--ft-space-8) 0; }

/* —— type cards grid —— */
.type-grid { display: grid; grid-template-columns: 1fr; gap: var(--ft-space-4); }
@media (min-width: 640px) { .type-grid { grid-template-columns: 1fr 1fr; } }
.type-card { display: block; text-decoration: none; color: inherit; padding: var(--ft-space-5); border: var(--ft-border-hairline) solid var(--ft-border); border-radius: var(--ft-radius-card); background: var(--ft-surface); }
.type-card:hover { border-color: var(--ft-primary); }
.type-card .share { color: var(--ft-text-muted); font-size: var(--ft-body-md-size); }

/* FAQ */
details { border-bottom: var(--ft-border-hairline) solid var(--ft-border); padding: var(--ft-space-4) 0; }
details summary { cursor: pointer; font-weight: var(--ft-weight-medium); min-height: var(--ft-target-min); display: flex; align-items: center; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; margin-left: auto; color: var(--ft-primary); font-size: var(--ft-headline-md-size); }
details[open] summary::after { content: "–"; }
details p { color: var(--ft-text-secondary); margin-bottom: 0; }

/* aria-live region */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}