:root {
  --gemini-blue: #1769ff;
  --gemini-cyan: #65b9ff;
}

body {
  background:
    linear-gradient(rgb(18 20 25 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(18 20 25 / 4%) 1px, transparent 1px),
    radial-gradient(circle at 76% 2%, rgb(23 105 255 / 10%), transparent 34rem),
    var(--canvas);
  background-size: 72px 72px, 72px 72px, auto, auto;
}

.gemini31-hero {
  grid-template-columns: minmax(480px, .78fr) minmax(0, 1.22fr);
}

.gemini31-hero .hero-copy {
  position: relative;
  z-index: 2;
}

.gemini31-hero .eyebrow { color: var(--gemini-blue); }

.gemini31-hero .hero-copy h1 {
  max-width: 800px;
  font-size: clamp(54px, 5.3vw, 90px);
}

.gemini31-hero .hero-visual {
  background: #f4f1eb;
}

.gemini31-hero .hero-visual img {
  object-fit: cover;
  object-position: 53% center;
}

.gemini31-hero .hero-visual figcaption span { color: #9dc5ff; }

.pro-task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 72%);
}

.pro-task-grid article {
  min-height: 340px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.pro-task-grid article:last-child { border-right: 0; }
.pro-task-grid article > span {
  margin-bottom: 72px;
  color: var(--gemini-blue);
  font: 720 10px/1 var(--mono);
}
.pro-task-grid h3 { margin-bottom: 15px; font-size: 24px; letter-spacing: -.045em; }
.pro-task-grid p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.pro-task-grid small {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted-light);
  font: 600 9px/1.5 var(--mono);
}

.context-section {
  width: var(--page);
  margin: 0 auto 150px;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  color: #f4f7fb;
  background:
    radial-gradient(circle at 80% 40%, rgb(23 105 255 / 25%), transparent 34rem),
    #11161b;
  box-shadow: 0 30px 80px rgb(18 20 25 / 16%);
}

.context-section > div { padding: 64px 62px; }
.context-section .section-label { color: #8fb6ff; }
.context-section h2 {
  max-width: 800px;
  margin-bottom: 25px;
  font-size: clamp(42px, 4.8vw, 72px);
  line-height: .98;
  letter-spacing: -.065em;
}
.context-section > div > p:last-child { max-width: 680px; margin: 0; color: #9da8b3; line-height: 1.7; }
.context-section ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid rgb(255 255 255 / 10%); }
.context-section li {
  min-height: 138px;
  padding: 28px 34px;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}
.context-section li:last-child { border-bottom: 0; }
.context-section li > span { color: #82abff; font: 700 10px/1 var(--mono); }
.context-section li div { display: grid; gap: 7px; }
.context-section li strong { font-size: 18px; letter-spacing: -.03em; }
.context-section li small { color: #87939f; font-size: 12px; }

.gemini-price .price-decision-ledger {
  background: linear-gradient(145deg, #1054df, #0b2f78);
}

.comparison-card.is-current {
  background:
    radial-gradient(circle at 90% 0%, rgb(71 132 255 / 25%), transparent 22rem),
    #10161d;
}

.capability-ledger {
  background:
    linear-gradient(90deg, rgb(66 129 255 / 7%) 1px, transparent 1px),
    linear-gradient(rgb(66 129 255 / 7%) 1px, transparent 1px),
    linear-gradient(135deg, #101419, #142337 70%, #10161d);
  background-size: 44px 44px, 44px 44px, auto;
}

@media (min-width: 1800px) {
  .gemini31-hero { grid-template-columns: minmax(600px, .74fr) minmax(0, 1.26fr); }
  .gemini31-hero .hero-copy { padding-left: 78px; }
  .gemini31-hero .hero-visual img { object-position: center; }
}

@media (max-width: 1120px) {
  .gemini31-hero { grid-template-columns: 1fr 1fr; }
  .pro-task-grid { grid-template-columns: 1fr 1fr; }
  .pro-task-grid article { border-bottom: 1px solid var(--line); }
  .pro-task-grid article:nth-child(2) { border-right: 0; }
}

@media (max-width: 900px) {
  .gemini31-hero { grid-template-columns: 1fr; }
  .gemini31-hero .hero-visual { min-height: 520px; }
  .context-section { grid-template-columns: 1fr; margin-bottom: 100px; }
  .context-section ol { border-top: 1px solid rgb(255 255 255 / 10%); border-left: 0; }
}

@media (max-width: 620px) {
  body { background-size: 48px 48px, 48px 48px, auto, auto; }
  .gemini31-hero .hero-copy h1 { font-size: clamp(43px, 13.5vw, 62px); }
  .gemini31-hero .hero-visual { min-height: 360px; }
  .gemini31-hero .hero-visual img { object-position: 56% center; }
  .pro-task-grid { grid-template-columns: 1fr; }
  .pro-task-grid article { min-height: 270px; border-right: 0; }
  .pro-task-grid article > span { margin-bottom: 44px; }
  .context-section { width: 100%; }
  .context-section > div { padding: 42px 23px; }
  .context-section h2 { font-size: 43px; }
  .context-section li { min-height: 118px; padding: 24px 22px; grid-template-columns: 38px 1fr; }
}