/* brainydevs.com
   The palette is the logo and nothing else: white, the frame of the glasses, the brain, and two
   values of the same pink (dark enough for links, pale enough for the support segments).
   One display face (Bricolage Grotesque), one reading face (Atkinson Hyperlegible Next).
   One moving thing on the page: the hero calendar, once, on load. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 700;
  font-stretch: 88% 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/atkinson-hyperlegible-next-latin.woff2) format('woff2');
}
/* Metric-matched fallbacks, so the page does not reflow when the real fonts arrive. Values
   computed from the fonts' hhea tables against Arial (average lowercase advance 0.4895em). */
@font-face {
  font-family: 'Bricolage Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 105.2%;
  ascent-override: 88.4%;
  descent-override: 25.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Atkinson Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 99.4%;
  ascent-override: 99%;
  descent-override: 31.8%;
  line-gap-override: 0%;
}

:root {
  --white: #ffffff;
  --frame: #2d2d2d;
  --brain: #fc889d;
  --deep: #a8203f;
  --pale: #ffe4e9;

  --display: 'Bricolage Grotesque', 'Bricolage Fallback', Arial, Helvetica, sans-serif;
  --text: 'Atkinson Hyperlegible Next', 'Atkinson Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;

  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(4rem, 10vw, 8rem);

}

/* ---------- base ---------- */

html {
  font-size: 106.25%; /* 17px */
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--text);
  font-weight: 400;
  line-height: 1.6;
  color: var(--frame);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--brain); color: var(--frame); }

h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  margin: 0;
  overflow-wrap: anywhere;
}
h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.5vw, 4.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 13em;
}
h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
}
/* Measures in em, not ch: ch resolves against the current font's zero, so a ch-based measure
   re-wraps every paragraph when the web font replaces the metric-matched fallback. 1ch of
   Atkinson Hyperlegible Next is 0.65em, of Bricolage Grotesque 0.59em. */
figure { margin: 0; }
p, dd, dt, li, figcaption, summary { max-width: 40.3em; text-wrap: pretty; }
h2, h3, .faq summary { text-wrap: balance; }
.nowrap { white-space: nowrap; }
p { margin: 0; }
p + p { margin-top: 0.75rem; }
.lead {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  line-height: 1.4;
  max-width: 26em;
  margin-top: var(--s2);
}
.small { font-size: 0.9375rem; line-height: 1.5; }
strong { font-weight: 700; }

a {
  color: var(--deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: text-decoration-thickness 120ms;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--frame); outline-offset: 3px; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 0.5rem 1rem;
  background: var(--frame);
  color: var(--white);
  font-weight: 700;
  z-index: 10;
}
.skip:focus { top: var(--s2); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid { display: grid; grid-template-columns: 1fr; column-gap: 24px; }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, 1fr); }
}

/* Column placements exist only on the 12-column grid. Below 900px every block is one column
   wide in DOM order; a placement there would create phantom implicit columns. */
@media (min-width: 900px) {
  .hero__copy { grid-column: 1 / 8; }
  .hero__figure { grid-column: 8 / -1; }
  .section-head { grid-column: 1 / 8; }
  .services { grid-column: 1 / -1; }
  .ai { grid-column: 1 / -1; }
  .terms { grid-column: 1 / 7; }
  .refusals { grid-column: 8 / -1; }
  .how__calendar { grid-column: 1 / 10; }
  .steps { grid-column: 1 / 11; }
  .how__need { grid-column: 1 / 9; }
  .proof__intro { grid-column: 1 / 8; }
  .products { grid-column: 1 / -1; }
  .faq { grid-column: 1 / 9; }
  .contact__text { grid-column: 1 / 8; }
  .contact__actions { grid-column: 8 / -1; }
}

/* ---------- buttons and the language select ---------- */

.btn {
  display: inline-block;
  font-family: var(--text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  padding: 0.85em 1.3em;
  border: 2px solid var(--frame);
  text-decoration: none;
  transition: background-color 120ms, color 120ms;
  overflow-wrap: anywhere;
}
.btn--primary { background: var(--frame); color: var(--white); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--brain); color: var(--frame); }
.btn--secondary { background: transparent; color: var(--frame); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--frame); color: var(--white); }

/* The language control is a <details> holding two links, so it needs no script, cannot change
   page on an arrow key, and the current edition is marked with aria-current. */
.lang { position: relative; }
.lang summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0.35em 2.2em 0.35em 0.7em;
  border: 2px solid var(--frame);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232d2d2d' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.lang summary::-webkit-details-marker { display: none; }
.lang[open] summary { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 7l5-5 5 5' fill='none' stroke='%232d2d2d' stroke-width='2'/%3E%3C/svg%3E"); }
.lang__label { font-weight: 400; }
.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% - 2px);
  z-index: 5;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 2px solid var(--frame);
}
.site-foot .lang__menu { top: auto; bottom: calc(100% - 2px); }
.lang__menu li { max-width: none; }
.lang__menu a {
  display: block;
  padding: 0.5em 0.9em;
  font-size: 0.9375rem;
  color: var(--frame);
  text-decoration: none;
  white-space: nowrap;
}
.lang__menu a:hover, .lang__menu a:focus-visible { background: var(--pale); text-decoration: underline; }
.lang__menu a[aria-current="page"] { font-weight: 700; }

