.thoughts-page { color: var(--ink); background: #fbfaf7; }
.thoughts-page main { overflow: hidden; }
.thoughts-hero { max-width: 1100px; margin: 0 auto; padding: clamp(78px, 10vw, 130px) 28px 72px; }
.thoughts-hero > p:first-child { margin: 0 0 20px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.thoughts-hero > p:first-child::before { content: ""; display: inline-block; width: 20px; height: 2px; margin: 0 10px 3px 0; background: var(--yellow); }
.thoughts-hero h1 { max-width: 850px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(54px, 7.5vw, 92px); font-weight: 400; letter-spacing: -.055em; line-height: .96; }
.thoughts-intro { max-width: 720px; margin: 30px 0 0; color: #536072; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.7; }
.thoughts-list { max-width: 1100px; margin: 0 auto; padding: 0 28px 110px; }
.thought-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 44px; gap: 30px; align-items: start; min-height: 300px; padding: 42px 36px; color: var(--ink); border-top: 1px solid var(--line-dark); text-decoration: none; transition: background 180ms ease, transform 180ms ease; }
.thought-row:last-child { border-bottom: 1px solid var(--line-dark); }
.thought-row:hover, .thought-row:focus-visible { background: #fff; transform: translateX(5px); }
.thought-row--ai { background: var(--yellow-soft); }
.thought-number { color: #abb1ba; font: 500 35px/1 Georgia, serif; }
.thought-text > p { margin: 0 0 15px; color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.thought-text h2 { max-width: 720px; margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 4vw, 48px); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; }
.thought-text > span { display: block; max-width: 690px; color: #596576; font-size: 15px; line-height: 1.7; }
.thought-arrow { justify-self: end; color: var(--yellow); font-size: 24px; }
.thought-row--ai .thought-arrow { color: var(--ink); }
.thoughts-back { max-width: 1044px; margin: 0 auto; padding: 0 28px 115px; }
.thoughts-back p { margin: 0 0 12px; color: #8a929e; font-size: 11px; }
.thoughts-back a { display: inline-block; padding-bottom: 5px; color: var(--ink); border-bottom: 1px solid currentColor; font-size: 14px; text-decoration: none; }
.thoughts-back span { margin-left: 5px; color: var(--yellow); }

.article-nav { max-width: 980px; margin: 0 auto; padding: 28px 0 0; }
.article-nav a { color: #7a8492; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.article-nav a:hover { color: var(--ink); }
.demo-companion { margin: 62px 0 70px; padding: clamp(28px, 5vw, 52px); color: #fff; background: var(--navy); }
.demo-companion > p:first-child { margin: 0 0 13px; color: var(--yellow); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.demo-companion h2 { max-width: 650px; margin: 0 0 16px !important; color: #fff !important; font-size: clamp(34px, 4.5vw, 50px) !important; }
.demo-companion > p:not(:first-child) { max-width: 660px; margin: 0 0 28px; color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.7; }
.demo-companion a { display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px; color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: .08em; background: var(--yellow); text-transform: uppercase; }
.article-next { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; margin-top: 76px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-next small { display: block; margin-bottom: 5px; color: #929aa6; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.article-next strong { color: var(--ink); font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.article-next > span { color: var(--yellow); font-size: 22px; }

@media (max-width: 760px) {
  .thoughts-hero { padding: 64px 20px 52px; }
  .thoughts-hero h1 { font-size: clamp(50px, 15vw, 70px); }
  .thoughts-list { padding: 0 20px 80px; }
  .thought-row { grid-template-columns: 42px 1fr; gap: 18px; min-height: 0; padding: 32px 18px; }
  .thought-number { font-size: 27px; }
  .thought-arrow { display: none; }
  .thought-text h2 { font-size: 34px; }
  .thoughts-back { padding: 0 20px 85px; }
  .article-nav { padding: 22px 0 0; }
  .demo-companion { margin: 50px 0 58px; }
}