/* About page rebuild — open light surface + lime accent.
   Namespaced under .abt-page so style.css stays untouched. */

.page-shell.abt-page,
.abt-page {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  overflow-x: clip;
  background: #ffffff;
  color: #101418;

  --abt-ink: #101418;
  --abt-ink-2: #1a1f24;
  --abt-ink-3: #2a3038;
  --abt-paper: #ffffff;
  --abt-soft: #f3f5f7;
  --abt-lime: #c6f135;
  --abt-lime-soft: rgba(198, 241, 53, 0.22);
  --abt-green: #3f7a08;
  --abt-muted: #4d545e;
  --abt-faint: #6a727c;
  --abt-line-light: rgba(16, 20, 24, 0.1);
  --abt-radius: 14px;
  --abt-max: min(1200px, 100%);
  --abt-gutter: clamp(1.15rem, 4vw, 3.25rem);
  --abt-block: clamp(3rem, 5.4vw, 4.75rem);
}

.abt-inner {
  width: var(--abt-max);
  margin: 0 auto;
  padding-left: var(--abt-gutter);
  padding-right: var(--abt-gutter);
}

.abt-section {
  padding-top: var(--abt-block);
  padding-bottom: var(--abt-block);
}

.abt-section--light {
  background: var(--abt-paper);
  color: #101418;
}

.abt-section--soft {
  background: var(--abt-soft);
  color: #101418;
}

/* —— Shared heads —— */

.abt-label {
  color: var(--abt-green);
  margin-bottom: 0.85rem;
}

.abt-head {
  max-width: 54rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.6rem);
}

.abt-head h2,
.abt-belief-copy h2,
.abt-company-copy h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.5vw, 2.85rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.abt-accent {
  color: var(--abt-green);
}

.abt-accent--ink {
  color: #101418;
  align-self: flex-start;
  background: linear-gradient(180deg, transparent 62%, var(--abt-lime) 62%);
  padding: 0 0.12em 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.abt-head-lead {
  margin-top: 1.1rem;
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.8;
  color: var(--abt-muted);
  max-width: 44rem;
}

/* —— Hero —— */

.abt-hero {
  position: relative;
  background: var(--abt-paper);
  color: #101418;
  /* Clear fixed .site-header so breadcrumbs never collide with the logo. */
  padding-top: calc(var(--site-header-offset, 5.75rem) + clamp(0.9rem, 2.2vw, 1.5rem));
  padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}

.abt-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(16, 20, 24, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 20, 24, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 82% 8%, rgba(198, 241, 53, 0.22), transparent 42%),
    radial-gradient(circle at 6% 90%, rgba(198, 241, 53, 0.1), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fa 62%, #f1f3f6 100%);
  background-size: 46px 46px, 46px 46px, auto, auto, auto;
}

.abt-hero-inner {
  position: relative;
  width: var(--abt-max);
  margin: 0 auto;
  padding-left: var(--abt-gutter);
  padding-right: var(--abt-gutter);
}

.abt-hero .breadcrumbs {
  margin: 0 0 1.15rem;
  color: var(--abt-faint);
}

.abt-page .nobr {
  white-space: nowrap;
}

.abt-page .cjk-headline {
  word-break: keep-all;
  line-break: strict;
}

.abt-hero .breadcrumbs ol {
  color: var(--abt-faint);
}

.abt-hero .breadcrumbs a {
  color: var(--abt-muted);
}

.abt-hero .breadcrumbs a:hover {
  color: var(--abt-green);
}

.abt-hero .breadcrumbs [aria-current="page"] {
  color: #101418;
}

.abt-hero .breadcrumbs-sep {
  color: rgba(16, 20, 24, 0.28);
}

.abt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: center;
}

.abt-hero-label {
  color: var(--abt-green);
  margin-bottom: 1rem;
}

.abt-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 4.8vw, 3.85rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 0.08em;
  margin-bottom: 1.15rem;
  color: #101418;
}

.abt-hero-line--accent {
  color: #101418;
  align-self: flex-start;
  background: linear-gradient(180deg, transparent 62%, var(--abt-lime) 62%);
  padding: 0 0.08em 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.abt-hero-lead {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.82;
  color: var(--abt-muted);
  max-width: 40rem;
  margin-bottom: 1.35rem;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}

.abt-hero-points {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
}

.abt-hero-points li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #101418;
}