/* ---------- header ---------- */

.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  padding-block: var(--s3);
}
/* From 900px the header is brand | nav | language; the nav gets the flexible middle column and
   wraps its own links when a language's labels run long, instead of pushing the dropdown down. */
@media (min-width: 900px) {
  .site-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--s3);
  }
  .site-head .lang { justify-self: end; }
}
@media (max-width: 559px) {
  .site-head .lang summary .lang__label { display: none; }
}
/* The header dropdown shows its own value ("English" / "Español"), so its label is for assistive
   technology only; the footer's copy of the control keeps the label visible. */
.visually-hidden, .site-head .lang__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--frame);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  white-space: nowrap;
}
.brand svg { width: 30px; height: 30px; flex: none; }
.site-nav { display: none; }
.site-nav a { color: var(--frame); text-decoration: none; padding-block: 0.25rem; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 900px) {
  .site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; font-size: 0.9375rem; }
}

/* ---------- sections ---------- */

section { padding-block: var(--section); }
.hero { padding-block: clamp(2rem, 6vw, 5rem) var(--section); }
.hero__figure { margin-top: var(--s4); }
@media (min-width: 900px) {
  .hero__figure { margin-top: 0.4em; }
}
.hero .lead { max-width: 31.2em; margin-top: var(--s3); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-top: var(--s4);
}
.hero__proof { margin-top: var(--s4); }


/* ---------- the build calendar ---------- */

.calendar { max-width: 460px; }
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: center;
}
@media (min-width: 480px) {
  .calendar__grid { grid-template-columns: max-content repeat(4, 1fr); }
}
.months, .weeks, .support { list-style: none; margin: 0; padding: 0; }
.months, .months > li, .weeks { display: contents; }
.month {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding-top: 0.5rem;
}
@media (min-width: 480px) {
  .month { grid-column: 1; padding: 0 0.75rem 0 0; text-align: right; }
}
.week {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid var(--frame);
  border-radius: 6px;
  background: var(--brain);
  font-size: 0.9375rem;
  line-height: 1;
  padding: 6px;
  max-width: none;
}
.week--slack { background: var(--white); }
/* The launch marker lives inside the twelfth cell, so "the boundary between weeks 11 and 12" is
   simply that cell's left edge. The cell paints above cell 11, so the disc overlaps it. */
.week--last { z-index: 1; text-align: right; }
.launch {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0;
  z-index: 2;
}
.launch__disc {
  position: absolute;
  left: 0;
  top: 0;
  width: 115%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.launch__disc svg { width: 82%; height: 82%; }
.launch__label {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 2px;
  white-space: nowrap;
  font-size: 0.9375rem;
  line-height: 1.2;
}
.support {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 1.6rem;
}
@media (min-width: 480px) { .support { grid-column: 2 / -1; } }
.support > li {
  flex: 1;
  height: 24px;
  border: 2px solid var(--frame);
  background: var(--pale);
  max-width: none;
}
.support__label {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  line-height: 1.4;
  max-width: none;
}
@media (min-width: 480px) { .support__label { grid-column: 2 / -1; } }
.calendar figcaption {
  margin-top: var(--s3);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 28.6em;
}

/* motion: the one orchestrated moment. The head script marks <html class="anim"> when motion
   is allowed; under that mark the hero calendar starts empty and site.js adds .built to one cell
   every 90ms, then .arrived and .tinted to the figure. Classes, not CSS animations: a finished
   animation's fill can be dropped by a later style recalculation (a font swap does it), and a
   class cannot. No mark, no JavaScript, or reduced motion: the finished calendar, immediately. */
.anim .calendar--hero .week:not(.week--slack) { background: var(--white); }
.anim .calendar--hero .week.built { background: var(--brain); }
.anim .calendar--hero .launch__disc {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 360ms, transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1.2);
}
.anim .calendar--hero.arrived .launch__disc { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.anim .calendar--hero .support > li { background: var(--white); }
.anim .calendar--hero.tinted .support > li { background: var(--pale); }

/* the annotated instance in "How it runs" */
.calendar--annotated { max-width: 880px; }
@media (min-width: 700px) {
  .calendar--annotated .calendar__grid {
    grid-template-columns: max-content repeat(4, minmax(0, 88px)) minmax(10.4em, 1fr);
  }
  .calendar--annotated .support { grid-column: 2 / 6; }
  .calendar--annotated .note { grid-column: 6; align-self: center; padding-left: var(--s3); }
  .calendar--annotated .note--meeting { grid-row: 1; align-self: start; padding-top: 0.5rem; }
  .calendar--annotated .note--launch { grid-row: 3; height: 0; display: flex; align-items: center; overflow: visible; }
  .calendar--annotated .note--meeting { height: 0; overflow: visible; }
  .calendar--annotated .note--support { grid-row: 4; margin-top: 1.6rem; }
}
.note { font-size: 0.9375rem; line-height: 1.5; margin: 0; }
.note--meeting::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--frame);
  border: 6px solid var(--frame);
  margin-right: 0.5rem;
  vertical-align: -1px;
}
.calendar__notes { grid-column: 1 / -1; list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 700px) {
  .calendar__notes { display: contents; }
}

/* ---------- section 1: build ---------- */

.ai { margin-top: var(--s4); }
.ai p { margin-top: 0.75rem; max-width: 45.5em; }
.services {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--frame);
  display: grid;
  gap: var(--s4) 24px;
}
@media (min-width: 900px) { .services { grid-template-columns: repeat(3, 1fr); } }
.service p { margin-top: 0.75rem; }
.service .service__shipped { margin-top: var(--s2); }

/* ---------- section 2: terms (the dark band) ---------- */

.band { background: var(--frame); color: var(--white); }
.band h2, .band h3 { color: var(--white); }
.terms { margin-top: var(--s4); }
.refusals { margin-top: var(--s4); }
.terms dl { margin: 0; }
.terms dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  margin-top: var(--s3);
}
.terms dt:first-child { margin-top: var(--s2); }
.terms dd { margin: 0.25rem 0 0; }
.terms .figure {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: clamp(2.5rem, 2rem + 3vw, 4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--brain);
  font-variant-numeric: tabular-nums;
  margin-top: 0.35rem;
}
.terms .figure + dd { margin-top: 0.5rem; }
.terms .prose { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--s3); row-gap: 0.75rem; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--white); }
.terms .prose dt { font-size: 1.0625rem; line-height: 1.6; margin: 0; }
.terms .prose dd { margin: 0; }
.refusals p { margin-top: var(--s3); }
.refusals h3 + p { margin-top: var(--s2); }

/* ---------- section 3: how ---------- */

.how__calendar { margin-top: var(--s4); }
.steps { margin: var(--s5) 0 0; display: grid; gap: var(--s3) 24px; }
@media (min-width: 900px) {
  .steps { grid-template-columns: minmax(7.8em, 3fr) 7fr; }
}
.steps dt { font-family: var(--display); font-weight: 600; font-size: 1.375rem; line-height: 1.25; }
.steps dd { margin: 0; }
@media (max-width: 899px) { .steps dt { margin-top: 0.5rem; } .steps dt:first-child { margin-top: 0; } }
.how__need { margin-top: var(--s4); }

/* ---------- section 4: proof ---------- */

.proof__intro p { margin-top: var(--s3); }
.proof__intro .lead { max-width: 31.2em; margin-top: var(--s2); }
.products { margin-top: var(--s4); }
.product {
  display: grid;
  gap: var(--s2) 24px;
  padding-block: var(--s3);
  border-top: 1px solid var(--frame);
}
.product:last-child { border-bottom: 1px solid var(--frame); }
.product h3 { display: flex; align-items: center; gap: 0.9rem; }
.product h3 img { width: 56px; height: 56px; border-radius: 22%; flex: none; }
.product dl { display: contents; }
.product dt { font-size: 0.9375rem; line-height: 1.5; font-weight: 700; }
.product dd { margin: 0; }
.product__links { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.product__links li { margin-top: 0.25rem; }
.product .small { max-width: 40.3em; }
.product__links:empty { display: none; }
@media (min-width: 900px) {
  .product { grid-template-columns: 3fr 4fr 3fr 2fr; }
  .product h3 { grid-row: 1 / 3; align-items: flex-start; flex-direction: column; }
  .product dt { grid-row: 1; }
  .product dd { grid-row: 2; }
  .product--follow dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .product--follow dd { grid-row: 1; }
  .product--follow h3 { grid-row: 1; }
}

/* ---------- section 5: faq ---------- */

.faq { margin-top: var(--s3); }
.faq details { border-top: 1px solid var(--frame); }
.faq details:last-child { border-bottom: 1px solid var(--frame); }
.faq summary {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  list-style-position: outside;
  margin-left: 1.6rem;
  padding: 1rem 0;
  cursor: pointer;
  max-width: none;
}
.faq summary::marker { color: var(--frame); }
.faq details p { padding: 0 0 1.25rem 1.6rem; }

/* ---------- section 6: contact ---------- */

.contact__text p { margin-top: var(--s3); }
.contact__text .lead { margin-top: var(--s2); }
.contact__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s4);
}
@media (min-width: 900px) { .contact__actions { margin-top: 0; padding-top: 0.5rem; } }

/* ---------- footer ---------- */

.site-foot {
  border-top: 2px solid var(--frame);
  padding-block: var(--s4) var(--s5);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.site-foot .brand { font-size: 1.125rem; }
.site-foot .brand svg { width: 24px; height: 24px; }
.site-foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
}
.site-foot__links { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem var(--s3); }
.site-foot p { margin-top: var(--s2); }
.site-foot .site-foot__end { margin-top: var(--s3); }

/* ---------- reduced motion ---------- */

@media (forced-colors: active) {
  /* The calendar's colour is its meaning: keep its own paint, and its numbers dark on the pink. */
  .week, .support > li, .launch__disc { forced-color-adjust: none; color: var(--frame); }
  .lang summary, .lang[open] summary { background-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}