.abt-hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 2px;
  background: var(--abt-lime);
}

.abt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.15rem;
}

.abt-btn-ghost {
  color: #101418;
  border-color: rgba(16, 20, 24, 0.18);
  background: transparent;
}

.abt-btn-ghost:hover {
  color: #101418;
  background: var(--abt-lime);
  border-color: var(--abt-lime);
}

.abt-hero-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--abt-faint);
}

.abt-hero-note i {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--abt-lime);
  box-shadow: 0 0 0 4px rgba(198, 241, 53, 0.28);
}

.abt-hero-stage {
  display: grid;
  gap: 0.9rem;
}

.abt-hero-figure {
  position: relative;
  border-radius: var(--abt-radius);
  overflow: hidden;
  border: 1px solid var(--abt-line-light);
  background: var(--abt-soft);
  box-shadow: 0 18px 48px rgba(16, 20, 24, 0.08);
  aspect-ratio: 16 / 10;
}

.abt-hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abt-hero-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--abt-line-light);
  border-radius: var(--abt-radius);
  background: var(--abt-paper);
  overflow: hidden;
}

.abt-hero-rail > div {
  padding: 0.85rem 0.9rem;
  border-right: 1px solid var(--abt-line-light);
}

.abt-hero-rail > div:last-child {
  border-right: 0;
}

.abt-hero-rail dt {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--track-en-tight);
  color: #101418;
}

.abt-hero-rail dd {
  margin-top: 0.25rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--abt-faint);
}

.abt-hero-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 50%;
  border: 1px solid rgba(16, 20, 24, 0.16);
  color: #101418;
  text-decoration: none;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.abt-hero-anchor:hover {
  background: var(--abt-lime);
  border-color: var(--abt-lime);
  color: #101418;
  transform: translateY(3px);
}

/* —— 01 Problem —— */

.abt-problem-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.abt-problem-list {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--abt-line-light);
}

.abt-problem-item {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--abt-line-light);
}

.abt-problem-index {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--abt-green);
  padding-top: 0.35rem;
}

.abt-problem-item h3 {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.abt-problem-item p {
  font-size: 0.92rem;
  line-height: 1.78;
  color: var(--abt-muted);
}

.abt-problem-figure {
  position: sticky;
  top: clamp(4.5rem, 9vw, 6.5rem);
  border-radius: var(--abt-radius);
  overflow: hidden;
  border: 1px solid var(--abt-line-light);
  background: var(--abt-paper);
  aspect-ratio: 16 / 11;
}

.abt-problem-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* —— 02 Belief —— */

.abt-belief {
  background: var(--abt-paper);
}

.abt-belief-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.abt-belief-copy h2 {
  margin-bottom: 1.1rem;
}

.abt-belief-para {
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.85;
  color: #3d444d;
  max-width: 40rem;
}

.abt-belief-para + .abt-belief-para {
  margin-top: 0.85rem;
}

.abt-belief-figure {
  border-radius: var(--abt-radius);
  overflow: hidden;
  background: var(--abt-soft);
  border: 1px solid var(--abt-line-light);
  aspect-ratio: 16 / 11;
}

.abt-belief-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abt-belief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  background: var(--abt-line-light);
  border: 1px solid var(--abt-line-light);
  border-radius: var(--abt-radius);
  overflow: hidden;
}

.abt-belief-card {
  background: var(--abt-paper);
  padding: 1.35rem 1.25rem 1.5rem;
  transition: background 0.25s var(--ease);
}

.abt-belief-card:hover {
  background: var(--abt-soft);
}

.abt-belief-card > span {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #101418;
  background: var(--abt-lime);
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
  margin-bottom: 0.75rem;
}

.abt-belief-card h3 {
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.abt-belief-card p {
  font-size: 0.89rem;
  line-height: 1.78;
  color: #545b64;
}

/* —— 03 Research strip —— */

.abt-research {
  background: var(--abt-soft);
}

.abt-research-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.abt-research-item {
  background: var(--abt-paper);
  border: 1px solid var(--abt-line-light);
  border-radius: var(--abt-radius);
  padding: 1.15rem 1.2rem 1.25rem;
  border-top: 3px solid var(--abt-lime);
}

.abt-research-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--track-en-tight);
  color: #101418;
  margin-bottom: 0.5rem;
}

.abt-research-item p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #4d545e;
  margin-bottom: 0.7rem;
}

.abt-research-item a {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: #3f7a08;
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 122, 8, 0.3);
}

.abt-research-item a:hover {
  border-bottom-color: #3f7a08;
}

.abt-research-note {
  margin-top: 1.15rem;
  font-size: 0.86rem;
  line-height: 1.75;
  color: #545b64;
}

.abt-research-note a {
  margin-left: 0.4rem;
  color: #101418;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--abt-lime);
}

/* —— 04 Method —— */

.abt-method-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.abt-method-stage {
  position: sticky;
  top: clamp(4.5rem, 9vw, 6.5rem);
  border-radius: var(--abt-radius);
  overflow: hidden;
  border: 1px solid var(--abt-line-light);
  background: var(--abt-soft);
}

.abt-method-stage img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.abt-method-stage figcaption {
  padding: 0.8rem 1rem 0.95rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--abt-muted);
  border-top: 1px solid var(--abt-line-light);
  background: var(--abt-paper);
}

.abt-method-steps {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.abt-method-step {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  grid-template-areas: "num title" ". desc";
  gap: 0.15rem 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--abt-line-light);
  border-left: 3px solid var(--abt-lime);
  border-radius: 10px;
  background: var(--abt-paper);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.abt-method-step:hover {
  border-color: rgba(16, 20, 24, 0.18);
  background: var(--abt-lime-soft);
}

.abt-method-step > span {
  grid-area: num;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--abt-green);
  padding-top: 0.15rem;
}

.abt-method-step strong {
  grid-area: title;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.5;
  font-weight: 700;
}

.abt-method-step small {
  grid-area: desc;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--abt-muted);
}

/* —— 05 Proof —— */

.abt-proof-grid {
  display: grid;
  /* Six metrics: a fixed 3-column grid fills both rows, where auto-fit left
     a five-wide row with one orphan underneath. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--abt-line-light);
  border: 1px solid var(--abt-line-light);
  border-radius: var(--abt-radius);
  overflow: hidden;
  margin-bottom: 1.15rem;
}

.abt-proof-card {
  background: var(--abt-paper);
  padding: 1.1rem 1.15rem 1.25rem;
}

.abt-proof-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--track-en-tight);
  color: #101418;
  margin-bottom: 0.4rem;
}

.abt-proof-card span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.abt-proof-card small {
  display: block;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--abt-faint);
}

.abt-proof-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}

.abt-proof-shot {
  border: 1px solid var(--abt-line-light);
  border-radius: 10px;
  overflow: hidden;
  background: var(--abt-paper);
  aspect-ratio: 4 / 3;
}

.abt-proof-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.abt-proof-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding-top: 1.15rem;
  border-top: 1px solid var(--abt-line-light);
}

.abt-proof-foot p {
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--abt-faint);
  max-width: 48rem;
}

/* —— 06 People + Milo —— */

.abt-people {
  background: var(--abt-paper);
}

.abt-founder {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: clamp(1.15rem, 2.5vw, 2rem);
  align-items: start;
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
  background: var(--abt-paper);
  border: 1px solid var(--abt-line-light);
  border-left: 3px solid var(--abt-lime);
  border-radius: var(--abt-radius);
  margin-bottom: 1rem;
}

.abt-founder-photo {
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  aspect-ratio: 4 / 5;
}

.abt-founder-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.abt-founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.abt-founder-body h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.7rem;
}

.abt-founder-body h3 span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: #3f7a08;
}

.abt-founder-body > p {
  font-size: 0.93rem;
  line-height: 1.85;
  color: #454c55;
  max-width: 48rem;
}

.abt-founder-creds {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.abt-founder-creds li {
  font-size: 0.76rem;
  line-height: 1.5;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--abt-line-light);
  border-radius: 999px;
  background: var(--abt-soft);
  color: #3d444d;
}

.abt-founder-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-top: 0.9rem;
}

.abt-founder-links a {
  font-size: 0.83rem;
  font-weight: 600;
  color: #101418;
  text-decoration: none;
  border-bottom: 2px solid var(--abt-lime);
}

.abt-team-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.abt-team-row a {
  display: grid;
  grid-template-columns: 2.4rem 6.5rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  background: var(--abt-paper);
  border: 1px solid var(--abt-line-light);
  border-radius: var(--abt-radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.abt-team-row a:hover {
  border-color: #101418;
  transform: translateY(-2px);
}

.abt-team-index {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9aa2ac;
}

.abt-team-photo {
  border-radius: 10px;
  overflow: hidden;
  background: var(--abt-soft);
  aspect-ratio: 4 / 5;
}

.abt-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abt-team-role {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: #3f7a08;
  margin-bottom: 0.3rem;
}

.abt-team-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.35rem;
}

.abt-team-body > p {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #545b64;
}

.abt-team-creds {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.abt-team-creds li {
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--abt-line-light);
  border-radius: 999px;
  color: #4d545e;
}

.abt-team-more {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #101418;
  border-bottom: 2px solid var(--abt-lime);
}

.abt-team-foot {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.abt-milo {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(1.15rem, 2.5vw, 2rem);
  align-items: center;
  padding: clamp(1.15rem, 2.5vw, 1.85rem);
  background: var(--abt-paper);
  color: #101418;
  border-radius: var(--abt-radius);
  border: 1px solid var(--abt-line-light);
  border-left: 3px solid var(--abt-lime);
}

.abt-milo-figure {
  border-radius: 12px;
  overflow: hidden;
  background: var(--abt-soft);
  aspect-ratio: 1 / 1;
}

.abt-milo-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abt-milo-copy .abt-label {
  color: var(--abt-green);
}

.abt-milo-copy h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 0.65rem;
}

.abt-milo-copy > p {
  font-size: 0.92rem;
  line-height: 1.82;
  color: var(--abt-muted);
  margin-bottom: 1rem;
}

.abt-milo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.abt-milo-actions .btn-ghost {
  color: #101418;
  border-color: rgba(16, 20, 24, 0.18);
  background: transparent;
}

.abt-milo-actions .btn-ghost:hover {
  color: #101418;
  background: var(--abt-lime);
  border-color: var(--abt-lime);
}

/* —— 07 Company + sister brands —— */

.abt-company-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.abt-company-copy h2 {
  margin-bottom: 1rem;
}

.abt-company-copy p {
  font-size: 0.96rem;
  line-height: 1.85;
  color: var(--abt-muted);
}

.abt-company-copy strong {
  color: #101418;
}

.abt-brand-grid {
  display: grid;
  gap: 0.75rem;
}

.abt-brand-card {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--abt-line-light);
  border-radius: var(--abt-radius);
  background: var(--abt-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.abt-brand-card:hover {
  border-color: #101418;
  transform: translateY(-2px);
}

/* Dark-ink marks need a light cell. Each mark ships with one letter-unit of
   clear space baked in, so object-fit:contain inside a fixed-ratio cell holds
   every logo at the same optical scale without per-brand tuning. */
.abt-brand-cell {
  display: block;
  width: 100%;
  aspect-ratio: 12 / 5;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.abt-brand-cell picture {
  display: block;
  width: 100%;
  height: 100%;
}

.abt-brand-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.abt-brand-body strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

.abt-brand-body span {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--abt-faint);
}

/* —— Next-step links —— */

.abt-links-head {
  margin-bottom: 1.25rem;
}

.abt-links-head h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.35;
  font-weight: 700;
}

.abt-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
}

.abt-links-card {
  display: block;
  padding: 1.05rem 1.15rem 1.2rem;
  border: 1px solid var(--abt-line-light);
  border-radius: var(--abt-radius);
  background: var(--abt-paper);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.abt-links-card:hover {
  border-color: #101418;
  transform: translateY(-2px);
}

.abt-links-card strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 0.3rem;
}

.abt-links-card strong::after {
  content: " →";
  color: #3f7a08;
}

.abt-links-card span {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #545b64;
}

/* —— FAQ —— */

.abt-faq {
  background: var(--abt-soft);
}

.abt-faq-list {
  display: grid;
  gap: 0.6rem;
}

.abt-faq-item {
  background: var(--abt-paper);
  border: 1px solid var(--abt-line-light);
  border-radius: var(--abt-radius);
  overflow: hidden;
}

.abt-faq-item[open] {
  border-color: rgba(16, 20, 24, 0.24);
}

.abt-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  cursor: pointer;
  list-style: none;
}

.abt-faq-item summary::-webkit-details-marker {
  display: none;
}

.abt-faq-item summary h3 {
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  line-height: 1.55;
  font-weight: 700;
}

.abt-faq-item summary i {
  position: relative;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--abt-lime);
}

.abt-faq-item summary i::before,
.abt-faq-item summary i::after {
  content: "";
  position: absolute;
  inset: 50% 0.4rem auto;
  height: 2px;
  background: #101418;
  transform: translateY(-1px);
}

.abt-faq-item summary i::after {
  transform: translateY(-1px) rotate(90deg);
  transition: transform 0.25s var(--ease);
}

.abt-faq-item[open] summary i::after {
  transform: translateY(-1px) rotate(0deg);
}

.abt-faq-item > div {
  padding: 0 1.15rem 1.1rem;
}

.abt-faq-item > div p {
  font-size: 0.91rem;
  line-height: 1.85;
  color: #4d545e;
  max-width: 58rem;
}

/* —— Tablet —— */

/* Anchor targets must clear the sticky header. */
.abt-section,
.abt-hero,
.abt-founder,
.abt-milo {
  scroll-margin-top: calc(var(--site-header-offset, 5.75rem) + 0.75rem);
}

@media (max-width: 1024px) {
  .abt-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .abt-hero-grid,
  .abt-problem-layout,
  .abt-belief-top,
  .abt-method-layout,
  .abt-company-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .abt-problem-figure {
    position: static;
    aspect-ratio: 16 / 9;
  }

  .abt-belief-figure {
    aspect-ratio: 16 / 9;
  }

  .abt-method-stage {
    position: static;
    order: -1;
  }

  .abt-milo {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  }
}

/* —— Mobile —— */

@media (max-width: 720px) {
  .abt-page {
    --abt-block: 2.5rem;
  }

  .abt-hero {
    padding-top: calc(var(--site-header-offset, 5.25rem) + 1rem);
    padding-bottom: 2.35rem;
  }

  .abt-hero .breadcrumbs {
    margin-bottom: 1rem;
  }

  .abt-hero-label {
    margin-bottom: 0.85rem;
  }

  /* Each heading line stays its own block: joining two CJK phrases on one
     inline line overflows the 390px viewport before it can wrap. */
  .abt-head h2,
  .abt-belief-copy h2,
  .abt-company-copy h2 {
    font-size: 1.5rem;
    line-height: 1.34;
  }

  .abt-head h2 > span,
  .abt-belief-copy h2 > span,
  .abt-company-copy h2 > span,
  .abt-hero-line {
    display: block;
    overflow-wrap: anywhere;
  }

  .abt-accent--ink {
    align-self: flex-start;
    padding: 0 0.1em 0.04em;
  }

  .abt-hero h1 {
    font-size: 1.95rem;
    line-height: 1.24;
  }

  .abt-hero-lead {
    font-size: 0.98rem;
    line-height: 1.78;
  }

  .abt-links-head h2,
  .abt-faq h2 {
    font-size: 1.4rem;
    line-height: 1.4;
  }

  .abt-hero-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .abt-hero-rail > div {
    border-right: 0;
    border-bottom: 1px solid var(--abt-line-light);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
  }

  .abt-hero-rail > div:last-child {
    border-bottom: 0;
  }

  .abt-hero-rail dd {
    margin-top: 0;
  }

  .abt-problem-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }

  .abt-problem-index {
    padding-top: 0;
  }

  .abt-method-step {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "num" "title" "desc";
    gap: 0.25rem;
  }

  .abt-proof-foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }

  .abt-proof-shot {
    aspect-ratio: 16 / 10;
  }

  .abt-proof-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .abt-founder {
    grid-template-columns: minmax(0, 1fr);
  }

  .abt-founder-photo {
    max-width: 9rem;
  }

  .abt-team-row a {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
  }

  .abt-team-index {
    display: none;
  }

  .abt-milo {
    grid-template-columns: minmax(0, 1fr);
  }

  .abt-milo-figure {
    max-width: 11rem;
  }

  .abt-brand-card {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abt-method-step,
  .abt-hero-anchor,
  .abt-team-row a,
  .abt-brand-card,
  .abt-links-card {
    transition: none;
  }
}