/*
 * The public site's one stylesheet (plan §16.6, P11-01).
 *
 * The landing page is a week. Not a page decorated with calendar parts — a
 * real day view per band, ruled by the hours down the side and the days
 * across the top, with every section booked into the slot its own timestamp
 * names. "Seg 08:00 – 09:30" is in Monday's column, at eight, three
 * half-hours tall. The metadata is the layout.
 *
 * One rendering of that object, everywhere. An event — a 10px block in the
 * week behind the headline, or a card with a paragraph in it further down —
 * is always the same recipe: its calendar's colour washed into the surface,
 * a solid spine down the left, a hairline in the same hue, no shadow. The
 * page used to draw the device two ways, which is the fastest way to look
 * like two products.
 *
 * Colour is the product's own, from the Figma "Events Colors" collection,
 * and three of them carry meaning the reader can learn once: green is
 * Google, ochre is Outlook, blue is Apple. They name the accounts in the
 * hero week and again on the rows of the availability figure. Orange is not
 * a calendar colour — it is the one thing on the page that asks for
 * something, so it belongs to actions and to free time.
 *
 * The Worker serves these pages under `style-src 'self'`, so there is no
 * inline style anywhere: every column, hour and depth below is a class.
 */

/*
 * The brand's own type, served from this origin.
 *
 * Both families and the jobs they do are read off the Figma file, not
 * chosen here. On the deck's 60 slides Google Sans Flex accounts for 1623
 * of the text nodes and Google Sans Code for 36 — the Inter and DM Mono in
 * there belong to the slide template Cuco bought, not to Cuco.
 *
 * Google Sans Flex is everything structural. Google Sans Code is one thing:
 * the small, tracked-out, uppercase line — the legal note under every slide
 * — which is the same voice this page needs for hours, day names and
 * section labels.
 *
 * The metrics are the deck's too, and they are the distinctive part:
 * display is set at 110% leading and −4% tracking, the code voice at 110%
 * and +5%. Both variable, both OFL, both `swap`, so no page waits on a
 * download to be readable.
 */
@font-face {
  font-family: "Google Sans Flex";
  font-style: oblique 0deg 10deg;
  font-weight: 1 1000;
  font-display: swap;
  src: url("fonts/google-sans-flex-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Google Sans Code";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/google-sans-code-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* Brand identity — Figma, verbatim. */
  --orange-50: #fff3e5;
  --orange-100: #ffe7cc;
  --orange-200: #ffcf99;
  --orange-300: #ffb866;
  --orange-400: #ffa033;
  --orange-500: #ff8800;
  --orange-600: #cc6d00;
  --orange-700: #995200;
  --orange-800: #663600;

  --green-50: #f1f6ef;
  --green-100: #e4ecdf;
  --green-200: #c8dabe;
  --green-300: #adc79e;
  --green-400: #92b57d;
  --green-500: #76a25d;
  --green-600: #5f824a;
  --green-700: #476138;
  --green-800: #2f4125;

  --gray-50: #f2f2f2;
  --gray-100: #e6e6e6;
  --gray-200: #cccccc;
  --gray-600: #666666;
  --gray-800: #333333;
  --gray-900: #1a1a1a;
  --gray-950: #121212;

  /* From the "Paleta de cores" board. */
  --deep-green: #2a3c2e;
  --cool-white: #f4f7f5;

  /* Events Colors, and the file's own rule for what goes on top of them. */
  --ev-blue: #76c5ed;
  --ev-green: #5f824a;
  --ev-green-light: #c8dabe;
  --ev-orange: #ffcf99;
  --ev-orange-dark: #995200;
  --ev-yellow: #ffe53a;
  --ev-red: #c74040;
  --ev-purple: #874693;
  --on-light-event: #121212;
  --on-dark-event: #ffffff;

  /* What each colour is for. */
  --canvas: var(--green-50);
  --surface: #ffffff;
  --surface-sunk: var(--green-100);
  --border: var(--green-200);
  --heading: var(--green-800);
  /*
   * Body and secondary text are the heading colour let down, not neutral
   * grey. #333 and #666 on a green paper read cold and belong to a
   * different palette; these stay in the family the deck actually uses and
   * still clear 4.5:1 on Green-50.
   */
  --text: color-mix(in srgb, var(--green-800) 88%, var(--green-50));
  --muted: color-mix(in srgb, var(--green-800) 78%, var(--green-50));
  --link: var(--orange-700);
  --accent: var(--orange-500);
  --on-accent: var(--gray-950);
  /* The empty half of an availability bar. Neutral enough that any account
   * colour reads against it, but far enough off the paper to be seen at
   * all: it was #dcdfd8, which measures 1.23:1 against Green-50 and made
   * the diagram's own ground invisible. */
  --track: #c2ccbb;
  --rule: rgba(47 65 37 / 0.14);
  --cast: rgba(42 60 46 / 0.16);
  --cast-deep: rgba(42 60 46 / 0.2);

  --font-sans: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* The deck's small tracked-out label voice. Not a terminal face: it is a
   * companion to the sans, and it carries the hours and day names. */
  --font-mono: "Google Sans Code", ui-monospace, "Cascadia Mono", "SF Mono",
    Menlo, Consolas, monospace;

  /* An 8px rhythm, named for what it separates. */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 2.5rem;
  --s6: 3rem;
  --s7: 3.5rem;
  --s8: 4rem;
  --s10: 5rem;
  --s12: 6rem;
  --s16: 8rem;

  --measure: 34rem;
  --page: calc(var(--measure) + 6rem);
  --gutter: 1.5rem;
  --slot: 1.75rem;
  --chip: 4px;
  /* The radius the deck's device panels carry (410:15395, 410:26606). One
   * value, so every screen of the product on this page is cornered the same
   * way as every other. */
  --card: 12px;
  /*
   * How much of the wordmark shows where it runs off the foot of a band.
   *
   * At 15vw the crop took the top 60% of the letters, and 60% is the worst
   * place to cut this word: enough of the "c" and "o" to read as circles,
   * not enough of the "u" to read as a "u", so the four glyphs came out as a
   * row of blobs. At 18 it is about three quarters, which is where the word
   * comes back.
   */
  --bleed-h: clamp(5rem, 18vw, 16rem);
  /* Wide enough for "08:00" and not a pixel more. At 4.5rem the axis plus the
   * page margin came to 200px on the left against 104 on the right, and an
   * asymmetry that size has to be earned by what the column carries. */
  /* 4rem, since the hours are set at 16px now: "08:00" plus the rule's own
   * clearance is 60 of the 52 the column had, and an axis whose numbers do
   * not fit the column they name is not an axis. */
  --hour-gutter: 4rem;
  /* The landing masthead's height, with a little air, for the jumps that
   * have to land below it: 82px, its padding and the 2.25rem wordmark. */
  --masthead: 6rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: var(--gray-950);
    --surface: var(--gray-900);
    --surface-sunk: #1c1f1a;
    --border: #33372f;
    --heading: var(--green-100);
    --text: var(--gray-100);
    --muted: #a3a89d;
    --link: var(--orange-400);
    --on-accent: var(--gray-950);
    --track: #34382f;
    --rule: rgba(228 236 223 / 0.11);
    --cast: rgba(0 0 0 / 0.5);
    --cast-deep: rgba(0 0 0 / 0.62);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--canvas);
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}

.page-landing {
  /* Wider than 76rem, which left 112px of empty canvas either side of a page
   * whose left column is already an hour rail: the axis plus the margin came
   * to 208px, a seventh of the window, carrying nine numbers. At 80 the
   * margin is 80 and the rail reads as a rail. */
  --page: 80rem;
  /*
   * A quarter of an hour, in pixels. One number, and the whole rail — band
   * heights, hour marks, band offsets — follows it.
   *
   * 135, so an hour is 540px. It was 150 (600 an hour) and before that 120
   * (480), and the number matters for one reason only: how much of each
   * booking the content actually fills. At 150 the seven bands left 632px of
   * booked time empty, which is a tenth of the page standing open; here they
   * leave 306, and no band clears its own booking by fewer than nine pixels.
   * Nothing is padded to reach a round number and nothing is cropped to fit
   * one — the bookings are read off the measured content in the longest of
   * the three languages and rounded up to the next quarter, and this is
   * simply the quarter that wastes the least of it.
   */
  --quarter: 135px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--s2);
  top: var(--s2);
  z-index: 3;
  padding: var(--s1) 0.75rem;
  background: var(--surface);
  border: 2px solid var(--link);
  border-radius: var(--chip);
}

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

/* ---- Masthead and footer -------------------------------------------- */

header,
footer {
  position: relative;
  z-index: 2;
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s3) var(--gutter);
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
}

/*
 * The masthead and the footer start where the day starts.
 *
 * Every band's content begins after the hour gutter, so a footer set to the
 * page margin alone began about a hundred pixels to the left of every line
 * above it — two left edges on a page whose whole structure is one column.
 */
@media (min-width: 48rem) {
  .page-landing > header,
  .page-landing > footer {
    padding-left: calc(var(--gutter) + var(--hour-gutter) + var(--s3));
  }

  /* And the divider above the footer starts there too. As a border it ran
   * the full width of the page box, from 112 to 1328, under a column that
   * runs 232 to 1304 — a rule that lines up with nothing. */
  .page-landing > footer {
    border-top-color: transparent;
  }

  .page-landing > footer::before {
    content: "";
    position: absolute;
    top: -1px;
    right: var(--gutter);
    left: calc(var(--gutter) + var(--hour-gutter) + var(--s3));
    height: 1px;
    background: var(--border);
  }
}

.brand {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.brand a {
  color: var(--heading);
  text-decoration: none;
}

header nav {
  flex: 1 1 auto;
}

/* The whole index in the small tracked-out voice the eyebrows use, so the
 * masthead reads as a table of contents and the one thing beside it — the
 * button — reads as the action. In the mono it was one more place the clock's
 * face had spread to: these are section names, not times. */
header nav a {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 62rem) {
  .jump {
    display: none;
  }
}

/*
 * One row, at every width, now that the masthead stays on screen (SER-323).
 *
 * Under 62rem every link in the landing index is a `.jump`, so the nav is
 * empty, and empty it still took two gaps and pushed the button onto a row of
 * its own. Up to 67rem the five links are there but do not fit beside the
 * wordmark and the button, and wrapped under them: a 128px band over the top
 * of a 1024px window the whole way down, taller than the room a jump leaves
 * for it. The index goes at the same point the row stops holding it.
 */
@media (max-width: 67rem) {
  .page-landing > header nav {
    display: none;
  }

  .page-landing > header .masthead-cta {
    margin-left: auto;
  }
}

@media (max-width: 34rem) {
  .page-landing > header {
    column-gap: var(--s2);
  }

  .page-landing > header .masthead-cta a {
    padding-inline: 0.9rem;
  }
}

/* A 360px phone, the narrowest still common, and the longest of the three
 * buttons, "Conecta tu calendario": one row needs these few pixels. */
@media (max-width: 24rem) {
  .page-landing > header {
    column-gap: 0.75rem;
  }

  .page-landing > header .masthead-cta a {
    padding-inline: 0.8rem;
    font-size: 0.8rem;
  }
}

header ul,
footer ul,
.lang ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

header a,
footer a,
.lang a {
  color: var(--muted);
  font-size: 0.94rem;
  text-decoration: none;
}

header a:hover,
footer a:hover,
.lang a:hover {
  color: var(--heading);
  text-decoration: underline;
}

/* Compact, and pushed to the end. It used to be the centrepiece of the
 * masthead, which put the choice of language above the choice to use the
 * product. */
.lang {
  margin-left: auto;
}

.lang ul {
  gap: var(--s1) 0.7rem;
}

.lang a,
.lang [aria-current] {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

header [aria-current],
footer [aria-current] {
  color: var(--heading);
  font-weight: 600;
}

/* Colour alone marks the current language. In bold mono uppercase it
 * outweighed the Privacy and Terms links standing next to it, which is the
 * wrong thing to be the heaviest text in a footer. */
.lang [aria-current] {
  color: var(--heading);
}

/* The CTA is the loudest thing in the masthead. The language switcher had
 * an orange underline and was beating it. */
.masthead-cta {
  margin: 0;
}

/*
 * The masthead's one action, in the same costume as the hero's.
 *
 * It was set in the index's mono caps so the top row would read as one row,
 * which gave the page two different buttons carrying the identical words —
 * "CONECTE SUA AGENDA" up here, "Conecte sua agenda" three hundred pixels
 * below — and a reader has to decide whether those are the same thing. They
 * are, so they look the same: one action, one shape, smaller up here because
 * the masthead is smaller.
 */
/* On the landing page's orange field it changes costume, with the hero's
 * button: see `.page-landing > header .masthead-cta a`. */
.masthead-cta a {
  display: inline-block;
  padding: 0.42rem 1.1rem;
  background: var(--green-800);
  border-radius: 999px;
  color: var(--green-50);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.masthead-cta a:hover {
  background: var(--green-700);
  text-decoration: none;
}

/*
 * A real footer: the mark, the pages people look for down here, the
 * language, and the one sentence about trackers. The mark and the language
 * control both used to sit in the masthead, where a second brand lockup
 * competed with the wordmark and the language switcher outranked the CTA.
 */
footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  margin-top: var(--s8);
  padding-block: var(--s6) var(--s8);
  border-top: 1px solid var(--border);
}

@media (min-width: 48rem) {
  footer {
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: var(--s6);
  }

  footer p:last-child {
    grid-column: 1 / -1;
  }
}

footer p {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

footer .wordmark {
  margin: 0;
}

/*
 * The landing page signs off the way the deck does: the wordmark running off
 * the bottom edge, with the last line of type standing on it.
 *
 * It used to live inside the closing band, where the band's own bottom edge
 * cropped it — and under that edge came the footer's paper, so what the
 * reader saw was a slice through the letterforms with a change of ground
 * along the cut. That is a clipping bug wearing a bleed's clothes. Down
 * here the only edge below the mark is the end of the page.
 *
 * The ground reaches the window the same way the masthead's does, and the
 * mark reaches it too: at 1440 the footer box is 80rem, so left at zero the
 * word would have sat in the middle with orange either side of it.
 */
.page-landing > footer {
  --heading: var(--green-800);
  --text: var(--green-800);
  --muted: var(--green-800);
  --link: var(--green-800);
  --border: color-mix(in srgb, var(--green-800) 30%, transparent);

  background: var(--accent);
  box-shadow: 0 0 0 100vmax var(--accent);
  clip-path: inset(0 -100vmax);
  color: var(--green-800);
  /* No gap above it: the closing band is the same orange, so the margin was
   * sixty-four pixels of the same colour doing nothing but making the page
   * longer. The rule above the footer is what separates them. */
  margin-top: 0;
  /* Room for the sign-off, so nothing is printed on it. */
  padding-bottom: calc(var(--bleed-h) + var(--s3));
}

/* Width, not `right`. The mark is an `<svg>`, and a replaced element with
 * `width: auto` takes its own aspect ratio rather than the box its offsets
 * describe — which cropped the word to 1027px and left four hundred pixels
 * of bare orange beside it. */
.page-landing > footer .bleed {
  left: calc(-1 * max(0px, (100vw - var(--page)) / 2));
  width: calc(100% + 2 * max(0px, (100vw - var(--page)) / 2));
}

/* ---- Baseline type --------------------------------------------------- */

main {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s4) var(--gutter) var(--s6);
}

h1,
h2 {
  color: var(--heading);
  text-wrap: balance;
}

/*
 * The deck's display style: 110% leading, −4% tracking, and the deck's
 * size. Slide titles are set at 128px on a 1920 frame, which is 96px at
 * this page's 1440 — the h1 was topping out at 72px, close enough to the
 * section headings that the two barely separated on a page this long.
 */
h1 {
  margin: 0 0 var(--s3);
  font-size: clamp(2.5rem, 1rem + 6.2vw, 6rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

h2 {
  margin: var(--s4) 0 var(--s1);
  font-size: 1.2rem;
  line-height: 1.3;
}

h3 {
  margin: 0 0 0.35rem;
  color: var(--heading);
  font-size: 1.05rem;
  line-height: 1.3;
}

p {
  max-width: var(--measure);
  margin: 0 0 0.75rem;
  /* No single-word last lines: "equivalente." alone under a two-line
   * paragraph is a hole the eye lands in on the way out. */
  text-wrap: pretty;
}

.lead {
  color: var(--text);
  font-size: 1.15rem;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.button {
  display: inline-block;
  padding: 0.9rem 1.9rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.button:hover {
  background: var(--orange-600);
  color: #ffffff;
}

/* ================================================================== *
 * The landing page.
 * ================================================================== */

.page-landing main {
  max-width: none;
  padding: 0;
  perspective: 1800px;
  perspective-origin: 50% 30%;
  overflow-x: clip;
}

.page-landing main > section {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-style: preserve-3d;
}

/*
 * The deck's stacked plates (410:15275), taking the right edge of a band.
 *
 * Forest ground, the wordmark blown up past the frame and repeated in
 * overlapping rows in Orange-200, cropped by the edge. It is the loudest
 * page in the deck and nothing here was using it — the only brand gesture on
 * the page was the sign-off, which is the wordmark the deck also ends on, so
 * the identity appeared exactly once, at the bottom, after the argument was
 * over.
 *
 * It costs no height: the field is the band it is already in. The reading
 * column stops before it starts, so nothing is ever set over a letterform —
 * on the slide the headline sits on the clean part of the ground for the
 * same reason.
 */
/* Everything in the band stands above the field. Without this the copy is in
 * the same stacking context as an absolutely positioned sibling that comes
 * first, which is a coin toss the moment anything else grows a `z-index`. */
.hero > .inner,
.close > .inner {
  position: relative;
  z-index: 1;
}

.page-landing main > section > .inner {
  --band-pad: var(--s5);

  /*
   * Fills the band, so the event and its booking are the same object.
   *
   * The block was as tall as its own content, which meant the coloured bar
   * down its left edge measured the words rather than the time — an event
   * drawn shorter than the slot it is booked in, with the field carrying on
   * underneath it. On a day view those two edges are the same edge.
   */
  flex: 1 1 auto;

  display: grid;
  grid-template-columns: var(--hour-gutter) minmax(0, 1fr);
  /* The section is a flex column so the free slot can absorb the rest of
   * the hour, and an auto side margin on a flex item cancels the default
   * stretch: without this the reading column shrinks to its own content and
   * the band's spine slides inward, breaking the one left edge the page
   * has. It showed up the moment a band's content stopped being wide. */
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  /*
   * No vertical padding here; the block carries it.
   *
   * With the padding on this wrapper the block started 40px below the band's
   * top edge, and the hour rule drawn at that edge had nothing over it — so
   * a line ran under the masthead from the page's left margin to the block's
   * right edge and stopped there, 104px short of the window. The same strip
   * of unmasked rule appeared at the top of all seven bands. Moving the
   * padding inside the block means the block covers its whole booking, and
   * the only rules that show are the ones in the hour column, which is where
   * a day view draws them.
   */
  padding: 0 var(--gutter);
  transform-style: preserve-3d;
}

/*
 * The rail, drawn on the band rather than on the reading column inside it.
 *
 * On the column it stopped where the words stopped, which in the closing
 * band meant it carried on down into the wordmark and died halfway through
 * a letter. On the band it runs the band's full height and can be told
 * where to stop — and in the closing band it stops at the top of the
 * bleed, the way a day view's rules stop at the end of the day.
 */
/*
 * The rail hairline, and nothing else.
 *
 * The accent bar was drawn here for a while so it would run the band's full
 * booking. It did, and seven of them abutting turned into one orange line
 * two thousand pixels long — which in a day view means nothing, because the
 * line that carries meaning there is the edge of a single event. The bar
 * went back onto the block, where it is one bar per event; this is the
 * hairline that separates the hour column from the day, as it always was.
 */
.page-landing main > section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(
    max(0px, (100% - var(--page)) / 2) + var(--gutter) + var(--hour-gutter)
  );
  width: 1px;
  /* 16% was a hairline holding up a page-wide structure. At 30 the line
   * between the hour column and the day is the first thing the eye finds,
   * which is what it is for. */
  background: color-mix(in srgb, currentcolor 30%, transparent);
}

/* The rail runs to the end of the closing band now. It used to stop short
 * of the wordmark, which stood inside this band; the wordmark is in the
 * footer, and the day ends where the last event ends. */


@media (max-width: 48rem) {
  .page-landing main > section::after {
    display: none;
  }
}

/*
 * The rail keeps its own scale: a quarter of an hour is 120px, so an hour is
 * 480 and every band stands exactly as tall as the time it is booked for.
 *
 * Without this the stamps were decoration. Eight o'clock to nine took 747px
 * and three to four took 383, so the same hour was twice as long in one part
 * of the page as in another — which is the one thing a day view may not do.
 * The durations were read off each band's own content, in the longest of the
 * three languages, and rounded up to the next quarter hour; nothing here is
 * padded to a number somebody liked.
 */
@media (min-width: 62rem) {
  .page-landing main > section {
    min-height: calc(var(--q) * var(--quarter));
    /*
     * The hours rule the whole width, which is what makes the page read as a
     * day rather than as seven panels with numbers beside them.
     *
     * They ran the full width once before, in ink at 14% on paper, and a
     * hairline that visible drawn through a ninety-six pixel headline is a
     * strike-through: "como o Cuco usa" was crossed clean out. So they were
     * pulled back into the gutter, and then nobody could tell the sections
     * had durations at all.
     *
     * The answer was the weight, not the width. At 7% of the band's own
     * ground the rule is a grid you notice under the type rather than a line
     * drawn across it — which is exactly how a day view's rules behave
     * behind an event.
     */
    /* From the band's own ink, so a forest field rules in light and a paper
     * field rules in dark without either being named twice.
     *
     * And they can be seen now. At 7% they were a rumour, because they had to
     * survive being drawn across a ninety-six pixel headline. They are not
     * drawn across anything any more — the event block is opaque and covers
     * its own hours, exactly as a block does in the product — so the rule is
     * free to be a rule wherever it actually shows, which is the hour column
     * and the time between one event and the next.
     */
    --hour-rule: color-mix(in srgb, currentcolor 20%, transparent);

    /*
     * And the same rule, quieter, across the block itself.
     *
     * For several rounds the hours were drawn on the gutter alone, and a scan
     * of the rendered page found not one horizontal line anywhere outside a
     * fifty-two pixel column: the page's whole structural idea — every
     * section as tall as the time it is booked for — was invisible unless you
     * measured it. A number in a gutter with a one-inch stub beside it is a
     * caption, not an axis.
     *
     * They ran the full width once and were pulled back, because at the
     * gutter's weight a hairline through a ninety-six pixel headline is a
     * strike-through — and at 9% it still was one, four headlines over. The
     * answer was neither the width nor the weight but where the line stops:
     * it crosses the block's bar and its padding and ends on the first
     * letter. Being over type at all was the fault, so it is over none.
     * Full strength, since it no longer has anything to survive being drawn
     * across.
     */
    --block-rule: color-mix(in srgb, currentcolor 20%, transparent);

    /*
     * Hours only. The half hours were ruled too, on the argument that a day
     * view rules both — but the blocks cover everything except the hour
     * column, so what actually showed was a second set of unlabelled
     * seventy-eight-pixel stubs between the labelled ones. Two lengths of
     * stub in a narrow column reads as a rendering artefact, not as a clock.
     */
    /*
     * The rules themselves are drawn on the hour column, not here.
     *
     * They were a background on the band, positioned with `calc()` so they
     * would start at the page's left margin and stop at the block's right
     * edge. That never worked, and the reason is a genuine trap: a
     * percentage inside `background-position` is resolved against
     * (container − image), not against the container, so
     * `(100% - var(--page)) / 2` is not the page margin and never was. The
     * rules had been bleeding into the left margin for several rounds, which
     * is the line under the masthead that stops short of the window.
     *
     * They belong to the hour column anyway: that is the only place they
     * were ever visible, since the block covers the rest, and drawing them
     * there needs no arithmetic at all.
     */
  }

  /*
   * The hour lines themselves, not just the stamps.
   *
   * A day view is ruled, and a rail with no rules is a caption pretending to
   * be a structure. Every band is booked in whole half hours, so each one
   * begins on the hour or on the half, and carries that half as an offset:
   * the lines then land on the real hour right down the page, and the rule
   * under "09:00" is the same distance from the one under "10:00" as it is
   * anywhere else.
   *
   * Quarter hours fitted the content more tightly, but they meant no band
   * ever started where a label was — 12:45, 14:15, 15:45 — so the numbers
   * in the gutter and the edges of the bands never coincided and the rail
   * read as a broken table edge. Costing a little height to make every
   * boundary a time somebody would actually say is the better trade.
   */
  /*
   * Quarter hours, not halves.
   *
   * Halves rounded every band up to the next thirty minutes, and the part
   * it did not need became air — about fifteen per cent of the page. A
   * quarter is 150px, so the worst case is now 149px of event body rather
   * than 299, and the total slack falls from roughly twelve hundred pixels
   * to four hundred. Every band prints its own start and end, so a block
   * that runs 10:45 – 12:45 says so; there is nothing left to be confused
   * about.
   */
  .o15 { --offset: var(--quarter); }
  .o30 { --offset: calc(var(--quarter) * 2); }
  .o45 { --offset: calc(var(--quarter) * 3); }

  .q2 { --q: 2; }
  .q3 { --q: 3; }
  .q4 { --q: 4; }
  .q5 { --q: 5; }
  .q6 { --q: 6; }
  .q7 { --q: 7; }
  .q8 { --q: 8; }
  .q9 { --q: 9; }
  .q10 { --q: 10; }
  .q11 { --q: 11; }
}

/*
 * The page's spine: the hour, and the line that separates the hour from the
 * day.
 *
 * The band's own top padding puts the stamp exactly where an event's start
 * time sits — level with the first line of the section, not floating above
 * it — and the rule is drawn on the body rather than the gutter so the
 * segments of consecutive bands meet with nothing between them.
 */
/*
 * The hour axis.
 *
 * One label per hour, each sitting on the rule it names, running from the
 * band's own top edge. The gutter carried a single stamp per band before, at
 * whatever quarter hour the band happened to begin — so the numbers and the
 * lines beside them never coincided and the column read as a broken table
 * edge. This is the axis the app draws down the side of a day.
 */
/* No negative margin any more: the wrapper has no vertical padding to
 * cancel, so the axis starts at the band's own top edge by itself. */
.spine {
  position: relative;
  grid-column: 1;
  align-self: stretch;
  margin: 0;
  /* One rule an hour, down the column, offset by however far into an hour
   * the band happens to start. The column is the full height of the band, so
   * the gradient needs no sizing and no positioning but the offset. */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--hour-rule, transparent) 0 1px,
    transparent 1px calc(var(--quarter) * 4)
  );
  background-position: 0 calc(-1 * var(--offset, 0px));
  padding-right: 0.75rem;
  color: var(--heading);
  font-family: var(--font-mono);
  /*
   * The axis is the page's structure, so it is set like structure.
   *
   * At 11px it was a caption nobody read; at 13.8 it was still a filete with
   * numbers beside it, and two critics running said the proportional heights
   * — the whole idea — were invisible unless you measured them. Sixteen at
   * 600 is the size of the copy it stands beside, which is what an axis has
   * to be to hold seven blocks together.
   */
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: right;
}

/*
 * Each label sits just under its own rule, and every one of them the same
 * way. Straddling the line reads better in the middle of a band, but the
 * first label of a band sits on the band's own top edge, where the section
 * clips it in half — and one hour set differently from the rest is worse
 * than all of them a few pixels low.
 */
.hour-mark {
  position: absolute;
  right: 0.75rem;
  padding-top: 0.35rem;
}

/*
 * The small mono voice, one step up.
 *
 * Every label on the page — the band header, the feature keys, the strip
 * names, the table terms — was set around eleven pixels on a 1440 canvas,
 * which is a size for a footnote, not for the layer this page uses to carry
 * its data. Thirteen with the same tracking reads as a specification.
 */
.band-time,
.feature-key,
.strip-label,
.sheet-rows dt,
.axis,
.legend {
  font-size: 0.8rem;
}

/*
 * Every offset a quarter-hour booking can produce, counted in quarters.
 *
 * A band starting at :45 puts its first hour mark one quarter down, one
 * starting at :30 puts it two down, and so on. These used to name pixels —
 * `.tp150`, `.tp300` — which tied the axis to one particular height for an
 * hour and meant a change of scale had to be re-derived by hand in eleven
 * places. It was derived wrong once: only the multiples of 300 existed, so
 * on bands starting at a quarter the mark had no `top` at all and 13:00
 * printed on top of 14:00. An hour axis that loses an hour is worse than no
 * axis. Now there is one number, `--quarter`, and everything follows it.
 */
.tq0 { top: 0; }
.tq1 { top: var(--quarter); }
.tq2 { top: calc(var(--quarter) * 2); }
.tq3 { top: calc(var(--quarter) * 3); }
.tq4 { top: calc(var(--quarter) * 4); }
.tq5 { top: calc(var(--quarter) * 5); }
.tq6 { top: calc(var(--quarter) * 6); }
.tq7 { top: calc(var(--quarter) * 7); }
.tq8 { top: calc(var(--quarter) * 8); }
.tq9 { top: calc(var(--quarter) * 9); }
.tq10 { top: calc(var(--quarter) * 10); }
.tq11 { top: calc(var(--quarter) * 11); }

/*
 * A band, drawn as the event it is booked as.
 *
 * The rail gave every section a slot and held it to that height, and none of
 * that was visible: a section that ran out of words before its slot ended
 * had air under it, which reads as an unfinished layout rather than as an
 * event booked longer than its title. The spine and the printed start-and-end
 * are the same two marks the cards in "the problem" carry, so the empty part
 * of a slot now reads as the body of an event — which is what it always was.
 */
/*
 * The block itself: an event standing on the day's grid.
 *
 * Two things come out of it being opaque. The hour rules run the full width
 * of the page now, and the block covers the ones behind its own text — so
 * they show in the gutter and in the time between one block and the next,
 * which is exactly where a day view draws them and exactly where they were
 * wanted. And the accent bar is the block's left edge again rather than a
 * two-thousand-pixel line down the side of the page: one bar per event, the
 * length of that event.
 */
.band-body {
  position: relative;
  grid-column: 2;
  /* The band's own vertical padding, plus the room the chip stands in. */
  padding-top: calc(var(--band-pad) + 2.9rem);
  padding-bottom: var(--band-pad);
  padding-left: var(--s3);
  border-left: 3px solid var(--accent);
  /*
   * The same hours as the gutter, carried across the block's own edge and
   * stopped exactly where the words start.
   *
   * Run the full width of the block they were a strike-through: the nine
   * o'clock line passed behind the hero's button, the ten o'clock line fell
   * between "a sua vida não cabe" and "em uma conta só", the eleven o'clock
   * line between "um link com horários" and "livres de verdade". A studio
   * does not ship an H2 cut in half by a hairline.
   *
   * So the tile is the width of the block's own left inset — the accent bar
   * and the padding, twenty-seven pixels — and no wider. The hour now runs
   * from its number in the gutter, across the axis, through the bar of the
   * event it belongs to, and dies on the first letter. Ninety pixels of
   * continuous line per hour, and not one of them over type.
   */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--block-rule, transparent) 0 1px,
    transparent 1px calc(var(--quarter) * 4)
  );
  background-repeat: no-repeat;
  background-size: calc(3px + var(--s3)) 100%;
  background-position: 0 calc(-1 * var(--offset, 0px));
}

/*
 * The block paints no ground of its own any more.
 *
 * It carried one so it could mask the hour rules running under its text.
 * The rules are drawn on the hour column now, so there is nothing left to
 * mask — and an opaque block that fills its whole booking painted straight
 * over the sign-off in the closing band, leaving two peach arcs showing in
 * the gutter and the right margin where the block did not reach. The
 * wordmark was there the whole time, underneath its own field.
 */

/*
 * One hue down the whole page, at two values.
 *
 * The bar started as three colours — accent on paper, Orange-400 on forest,
 * Green-800 on orange — which four critiques running read as a line that
 * changes colour at every boundary for no reason a reader could name. On an
 * event a coloured edge says which calendar it belongs to; changing it per
 * section says these seven belong to seven different calendars, which is not
 * the claim the page makes.
 *
 * Green-800 was there because an orange bar on an orange ground is not a
 * bar. But Orange-800 on Orange-500 measures 4.19:1 — plainly a bar — and it
 * keeps the edge in the accent's own hue from the first event to the last.
 * One line, one colour, two values chosen by what the ground allows.
 */
.hero .band-body,
.close .band-body {
  border-left-color: var(--orange-800);
}

/*
 * The time and the section's name are one line, not two.
 *
 * They were stacked — a mono time, a gap, then a mono kicker — which spent
 * about a hundred and fifty pixels per band saying two small things in the
 * same voice, one under the other. An event header is a time and a title on
 * one line, so this is that: the hour in muted ink, the name in the accent,
 * reading as a single stamp.
 */
/*
 * And it is drawn as a chip, the way the product draws one.
 *
 * It was two words of grey mono floating above a heading — the information an
 * event carries, set as a caption. In the mock three hundred pixels away, the
 * same information is a filled block with the hour and the title inside it,
 * and that is the vocabulary this page is supposed to be borrowing. So the
 * section's own booking is a block: accent fill, ground-coloured ink, sitting
 * at the top-left corner of the event it labels.
 */
/*
 * Out of the flow, so its distance from the heading is one number.
 *
 * As a row of the block it inherited whatever layout that block used: in the
 * five bands built as a stack it sat 16px above the heading, and in the two
 * built as a grid the row gap was added to its own margin and it floated 62
 * and 34. Three distances for one relationship, decided by how the section
 * underneath happened to be built. Absolute against the block, it is 16px
 * everywhere, and the block's top padding is the room it stands in.
 */
.band-time {
  position: absolute;
  top: var(--band-pad);
  left: var(--s3);
  display: inline-flex;
  align-items: baseline;
  gap: 0.9rem;
  width: fit-content;
  margin: 0;
  padding: 0.3rem 0.7rem;
  background: var(--accent);
  border-radius: var(--chip);
  color: var(--green-800);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.band-head .eyebrow,
.sheet .eyebrow {
  display: none;
}

/* Inside the chip both halves take the chip's ink; the name is the one in
 * caps, the way an event's title sits beside its hour. */
.band-time .band-name {
  color: inherit;
  font-weight: 600;
  text-transform: uppercase;
}

/*
 * On the orange fields the chip cannot be orange at full strength — but it
 * cannot be the button's green either.
 *
 * It was Green-800, which is exactly the fill of the CTA sitting a few
 * hundred pixels below it in the same viewport: two dark green pills on one
 * orange field, one of them a label and one of them the only thing on the
 * page you are meant to press. Orange-800 is dark enough to hold Green-50 at
 * 8:1 and keeps the chip in the accent's family the way the event bar beside
 * it does. (The button has since left green too, for the paper: SER-323.)
 */
.hero .band-time,
.close .band-time {
  background: var(--orange-800);
  color: var(--green-50);
}

/* On the forest ground the bar comes up the ramp: Orange-500 against
 * Green-800 is the one pairing in the palette that vibrates. */
.performance .band-body {
  border-left-color: var(--orange-400);
}

/*
 * Removed: the now line.
 *
 * A day view has exactly one, and drawn the way the app draws it — a
 * two-pixel accent rule ending in the wordmark's own filled "o" — it was the
 * page borrowing nothing it did not already own. Three things ended it.
 *
 * It was a frozen clock. The page is static, so "agora" was set at half past
 * eleven and stayed there: a time the page states and cannot mean.
 *
 * It had nowhere to stand. Every block is now as tall as its booking and
 * full, so a rule across the page at any fixed offset lands on a paragraph
 * in one band, a table in the next, a diagram in the third; measured against
 * all seven there is no offset that clears them.
 *
 * And it collided with the availability panel's own ruler, which is the
 * collision that panel was reframed to end.
 */


/* Under the narrow breakpoint the gutter is a fifth of the screen for one
 * label, so the day simply starts at the margin. */
@media (max-width: 48rem) {
  .page-landing main > section > .inner {
    grid-template-columns: minmax(0, 1fr);
    background-image: none;
  }

  .spine {
    display: none;
  }

  /*
   * And so does the bar (SER-323). It kept its 3px down the left of every
   * block with the inset taken away, so each line of text ran flush against
   * it. Without the hour column beside it the bar marks no event in a day,
   * so the block is simply its words, with the chip lined up on them.
   */
  .band-body {
    grid-column: 1;
    padding-left: 0;
    border-left: 0;
    background-image: none;
  }

  .band-time {
    left: 0;
  }
}

/*
 * One rhythm, everywhere, on the 8px scale: eyebrow, 12, headline, 24,
 * lede, 64, the thing itself; 160 between bands. It was measured at
 * 200/150/180 before, which is what "roughly" looks like from a distance.
 */
.page-landing h2 {
  margin: 0 0 var(--s3);
  font-size: clamp(1.9rem, 1rem + 2.4vw, 2.9rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

/*
 * The deck's headline signature, measured off the slide rather than guessed
 * at: "sincronize gratuito" (node 410:27338) is Google Sans Flex SemiBold
 * against ExtraLight Italic, both 96px, both lower case.
 *
 * An earlier note here claimed the family shipped no italic axis and set the
 * turn as Light against Medium with no slope. That was wrong twice over: the
 * variable font carries a `slnt` axis from 0 to −10, and the file vendored
 * here had simply been instanced down to `wght` alone, which threw the slope
 * away. It is re-subset with both axes now, so this is the real pairing and
 * not a synthesised oblique.
 *
 * Lower case is the deck's, too — every headline on those sixty slides is
 * set that way, and the only capitals in one are proper nouns.
 */
.page-landing h1 strong,
.page-landing h2 strong {
  font-weight: 600;
}

.page-landing h1 em,
.page-landing h2 em {
  color: inherit;
  font-style: oblique 10deg;
  font-weight: 200;
}

/*
 * The section headings carry the turn a little heavier than the hero does.
 *
 * The deck sets this pair at 96px, where ExtraLight has enough stem to hold
 * a line. The section headings run at 49, and a weight chosen for 96 goes
 * thin there — thinnest of all on the orange and sage fields, where the
 * ground is closest in value to the ink. Same axis, one stop up, only where
 * the type is small enough to need it.
 */
.page-landing h2 em {
  font-weight: 300;
}

/*
 * The turn stays on the line.
 *
 * It was given a line of its own so the pair could not break mid-phrase.
 * That solved a wrapping problem and created a worse one: a lighter, sloped
 * half sitting under the bold half reads as a subtitle, not as the second
 * half of a sentence, and the deck's device is one sentence in two weights.
 * `balance` keeps the lines even without cutting the phrase in two, which is
 * what the line break was actually for.
 */
.page-landing h1,
.page-landing h2 {
  text-wrap: balance;
}

/* Grotesk, not mono. The mono belongs to the calendar's own chrome — hours,
 * day names, the time on an event — and spending it on six section labels
 * as well made it a texture instead of a signal. */
/* The deck's legal-note voice, doing the job it does there: small, upper
 * case, tracked +5%. */
/*
 * Green-800 on the light fields, not a darkened orange.
 *
 * The accent had to be walked down its own ramp to stay legible — Orange-700
 * on paper, Orange-800 on sage — and what comes out at the far end is
 * #995200 and #663600, which are browns. Three muddy near-oranges spent on
 * labels also cost the accent its meaning: orange should say "act" and "now"
 * and nothing else. On the forest fields it comes back up the ramp, because
 * there it is the only warm thing in the frame and the deck sets headlines
 * in it (410:15275).
 */
.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--heading);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.note {
  color: var(--text);
  font-size: 0.94rem;
}

.band-head {
  max-width: 44rem;
  margin-bottom: var(--s6);
}

.band-head .lead {
  margin-bottom: 0;
}

.band-foot {
  max-width: 44rem;
  margin: var(--s4) 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

/* ---- Hero ------------------------------------------------------------ *
 *
 * The deck opens on orange.
 *
 * Its cover is a field of #ff8800 with the product sitting on it, and this
 * page reached that only in its last block — so the first screen was paper,
 * the calmest surface the brand owns, and the loudest thing about Cuco
 * arrived five thousand pixels late. The ground is the brand's now, and the
 * dark product frame on it is the contrast the deck gets for free.
 *
 * As on the closing band, the values are pinned: this pairing is the same
 * in a dark scheme as in a light one, because it is the brand's pairing and
 * not the reader's preference.
 */
.hero {
  --heading: var(--green-800);
  --text: var(--green-800);
  /* Mixing the ink towards the orange it sits on gives a muddy olive that
   * measures 3.53:1 on this ground. On a field this saturated there is no
   * "quieter" ink to be had — the type is the ink or it is illegible. */
  --muted: var(--green-800);
  --canvas: var(--green-50);
  --surface: var(--green-50);
  --border: var(--green-800);
  --rule: color-mix(in srgb, var(--green-800) 26%, transparent);
  /* The button's lift, at its light-scheme value in both. */
  --cast-deep: rgba(42 60 46 / 0.2);

  background: var(--accent);
  color: var(--green-800);
}

/* The masthead belongs to the field, not to a cream strip above it, and the
 * wordmark cannot be orange on orange.
 *
 * The colour has to reach the window edge: the masthead is the page's
 * reading column, so painting its own box left a band of orange with paper
 * either side of it, which reads as a container bug rather than a field. */
/* No rule under it. It was there to stop the tiled field reading as a seam
 * where it began; the field is a band at the foot of the hero now, the orange
 * runs unbroken from the masthead to it, and a line across that is a line
 * across nothing. */
/*
 * And it stays at the top of the window (SER-323).
 *
 * Scrolled past the hero, a reader looking for the download said "tá ali
 * tudo, mas cadê?": everything was on the page except the way to start. The
 * masthead carries that button, so it stays on screen, at the field's colour
 * over every band. A step shorter than the document pages' masthead, since
 * it now stands over the page the whole way down.
 */
.page-landing > header {
  /* Pinned, like the hero's values: the button's lift on the field. */
  --cast-deep: rgba(42 60 46 / 0.2);

  position: sticky;
  top: 0;
  padding-block: var(--s2);
  background: var(--accent);
  box-shadow: 0 0 0 100vmax var(--accent);
  clip-path: inset(0 -100vmax);
}

/* A jump from the masthead's index stops below it rather than under it. */
html:has(> body.page-landing) {
  scroll-padding-top: var(--masthead);
}

.page-landing > header .sign {
  fill: var(--green-800);
}

.page-landing > header a {
  color: var(--green-800);
}

/*
 * The ask, in the one colour nothing else at the top wears (SER-323).
 *
 * Both buttons were Green-800, and so were the wordmark beside the first,
 * the section index and the ninety-six pixel headline above the second. A
 * reader's eye went to the big green shapes first and found the button
 * last. Green-50 is the page's paper, and on the orange field it is the one
 * light object, lifted off the ground by the page's own shadow, with the
 * ink kept for its words. Specific enough to beat `.page-landing > header
 * a`, which paints every link in the masthead Green-800.
 */
.page-landing > header .masthead-cta a {
  background: var(--green-50);
  box-shadow: 0 6px 16px -6px var(--cast-deep);
  color: var(--green-800);
}

.page-landing > header .masthead-cta a:hover {
  background: #ffffff;
}

/* On this ground the product frame takes the ink, not the accent: an orange
 * hairline on an orange field is not a frame. */
.hero .app-frame {
  border-color: var(--green-800);
}

/* The masthead's costume, at the hero's size. */
.hero .button {
  background: var(--green-50);
  box-shadow: 0 10px 24px -10px var(--cast-deep);
  color: var(--green-800);
}

.hero .button:hover {
  background: #ffffff;
  color: var(--green-800);
}

.page-landing main > section.hero::after {
  background: color-mix(in srgb, var(--green-800) 26%, transparent);
}


.hero > .inner {
  padding-top: var(--s8);
  padding-bottom: var(--s12);
}

.hero .band-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s8);
}

@media (min-width: 62rem) {
  /* The same 1.5/2.2 the other split bands use. At 1.15/2.4 the hero's
   * column was 358px, which set the page's opening paragraph on a
   * forty-character measure — the narrowest text on the page, in the one
   * place a reader has not yet decided to stay. */
  .hero .band-body {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.2fr);
    align-items: start;
    /* The rows stand at the top of the booking. Stretched, a headline
     * shorter than the band spread the difference between its own row and
     * the copy's, and opened eighty pixels under it (SER-323). */
    align-content: start;
    gap: 0 var(--s6);
  }
}

/*
 * The headline runs the full measure above the two columns, and the copy
 * and the week sit under it on the page's one split. Squeezed into the
 * left column it broke into five lines, two of them stubs; given its own
 * row it keeps the deck's three.
 */
.page-landing .hero h1 {
  grid-column: 1 / -1;
  max-width: 22ch;
  margin-bottom: var(--s6);
}

/*
 * On a short laptop screen the headline gives the window back (SER-323).
 *
 * On a 14" MacBook the window is about 860px tall, and two lines at 96px
 * were most of it: the button and the downloads sat at the fold, the
 * specification and the foot of the product under it, and the reader went
 * looking for the download. On a 16" the same page fitted, which is why the
 * size stays where the window is tall. Here the headline is set to the
 * window's height, small enough that the Portuguese and the Spanish run on
 * one line, and the copy and the week come up together under it.
 */
@media (min-width: 62rem) and (max-height: 60rem) {
  .page-landing .hero h1 {
    max-width: none;
    margin-bottom: var(--s4);
    font-size: clamp(3rem, 7.5vh, 4rem);
  }
}

/* Aligned to the foot of the product window, not to the top of it. The copy
 * runs out about two hundred pixels before the mock does, and hung from the
 * top that gap sat under the one button on the page anybody is meant to
 * press. */
/*
 * The two columns are named only where there are two.
 *
 * `grid-column: 1` and `grid-column: 2` sat outside the breakpoint, so on a
 * phone — where the block is a single column — the window claimed an
 * implicit second track, took its own 283px of it, and left the opening
 * paragraph three pixels wide: the page's first sentence set one word per
 * line, underneath the product it was describing.
 */
.hero-copy {
  /*
   * Under the headline, where it was written to be read.
   *
   * Centred against a 480px window it hung three hundred pixels below the
   * title it follows, with nothing in between — and a gap that size between
   * a promise and its explanation reads as a missing element, not as air.
   * The window is taller than the copy; that is what a window is. The space
   * belongs at the bottom of the column, beside it.
   */
  align-self: start;
}

@media (min-width: 62rem) {
  .hero-copy {
    grid-column: 1;
  }

  .hero .product {
    grid-column: 2;
  }
}

/*
 * The window runs off the right edge of the page.
 *
 * Stopped at the page margin it was a 660px picture on a 1440px field with
 * an empty quadrant beside it, and the events inside it were set at nine
 * pixels — the one thing the page has to prove, rendered too small to read.
 * Bled, it gains the margin and the gutter: about 130px of width, every
 * pixel of it spent on the grid. And a screen that runs off the edge is
 * what the deck does with every product shot it has — the view continues,
 * the page just stops showing it.
 */
@media (min-width: 62rem) {
  .hero .product {
    margin-right: calc(
      -1 * (var(--gutter) + max(0px, (100vw - var(--page)) / 2))
    );
  }

  /* No corner on the edge it runs off. */
  .hero .app-frame {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/*
 * Subordinate on purpose. The masthead already carries the wordmark, and
 * two marks of different construction in one viewport read as two brands —
 * so this one is small chrome rather than a second lockup. It stays because
 * it is the image an OAuth reviewer checks the app's identity against.
 */
.wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--s3);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-logo {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--chip);
}

.hero .lead {
  margin-bottom: 0;
  font-size: 1.2rem;
}

/* A step tighter than the bands' rhythm since the download row joined the
 * column (ENG-335): at the old spacing the copy outgrew the hero's
 * booking and pushed the 09:45 rule down the page. */
.hero .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  max-width: none;
  margin: var(--s4) 0 0;
}

.hero .note {
  max-width: 21rem;
}

/*
 * The week behind the headline: the product, flat.
 *
 * It was a perspective mockup — rotated, extruded, dropped on a soft
 * shadow, its blocks floating between the hour lines. For a product whose
 * whole promise is a precise grid, a hero that breaks the grid argues
 * against it. So: square to the reader, hairline rules, every block snapped
 * to an hour and a day, overlaps drawn as the two halves a calendar
 * actually splits a clash into.
 */
/* Ends on the same right edge as the masthead CTA and every band below it.
 * Bleeding it past the margin gave the page two right edges.
 *
 * It sets no hour height of its own any more. One `--slot` governs every
 * calendar on the page, so the hero week, the problem week and the closing
 * day are the same instrument at the same scale — four components at four
 * scales is how a self-referential system stops locking. */
/*
 * The product, in the product's own colours.
 *
 * This was a pale schematic on pale paper: three washed-out chips per day on
 * white, which is nobody's calendar and certainly not this one. The app is
 * dark with orange, on every slide of the deck that shows it, so the one
 * frame on the page that stands for the app is dark too — a lit window on
 * the paper rather than a diagram of one. It keeps these values in both
 * colour schemes, because it is a picture of the product, not a surface of
 * the page.
 */
/*
 * The frame around the product: a hairline in the accent, and the app's own
 * toolbar across the top.
 *
 * Without them the mock was a black rectangle lying on the paper. The deck
 * always gives the app an outline and a piece of its own chrome, which is
 * what makes it read as a window onto something running rather than as a
 * diagram someone drew of it.
 */
.app-frame {
  --surface: #16180f;
  --heading: var(--green-50);
  --muted: #8d9384;
  --border: #2c3026;

  overflow: hidden;
  /* A little room under the last row. The grid ended flush against the
   * frame's inner edge, which is indistinguishable from a view that has been
   * cut off — and a product window that looks cut off is the page arguing
   * against itself. Nothing was actually clipped; it just read that way. */
  padding-bottom: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  /* The same corner the three crops get. Four product frames on one page
   * cornered two different ways read as two products. */
  border-radius: var(--card);
}

.app-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-bar-mark {
  width: 0.95rem;
  height: 0.95rem;
  fill: var(--accent);
}

.app-bar-title {
  color: var(--heading);
  font-weight: 600;
}

.app-bar-key {
  margin-left: auto;
  color: var(--muted);
}

.app-bar-key kbd {
  min-width: 1.2rem;
  padding: 0.05rem 0.3rem;
  font-size: 0.62rem;
}

.product-week {
  --surface: #16180f;
  --heading: var(--green-50);
  --muted: #8d9384;
  --border: #2c3026;
  --rule: rgba(228 236 223 / 0.1);

  position: relative;
  display: grid;
  /* Wide enough for a twelve-hour clock: "8:00 AM" wrapped in a gutter cut
   * for "08:00", which made the English mock fifteen pixels taller than the
   * others and pushed that page's hero past the slot it is booked for. */
  grid-template-columns: 3.2rem 3.2rem repeat(5, minmax(0, 1fr));
  grid-template-rows: 2.1rem repeat(14, var(--slot));
  background-color: var(--surface);
}

/* At this value the wash carries the hue instead of bleaching it, so an
 * event reads as its account at a glance. */
.product-week .pv {
  background: color-mix(in srgb, var(--ev) 30%, var(--surface));
  border-color: color-mix(in srgb, var(--ev) 70%, transparent);
}

/* The grid lines, drawn from the day column onwards so the hour gutters
 * stay clear — the same construction the calendars below use. */
.product-week .corner {
  grid-area: 1 / 1 / -1 / 3;
}

.product-week .day {
  grid-row: 1 / -1;
  grid-column: calc(var(--d) + 2);
  padding: 0.65rem 0 0 0.45rem;
  border-left: 1px solid var(--border);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--slot) * 2 - 1px),
    var(--rule) calc(var(--slot) * 2 - 1px),
    var(--rule) calc(var(--slot) * 2)
  );
  background-position: 0 2.1rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The day number, on the same line as the name.
 *
 * Stacked under it, it fell out of the 2.1rem header row and into the first
 * half-hour — so on every day that starts at 08:00 the number was covered by
 * the event and only Tuesday and Thursday were dated. */
.product-week .day b {
  margin-left: 0.35rem;
  color: var(--heading);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pv-hour {
  grid-column: 1;
  grid-row: calc(var(--s) + 2);
  padding-right: 0.4rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-align: right;
  white-space: nowrap;
  transform: translateY(-0.5em);
}

/* The second zone, set back a step so the reader's own clock stays the one
 * they read first. Opacity used to blend the already-muted ink down to
 * #575c4f on #16180f (2.60:1) at the narrow layout. Use a distinct, measured
 * ink instead: it remains secondary and clears WCAG AA at 4.72:1. */
.pv-hour.tz {
  grid-column: 2;
  color: #7f8578;
}

.pv-zone {
  grid-row: 1;
  align-self: end;
  padding: 0 0.35rem 0.45rem 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  text-align: right;
}

.z1 { grid-column: 1; }

.z2 {
  grid-column: 2;
  color: #7f8578;
}

/*
 * An event, not a colour field. The gutters are what make it read as a
 * calendar: fill the cell edge to edge and seven days of blocks become a
 * colour chart.
 */
/*
 * An event, with the hour it starts and the account it belongs to. An
 * unlabelled block of colour is a mosaic; this is the screen the headline
 * beside it is promising.
 */
/* The same recipe as a full-size event, one size down: the calendar's
 * colour washed into the surface, a solid spine, a hairline in the hue. */
.pv {
  display: block;
  overflow: hidden;
  grid-column: calc(var(--d) + 2);
  grid-row: calc(var(--s) + 2) / span var(--n);
  margin: 1px 4px 1px 2px;
  padding: 2px 5px;
  background: color-mix(in srgb, var(--ev) 20%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ev) 55%, transparent);
  border-left: 3px solid var(--ev);
  border-radius: var(--chip);
  color: var(--heading);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.28;
}

.pv-t,
.pv-a {
  display: block;
}

.pv-t {
  font-weight: 500;
  opacity: 0.8;
}

/*
 * Wraps the way a calendar wraps, and is clipped by the block if it must be.
 *
 * It truncated with an ellipsis instead, and at 105px a column that put one
 * on nearly every event in the week: "Reunião de equi…", "Entrega do proje…",
 * "Almoço com a A…". A product mock is the page's evidence that the product
 * works, and a screen where most of the titles are cut off mid-word is
 * evidence of the opposite — the reader does not know whether the app does
 * that or the page does. Real day views wrap the title into the height the
 * event has, and every block here is at least two slots tall.
 *
 * Breaking is still word-by-word: `break-word` used to split "Consulta"
 * across two lines as "Consult / a", which is the one thing a mock cannot do.
 */
.pv-a {
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow-wrap: normal;
}

/*
 * The now line, and the disc that ends it.
 *
 * The identity is circles — the wordmark's letters and the mark are both
 * unions of them — so the marker on the time axis is the wordmark's own
 * filled "o", not a triangle or a pin. It is the one piece of product
 * chrome the brand can claim outright.
 */
.now {
  grid-column: 3 / -1;
  grid-row: calc(var(--s) + 2);
  align-self: start;
  height: 2px;
  margin-top: -1px;
  background: var(--accent);
}

.now::before {
  content: "";
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.26rem 0 0 -0.28rem;
  background: var(--accent);
  border-radius: 50%;
}

/* And the mark itself on the one event the reader is meant to create. */
.event-mark {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.45rem;
  vertical-align: -0.15em;
  fill: var(--accent);
}

/*
 * The wordmark used to sign the page off here, on its own line of paper
 * between the last band and the footer. The orange field above now carries
 * it at pattern scale, and two wordmarks a hundred pixels apart is one
 * wordmark too many — so the field is the sign-off.
 */
/* The same tracked sans as the account names beside the availability bars.
 * "GOOGLE" was set in the mono here and in the sans there — the same word,
 * for the same account, in two faces on one page. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  /* A step up from the label size. It names the three accounts the week
   * above it is drawn in, which is the hero's whole claim, and at 11px it
   * was the smallest type on the page carrying the largest idea. */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* On the frame's own foot, inside its chrome, with the frame's ink. */
.app-frame .legend {
  margin: 0;
  padding: 0.5rem 0.75rem 0.2rem;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* A miniature of the thing it labels, not a solid swatch. A legend whose
 * chips look nothing like the chips in the grid is a legend that has to be
 * decoded twice. */
.legend li::before {
  content: "";
  width: 1.1rem;
  height: 0.8rem;
  background: color-mix(in srgb, var(--ev) 30%, #16180f);
  border: 1px solid color-mix(in srgb, var(--ev) 70%, transparent);
  border-left: 3px solid var(--ev);
  border-radius: var(--chip);
}

/* ---- A day view ------------------------------------------------------ */

/*
 * A day view.
 *
 * The columns are days and the rows are half hours, both real: the same
 * grid that draws the rules places the cards, so the hour in the gutter and
 * the hour on the card cannot come apart. Rows are exactly one slot tall —
 * not `minmax(slot, auto)` — because a row that stretches to fit a
 * paragraph is a calendar where nine o'clock is wherever the copy ended.
 */
.week {
  position: relative;
  display: grid;
  grid-template-columns: var(--hour-gutter) repeat(var(--days), minmax(0, 1fr));
  grid-auto-rows: var(--slot);
  column-gap: var(--s2);
  transform-style: preserve-3d;
}

/*
 * A week with no ruler of its own.
 *
 * The problem band used to draw its own hour column, 08:00 to 16:00, right
 * beside the page's rail — two time axes at two different scales, a foot
 * apart, and a reader has to work out which one the cards are on. There is
 * one clock on this page. The cards keep the stamp printed on them, the way
 * an event in a calendar carries its own time, and the column they stand in
 * still places them by that hour.
 */
.week.bare {
  grid-template-columns: repeat(var(--days), minmax(0, 1fr));
}

.week.bare .event {
  grid-column: var(--d);
}

.days1 { --days: 1; }
.days2 { --days: 2; }
.days3 { --days: 3; }
.days7 { --days: 7; }

.week .corner {
  grid-area: 1 / 1;
}

.week .day {
  grid-row: 1;
  grid-column: calc(var(--d) + 1);
  padding-bottom: 0.75rem;
  color: var(--heading);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.week .hour {
  grid-column: 1;
  grid-row: calc(var(--s) + 2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  transform: translateY(-0.55em);
}

/* The hour lines, drawn in the grid rather than behind it. */
.week .rule {
  grid-column: 1 / -1;
  grid-row: calc(var(--s) + 2);
  align-self: start;
  height: 1px;
  background: var(--rule);
}

/* And the day columns, so the three-column structure is felt, not implied. */
.week .day::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  bottom: 0;
  margin-left: calc(-1 * var(--s2) / 2 - 1px);
  border-left: 1px solid var(--rule);
}

.week .day.d1::before {
  display: none;
}

.d1 { --d: 1; }
.d2 { --d: 2; }
.d3 { --d: 3; }
.d4 { --d: 4; }
.d5 { --d: 5; }
.d6 { --d: 6; }
.d7 { --d: 7; }

.s0 { --s: 0; }
.s1 { --s: 1; }
.s2 { --s: 2; }
.s3 { --s: 3; }
.s4 { --s: 4; }
.s5 { --s: 5; }
.s6 { --s: 6; }
.s7 { --s: 7; }
.s8 { --s: 8; }
.s9 { --s: 9; }
.s10 { --s: 10; }
.s11 { --s: 11; }
.s12 { --s: 12; }
.s13 { --s: 13; }
.s14 { --s: 14; }
.s15 { --s: 15; }
.s16 { --s: 16; }
.s17 { --s: 17; }
.s18 { --s: 18; }
.s19 { --s: 19; }

.n1 { --n: 1; }
.n2 { --n: 2; }
.n3 { --n: 3; }
.n4 { --n: 4; }
.n5 { --n: 5; }
.n6 { --n: 6; }
.n7 { --n: 7; }
.n8 { --n: 8; }

/* ---- One event ------------------------------------------------------- */

/*
 * One event, one rendering — here and in the week behind the headline.
 *
 * The page used to draw the same object two ways: small filled blocks up in
 * the hero, and white cards with a coloured header bar under a soft drop
 * shadow down here. Two languages for the device the whole page is built
 * on, and the shadow was the only soft edge on a page made of hairlines.
 *
 * This is the single rule now, and it holds at both sizes: the calendar's
 * colour washed into the surface, a solid spine down the left, a hairline
 * in the same hue, no shadow.
 */
.event {
  position: relative;
  grid-column: calc(var(--d) + 1);
  grid-row: calc(var(--s) + 2) / span var(--n);
  overflow: hidden;
  background: color-mix(in srgb, var(--ev) 20%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ev) 55%, transparent);
  border-left: 3px solid var(--ev);
  border-radius: var(--chip);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .event {
    transition: background-color 160ms ease;
  }

  .event:hover,
  .event:focus-within {
    background: color-mix(in srgb, var(--ev) 30%, var(--surface));
  }
}

/*
 * An all-day event: the strip directly under the day names, spanning every
 * day it covers. It is the one card whose height is its content rather than
 * a duration, because "all day" has no duration to be.
 */
.event.allday {
  grid-row: 2;
  grid-column: calc(var(--d) + 1) / span var(--sp, 1);
  height: max-content;
}

.sp1 { --sp: 1; }
.sp2 { --sp: 2; }
.sp7 { --sp: 7; }

/* A week-wide band has no hours, so its rows are sized by what is in them. */
.week.allday-week {
  grid-auto-rows: auto;
}

/* No filled header bar: the same time-then-title stack the hero blocks use,
 * one size up. */
.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
  max-width: none;
  margin: 0;
  padding: 0.7rem 1.15rem 0;
  color: var(--heading);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.event-day {
  font-weight: 700;
}

.event-time {
  opacity: 0.85;
}

.event-tag {
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentcolor;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
}

/* A real step between title and body: 1.3rem semibold over 0.95rem grey,
 * not 17px bold over 15px grey, which was barely a step at all. */
.event-title {
  margin: var(--s2) 1.15rem var(--s1);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.18;
  text-wrap: balance;
}

.event-body {
  margin: 0 1.15rem var(--s2);
  color: var(--text);
  font-size: 0.95rem;
}

.event > .availability,
.event > .actions,
.event > .note {
  margin-inline: 1.15rem;
}

.event > :last-child {
  margin-bottom: 0.85rem;
}

/*
 * The event colours, from the Figma "Events Colors" collection.
 *
 * `--ev` is the calendar's own colour — the spine, the hairline, and the
 * wash the event sits on. `--ev-shade` is the same colour a step darker.
 *
 * Nothing here is a text colour any more. An event's words are always
 * `--heading` on a 14% wash of `--ev`, which is one rule instead of nine
 * and clears contrast on every hue in the set, including the two that had
 * no legible label when they were filled solid.
 */
.ev-blue {
  --ev: var(--ev-blue);
  --ev-shade: #4a9cc4;
}

.ev-green {
  --ev: var(--ev-green);
  --ev-shade: var(--green-800);
}

.ev-green-light {
  --ev: var(--ev-green-light);
  --ev-shade: var(--green-400);
}

.ev-orange {
  --ev: var(--ev-orange);
  --ev-shade: var(--orange-300);
}

.ev-orange-dark {
  --ev: var(--ev-orange-dark);
  --ev-shade: var(--orange-800);
}

.ev-yellow {
  --ev: var(--ev-yellow);
  --ev-shade: #d4bc00;
}

.ev-red {
  --ev: var(--ev-red);
  --ev-shade: #99302f;
}

.ev-purple {
  --ev: var(--ev-purple);
  --ev-shade: #62326c;
}

/* Not a calendar colour: the brand's own, kept for the one thing on the
 * page that is asking for something. */
.ev-accent {
  --ev: var(--accent);
  --ev-shade: var(--orange-600);
}

/* ---- Inside the booking event ---------------------------------------- */

/*
 * The diagram the whole section rests on, so it is given the room to be
 * read: taller bars, and each account's row in that account's own colour —
 * the same blue, green and purple as the week behind the headline.
 */
/*
 * A `<figure>` carries a 40px inline margin in the browser's own stylesheet,
 * and setting only `margin-top` leaves it there. So the one diagram on the
 * page — the thing the whole section is about — stood forty pixels to the
 * right of every other element in the column, for no reason anybody chose.
 */
/*
 * Clear of the now line.
 *
 * The panel's top edge landed within a pixel or two of the 11:30 rule, so
 * the page's own clock read as the panel's top border — an orange frame on
 * three sides and a line on the fourth. A now line belongs in the space
 * between two blocks, which is where this puts it.
 */
.availability {
  margin: var(--s5) 0 0;
}

/*
 * Time runs down, here as everywhere else on the page.
 *
 * The diagram was four horizontal bars under a ruler reading 08:00 to 20:00,
 * inside a page whose own hours run vertically down a rail — two clocks in
 * one frame, pointing at right angles, and the reader has to work out which
 * axis they are on twice per screen. Turned upright it is the view the
 * product actually draws: three accounts side by side as columns, the hours
 * down the left, and the busy time falling where it falls.
 *
 * The scale is not the page's 540px hour and does not pretend to be — this
 * is twelve hours seen at a distance, which is what an overview of a day is
 * for. What matters is that there is one direction for time on the page.
 */
/*
 * And it is a panel, with its own edge.
 *
 * Turned upright, the diagram's ruler — 08:00 to 20:00 over twelve hours —
 * ended up sixty pixels from the page's own rail, which runs 10:45 to 13:00
 * over the same stretch of screen. Two columns of hour numbers at two scales
 * side by side is worse than the two directions were. The hero has the same
 * problem and solves it the way the product does: the mock's hours live
 * inside a frame, so nobody reads them as the page's. This is that frame.
 */
.avail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s2);
  padding: var(--s2) var(--s3) var(--s3);
  /*
   * Opaque, so the page's own hour rules stop where the panel starts.
   *
   * The band's grid was showing through it, which put the page's 12:00 line
   * across the panel at the height its own ruler calls 14:00 — the two
   * clocks disagreeing in writing, inside the one element on the page whose
   * job is to be read as a clock. A day view masks its grid behind anything
   * standing on it; so does this.
   */
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--card);
}

.availability ul {
  display: grid;
  /* Three accounts, then the answer they add up to — given half a column
   * more, because it is the row the section is actually about. */
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.availability li {
  display: grid;
  grid-template-rows: 2.4rem minmax(0, 1fr);
  gap: 0.4rem;
  /* Three quarter-hours of the page's own unit: tall enough that a
   * half-hour block is a block rather than a tick. */
  min-height: calc(var(--quarter) * 3);
}

/* Not a fourth account. It is set off by its own edge and the extra width,
 * the way a total is set off from the numbers above it. */
.availability .free-row {
  padding-left: var(--s2);
  border-left: 1px solid var(--border);
}

/* Sitting on the top of its own column, not floating above it. */
.availability .strip-label {
  align-self: end;
}

/*
 * On a phone the four columns are forty-five pixels each, and a tracked-out
 * uppercase "OUTLOOK" is sixty-four — every label was running into the one
 * beside it. Sentence case with the tracking off fits, and the label row
 * takes the four lines the longest of them needs.
 */
@media (max-width: 48rem) {
  .avail {
    gap: var(--s1);
    padding: var(--s2);
  }

  .availability ul {
    gap: var(--s1);
  }

  .availability li {
    grid-template-rows: 3rem minmax(0, 1fr);
  }

  .availability .strip-label {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .availability .free-row {
    padding-left: var(--s1);
  }
}

/* Account names, not times. */
.strip-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.free-row .strip-label {
  color: var(--heading);
  font-weight: 600;
}

/*
 * Busy time as bars, not a grid of squares.
 *
 * Twenty-four separated cells per row read as a contribution graph — a
 * motif borrowed from somewhere else entirely. With the gap closed, the
 * contiguous half-hours fuse into the solid blocks a calendar actually
 * draws, and the row is one continuous timeline.
 */
.strip {
  display: grid;
  grid-template-rows: repeat(24, 1fr);
  overflow: hidden;
  background: var(--track);
  border-radius: var(--chip);
}

.strip > span {
  background: transparent;
}

/*
 * The account's colour, at full strength.
 *
 * It was mixed 78% into `--surface` so the bars would match the wash on the
 * chips above them. That reasoning was right and the result was wrong,
 * because `--surface` is not one colour: inside the product frame it is
 * #16180f and out here on paper it is Green-50. The same token therefore
 * produced a dark chip in the hero and a pale sage bar in the diagram — one
 * account, two palettes, and three pale bars that were hard to tell apart
 * from each other at a glance. Undiluted, Google, Outlook and Apple are the
 * same three colours wherever they appear.
 */
.strip > .busy {
  background: var(--ev);
}


.strip > .free {
  background: var(--accent);
}

/*
 * The strip's own clock, said out loud. Twenty-four squares inside a card
 * that sits in a 09:00–12:30 gutter were two different time axes in one
 * frame, and nothing on the page said which one the squares were on.
 */
.axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: none;
  /* Level with the tops of the columns, not with their labels. */
  margin: 2.8rem 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-align: right;
}

/* The first and last hour sit on the strip's own ends, so the numbers name
 * the edges of the twelve hours rather than floating half a line off them. */
.axis span:first-child {
  margin-top: -0.5em;
}

.axis span:last-child {
  margin-bottom: -0.5em;
}

/*
 * The result row is taller, and that is the key.
 *
 * There was a legend under the chart saying which colour meant busy and
 * which meant free, because the chart inverts its own semantics halfway
 * down: on the three account rows a filled cell is a busy hour, and on the
 * fourth it is a free one. But the legend needed a swatch for "busy", busy
 * is drawn in three colours, and a fourteen-pixel square split three ways is
 * not a swatch — it is a smudge. Two critics read it as one.
 *
 * So the fourth column says it itself: wider than the accounts beside it,
 * in the accent, behind its own edge. It is not a fourth account, and set
 * apart like that nobody reads it as one.
 */

.availability figcaption {
  margin-top: var(--s3);
  color: var(--muted);
  font-size: 0.9rem;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s4);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

/*
 * No rule over the steps.
 *
 * "A grid of columns with a hairline over each" is the page's most repeated
 * object: the four problems, these three steps and the five features all
 * wore it, three times in six thousand pixels, and three critiques running
 * have read the page as one skeleton stamped seven times. The features grid
 * is an index and the rules are what make it scannable; the problems are
 * rows and the rules separate them. These three are a sequence, already
 * numbered and already in their own columns, and the rule was the only
 * thing making them look like a third grid.
 */
.steps li {
  padding-top: var(--s2);
}

.step-number {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--s1);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/*
 * Removed: the step marker cut from the wordmark.
 *
 * Every letter in "cuco" is a circle with a quarter taken out of it, and the
 * marker on the time axis is already the filled "o". These are the same
 * circle turned a quarter at a time, so the three steps read as one shape
 * rotating rather than three bullets bought in.
 *
 * At ten pixels it was a bullet: nobody reads a decorative dot as a letter,
 * and the one place the page could have played with the mark at a size worth
 * seeing was spent on punctuation. Thirty-eight, which is the height of the
 * number beside it — the shape and the step are the same size, and the turn
 * from one step to the next is now legible as a turn.
 *
 * And it is the letter, not its negative. A filled quarter-disc is a pie
 * slice, which appears nowhere in the file; the letter is the disc with a
 * quarter taken *out* of it, which is how every glyph in "cuco" is drawn and
 * how the deck sets them by the dozen on 410:18826. The clip removes one
 * quadrant, and the three steps turn it a quarter at a time.
 *
 * At 38px, though, it read as a pie slice beside a number: a progress dial,
 * which is a chart shape and not a letter, whichever file it was cut from.
 * The numerals count the steps on their own.
 */

/* All three in the same orientation. They turned a quarter per step, which
 * looked like progression and was not: a letter has one orientation, and
 * three different rotations of the "c" are three different glyphs, none of
 * which says "step two". The number beside it is what counts the steps. */

.steps h3 {
  font-size: 1.15rem;
  letter-spacing: -0.015em;
}

.steps p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

/*
 * The expired-link notice, beside the steps rather than inside them.
 *
 * It was numbered 04, which made "the link lapsed and somebody tried it" a
 * thing the reader was being told to do. It is not a step; it is what Cuco
 * does after the last one, so it is set as an aside on the same rule the
 * steps stand on.
 */
/* The rule runs the section's width, not the paragraph's. As a `<p>` it was
 * capped at the reading measure, so the line above it reached 544 of the
 * 1153 the three steps span — a rule that stops halfway reads as one that
 * failed to draw. */
.aside {
  max-width: none;
  margin: var(--s4) 0 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--accent);
  color: var(--muted);
  font-size: 0.98rem;
}

.aside span {
  margin-right: 0.7rem;
  color: var(--heading);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- What Cuco does -------------------------------------------------- *
 *
 * Not a calendar. Six features are six features; stamping each one with an
 * invented hour asked the reader to skip a timestamp six times. A dense,
 * ruled grid instead — which is also what the copy beside it is promising.
 */

/*
 * Sage, the deck's fourth ground.
 *
 * It was on the problem band and came off on the argument that the deck has
 * only three grounds. That was wrong, and checkable: slide 410:25424 is a
 * full-bleed Green-300 field. What was wrong on the problem band was the
 * choice, not the colour — a quiet sage under four sentences about things
 * going badly. Here it separates two paper bands that were running into each
 * other, and the feature grid's hairlines have a ground to sit on.
 */
/* The heading sits closer to the index it heads, for the same eight pixels
 * and the same reason as the gap inside the grid. */
.features .band-head {
  margin-bottom: var(--s5);
}

.features {
  --muted: color-mix(in srgb, var(--green-800) 88%, var(--green-300));
  --border: color-mix(in srgb, var(--green-800) 34%, var(--green-300));
  --rule: color-mix(in srgb, var(--green-800) 22%, transparent);

  background: var(--green-300);
  color: var(--green-800);
}


@media (prefers-color-scheme: dark) {
  /* The sage field does not invert — there is no dark sage in the file — so
   * the band keeps a light ground in a dark scheme and every ink in it has
   * to be told so. Left to the scheme's own tokens the headings came out
   * Green-100 on Green-200: 1.22:1, which is a band nobody can read.
   * The "who made it" band stands on the same field (SER-323). */
  :root:not([data-theme="light"]) .features,
  :root:not([data-theme="light"]) .about {
    --heading: var(--green-800);
    --text: var(--green-800);
    --muted: color-mix(in srgb, var(--green-800) 76%, var(--green-300));
    --border: color-mix(in srgb, var(--green-800) 34%, var(--green-200));
    --ground: var(--green-200);

    background: var(--green-200);
    color: var(--green-800);
  }
}

/*
 * Composition varies from here down. Every band used to run the same
 * script — mono eyebrow, heading left, 540px paragraph, full-width thing —
 * which left the right half of six heading rows empty and made the page one
 * template repeated. The heading sits beside its content here, the
 * performance band is a tinted full-width line, and the platforms band puts
 * its specification opposite its heading.
 */
/*
 * Copy on the left, the thing itself on the right — in every band, not
 * two of them.
 *
 * Stacking the heading above the artefact left the right half of four
 * sections empty, which is how roughly 40% of the page came to be bare
 * ground. For a reader who scans, that is not restraint; it is scrolling
 * they did not need to do.
 */
@media (min-width: 62rem) {
  /* 1.5/2.2, not 1.15/2.4: at the narrower ratio the closing column was
   * 358px, and the page's largest headline — the one that has to close the
   * argument — broke over four lines and left "depois." on the last one by
   * itself. */
  /*
   * A tight row gap, with the wider spacing put back where it is wanted.
   *
   * At a uniform 48 the first row was the booking chip, so the chip floated
   * 64px above its own heading — its 16px margin plus the gap — while in the
   * five bands whose block is not a grid it sat at 16. The same element at
   * two different distances from the thing it labels, decided by how the
   * section underneath happened to be built. `row-gap` cannot be set for one
   * row, and a negative margin only cancels the item's own margin, not the
   * gap; so the gap goes down to the chip's spacing and the three rows that
   * wanted air ask for it themselves.
   */
  /*
   * The shortcuts band was put in here and taken back out.
   *
   * It and the problem band are the page's two forest fields, built the same
   * way, and a critique called them twins — so the sheet was set beside its
   * heading instead of under it. Rendered, that is worse on three counts a
   * ruler can confirm: the heading breaks over four lines of 51px ExtraLight
   * Italic with "agora" alone on the last, five of the twelve bindings wrap
   * onto a second line so the sheet stops scanning across, and the band ends
   * with 180px of bare forest. The reason it looked promising — the sheet is
   * the densest thing on the page — is the reason it fails: dense things want
   * the full measure. The twinning is answered where it costs nothing, in
   * the rules over the grids.
   */
  .scheduling .band-body,
  .platforms .band-body,
  .close .band-body {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.2fr);
    gap: var(--s2) var(--s6);
    align-items: start;
  }

  /*
   * The problem band is not one of those.
   *
   * Split into a 1.15/2.4 bay it gave the heading a 226px column and the
   * four sentences a 453px one, with the plate field taking what was left —
   * three narrow strips, none of them wide enough to be read comfortably.
   * The heading runs over the top at its own measure and the pains sit under
   * it in two columns, which is the whole point of shortening them.
   */

  .scheduling .availability,
  .scheduling .steps,
  .close .close-card {
    margin-top: var(--s5);
  }

  /* The closing band's platforms and feedback line run across both of its
   * columns, under the heading and the card (SER-398). */
  .platforms-block,
  .close .band-foot {
    grid-column: 1 / -1;
  }

  /*
   * The heading rides along.
   *
   * In a two-column band the copy runs out long before the diagram beside
   * it does, so the left column spent three hundred pixels being blank
   * while the reader was still working through the thing it introduces.
   * Sticky, it stays with what it is describing — and the blank becomes the
   * margin it always was rather than a hole.
   */
  .close .band-head {
    position: sticky;
    top: var(--s5);
    margin-bottom: 0;
  }

  /*
   * The closing block packs to the top of its booking.
   *
   * A grid whose rows are `auto` shares the leftover height between them, so
   * a band booked longer than its content spends the difference as gaps: 161
   * pixels of bare orange opened between the download buttons and the
   * credits it held then, and 137 more under them. Two holes read as a layout that
   * came apart; one slack tail at the foot of an event reads as the rest of
   * the time it is booked for, which is what it is.
   */
  .close .band-body {
    align-content: start;
  }


  /*
   * The tail of a band belongs to the page, not to the right column. Store
   * links and footnotes indented to the artefact column read as centred on a
   * page whose every other line starts at the left margin.
   */
  .scheduling .aside {
    grid-column: 1 / -1;
  }

  /*
   * The booking screen fills the copy column instead of adding its own row.
   *
   * It sat under the availability diagram, in the same column, which put
   * three hundred and ninety pixels of screenshot on the band's total height
   * while the column beside it — heading, one paragraph — was empty from the
   * lede down. Same page, same evidence, two hundred and fifty pixels
   * shorter, and neither column is now half air.
   */
  /* Every row is named. The band's printed hour is the grid's first item and
   * spans both columns, so auto-placement pushed it past the diagram's
   * explicit rows and took the heading with it — the section opened on a bar
   * chart with its own title four hundred pixels below. */
  /* Rows renumbered from one. The chip used to be row 1 of this grid; now
   * that it stands outside the flow, leaving the rows where they were left
   * an empty first row and its gap under the chip — sixteen pixels this band
   * had and no other. */
  .scheduling .band-head {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 40rem;
  }

  /*
   * The booking screenshot came out of this band.
   *
   * The section makes one argument — free means free once every account is
   * counted — and the diagram above makes it completely: three accounts'
   * busy hours, and the exact complement of their union derived underneath.
   * A screenshot of the resulting list of times is the same claim in a
   * weaker form, and it cost four hundred pixels of a section that was
   * already the longest on the page by half. The product is still shown
   * twice: the week in the hero, and the birthday panel.
   */

  /*
   * The diagram runs the whole measure.
   *
   * It is the clearest thing on the page — three accounts' busy hours and the
   * exact complement of their union underneath, derived rather than drawn —
   * and it was set in a 610px column with 11px labels, which is footnote
   * size for the one picture that explains the headline feature.
   */
  .scheduling .availability {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /*
   * The three steps stand beside the screen they describe.
   *
   * Across the full measure they were three columns of two lines each under
   * four hundred pixels of screenshot, and the band ran to two and a half
   * hours on the rail for a section with one diagram, one screen and three
   * sentences in it. Stacked in the diagram's column they fill the row the
   * screenshot opens, and the band loses four hundred pixels without losing
   * anything that was on it.
   */
  .scheduling .steps {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s5);
    margin-top: var(--s2);
  }

  .scheduling .aside {
    grid-row: 4;
  }

  /* The dark band is one column: title across the top, sheet beneath, at
   * the full measure the sheet needs. */
  .performance .band-head {
    max-width: 46rem;
    margin-bottom: var(--s5);
  }

  /* The one band that was three columns of text over a hundred pixels of
   * air over three pills. Specification and downloads share the row. */
  .platforms .stores {
    grid-column: 2;
    margin-top: var(--s5);
  }

  .performance .band-foot {
    margin-top: var(--s4);
  }
}

/*
 * The one band that is not a heading beside a diagram.
 *
 * Five consecutive sections built from the same left-copy / right-artefact
 * bay is one template repeated five times, and a reader who scans reads the
 * second one and stops. This band drops the split: the heading runs the full
 * measure as a rule over the top, and the features below it are a wide index
 * — six columns of one line each, which is how this reader wants a feature
 * list, rather than six paragraphs stacked two-up beside 500px of nothing.
 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  /*
   * Tighter between the rows than across them.
   *
   * In Spanish this grid stood six pixels past the band's booking and pushed
   * every hour below it six pixels down the rail — a page whose argument is
   * that the times are right may not miss its own in one language out of
   * three. Sixteen pixels come off the two vertical gaps, which is also the
   * one part of this band three critiques have called airy.
   */
  gap: var(--s4) var(--s5);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

/*
 * Three across, and the one with a screen in it stands the screen beside the
 * sentence rather than under it.
 *
 * Eight features since SER-323 (four came in, Pix went out): on six columns
 * the seven without a screen take spans of two, three to a row, and the
 * birthday card takes the four columns left beside the seventh, so no row
 * ends in a hole. Stacked, the birthday panel — a portrait crop — came out
 * 470px tall at full column width and set the height of the whole grid by
 * itself; beside its own paragraph it is 230px of legible product and the
 * row is as tall as its text.
 */
@media (min-width: 62rem) {
  .feature-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .feature-grid > li {
    grid-column: span 2;
  }

  .feature-grid > li.has-shot {
    display: grid;
    /* 17rem, not 20: the screen was taking 320 of the card's 556 and leaving
     * the sentence beside it 204, which broke "Evento de aniversário" over
     * three lines. The screen is still the widest thing in the row. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
    /*
     * Named rows, so the two cards agree on where a title sits.
     *
     * The screen spans all three, which makes the grid at least as tall as
     * the screen — and with rows sized `auto`, the leftover was shared out
     * between them. The two screens are different heights, so the two cards
     * shared out different amounts and the titles landed 24px apart. The
     * first two rows take what they need and the third absorbs the rest.
     */
    grid-template-rows: auto auto 1fr;
    grid-column: span 4;
    gap: 0 var(--s3);
    /* `start`, not the default. Stretched to the height of the screen beside
     * them, the three text rows spread themselves top, middle and bottom —
     * a name, a floating title and a paragraph pinned to the floor, which is
     * a card that looks broken rather than composed. */
    align-content: start;
    align-items: start;
  }

  .feature-grid > li.has-shot .feature-shot {
    grid-row: 1 / span 3;
    grid-column: 2;
    /* Wide enough to read: at 14rem the type inside a panel was seven
     * pixels tall, which proves nothing and is worse than no screen. */
    max-width: 17rem;
    margin-top: 0;
  }

}

/* Hairline, not an orange rule. Nine accent rules down one page and the
 * accent had stopped meaning "this is the thing to act on". */
.feature-grid li {
  padding-top: var(--s2);
  border-top: 1px solid var(--heading);
}

/*
 * The feature's own name, so the grid can be found in rather than read
 * through — in the page's sans, not the mono.
 *
 * The deck sets these labels in Google Sans (410:15368); the mono belongs to
 * the clock. Spending it on six feature names as well made two different
 * kinds of metadata look like the same kind, and put mono on a third of the
 * small type on the page.
 */
.feature-key {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/*
 * Screens of the product, not drawings of it.
 *
 * Crops from the brand deck: the booking page beside the section that claims
 * it, and the birthday panel on the feature it belongs to.
 * They are the only evidence here that was not drawn in CSS, which is the
 * whole reason to spend the bytes — and everything personal came off them
 * before they were encoded.
 */
.shot {
  margin: 0;
}

/*
 * One frame for every screen of the product.
 *
 * There were four treatments: the hero built in HTML, the booking page at
 * 337px, the birthday panel at 190px, and the Pix panel — the only light
 * one — with a black edge. Four frames read as four sources.
 *
 * The strokes and radii differ *inside* the crops, because they were cut
 * from three different slides and no amount of CSS reaches in there. What
 * CSS can do is give all three the frame the deck gives a screen: the dark
 * panel, a one-pixel Orange-500 stroke, radius twelve — the same frame the
 * hero's own product window carries, so all four read as one product.
 *
 * A forest mat with a hairline border was tried here and it was an invention:
 * no slide in the deck sets a screen in a thick coloured surround, and at
 * feature size it turned two crops into 200px stamps floating in green.
 */
.shot img,
.feature-shot {
  background: #16180f;
  border: 1px solid var(--accent);
  border-radius: var(--card);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot figcaption {
  margin-top: var(--s2);
  color: var(--muted);
  font-size: 0.88rem;
}

/* Sized to sit beside the copy, not to fill the column: at full width the
 * booking screen alone was 930px tall and pushed its band past two and a
 * half hours on the rail. */
.shot-booking {
  max-width: 21rem;
}

/* Under the diagram, in the diagram's column and its row: the bars explain
 * the arithmetic and the screen shows what comes out of it. In a row of its
 * own the screen added its whole height to the band while the copy column
 * beside it sat empty. */
.shot-booking {
  margin-top: var(--s5);
}

.feature-shot {
  display: block;
  width: 100%;
  /* No smaller than the booking screen beside it: at 190px the type inside
   * these panels was seven pixels tall and the crop proved nothing. */
  max-width: 21rem;
  height: auto;
  margin-top: var(--s3);
}

.feature-grid h3 {
  margin: 0 0 var(--s1);
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}

.feature-grid p {
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

/*
 * Four grounds, in the deck's order.
 *
 * Six of the eight bands were paper, one dark, one orange — which is a page
 * with an accent sprinkled on it rather than the deck's rhythm of paper →
 * sage → dark → orange. For a reader who scans rather than reads, the
 * ground is the navigation: the sage band is the problem, the dark band is
 * the shortcuts, the orange band is the ask.
 */
/*
 * Sage, not a slightly tired paper.
 *
 * `--surface-sunk` is #e4ecdf against a #f1f6ef ground — thirteen units
 * apart, which reads as a screen calibration fault rather than a decision.
 * Green-200 is the deck's sage and is unmistakably a different surface.
 */
/*
 * The problem, on the deck's own field.
 *
 * It was Green-300 — a token in the file, and still the wrong one: the deck
 * never uses a mid green as a surface. Its three grounds are paper, forest
 * and orange, and every one of the sixty slides is one of those. A fourth
 * surface invented here read as a tint of the paper rather than as a
 * decision, and the Green-100 card standing on it very nearly disappeared.
 *
 * Forest, then, with slide 410:15275's plates on the right: the one page in
 * the deck that is pure identity, used where the page is describing a
 * problem rather than a feature and has nothing else to show.
 */
.pains {
  --muted: color-mix(in srgb, var(--green-50) 76%, var(--green-800));
  /* The hour ticks in the gutter are drawn in `--rule`, which is ink on
   * paper. On a forest ground they were being drawn in the ground. */
  --rule: color-mix(in srgb, var(--canvas) 20%, transparent);

  background: var(--heading);
  color: var(--canvas);
}

.pains h2,
.pains h3 {
  color: var(--canvas);
}

.pains .lead,
.pains .pain-list p {
  color: color-mix(in srgb, var(--canvas) 78%, transparent);
}

.pains .spine {
  color: color-mix(in srgb, var(--canvas) 60%, transparent);
}

.pains .band-body {
  border-left-color: var(--orange-400);
}

/*
 * Four sentences, as four sentences.
 *
 * They were four cards booked into a two-day grid, each stamped with an hour
 * — "SEG 08:00 – 11:00" — that no reader has and the page had invented to
 * fill a slot. Precision about nothing is the clearest tell there is that a
 * layout was assembled rather than written, and it cost four hundred pixels
 * to make. Two columns, hairline between, numbered: the density this reader
 * likes, and not one fact more than the copy actually holds.
 */
.pain-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 var(--s6);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pain;
}

/*
 * The title takes two lines' room whether it needs one or two, so the four
 * descriptions in a row start on the same line.
 *
 * Sized to its own content, a one-line title let its paragraph ride twelve
 * pixels higher than a two-line one, and four cards on a grid with the body
 * text at two different heights read as four cards laid out separately. A
 * `min-height` on the heading was the obvious fix and the wrong one: `2lh`
 * resolves against the heading's own line-height, which is larger here than
 * the two lines actually occupy, so it made the short titles the tall ones.
 * The row is what has to be fixed, not the thing in it.
 */
.pain-list li {
  display: grid;
  /* One column: the mono 01–04 came off. The steps of the booking flow are
   * numbered three hundred pixels below this list, and the same counter
   * twice in one screenful is the kit showing. */
  grid-template-columns: minmax(0, 1fr);
  /* 2.8rem clears a two-line title and its margin by a pixel; the padding
   * comes down to pay for the row, so fixing the alignment costs the band
   * nothing on the rail. */
  grid-template-rows: 2.8rem auto;
  gap: 0 var(--s2);
  padding: var(--s2) 0;
  border-top: 1px solid color-mix(in srgb, var(--canvas) 24%, transparent);
}

.pain-list h3 {
  margin: 0 0 var(--s1);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.pain-list p {
  max-width: none;
  margin: 0;
  font-size: 0.95rem;
}

/* Two columns across the whole measure. The block used to give forty per cent
 * of its width to a field of letterforms standing on the right; that came out
 * with the page's second brand crop, and the sentences took the room. */
@media (min-width: 62rem) {
  .pain-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * The two bands that pin their own inks have to be told what those inks are
 * in a dark scheme as well, or they keep the values that were chosen for a
 * light one and print dark text on a dark ground.
 *
 * The forest band inverts here — its ground is `--heading`, which is pale in
 * a dark scheme — so its secondary ink has to come down from the dark, the
 * opposite of what it does in the light.
 */
@media (prefers-color-scheme: dark) {
  /* Both forest bands invert here — their ground is `--heading`, which is
   * pale in a dark scheme — so their secondary ink has to come down from the
   * dark, and their orange has to come up the ramp until it clears a pale
   * ground. Orange-200 plates on pale paper would be invisible. */
  :root:not([data-theme="light"]) .pains,
  :root:not([data-theme="light"]) .performance {
    --muted: color-mix(in srgb, var(--green-800) 76%, var(--green-100));
  }

  /* Not `.band-name`: it lives inside the booking chip now and takes the
   * chip's own ink. Painted Orange-800 here it was a dark orange on the
   * chip's Orange-500 — 4.19:1, a label the chip was hiding. */
  :root:not([data-theme="light"]) .pains .eyebrow,
  :root:not([data-theme="light"]) .performance .eyebrow {
    color: var(--orange-800);
  }

  :root:not([data-theme="light"]) .plates {
    color: var(--orange-300);
  }

  :root:not([data-theme="light"]) .pains .band-body {
    border-left-color: var(--orange-800);
  }

  /* No blanket orange for the band name here. This rule used to paint every
   * one of them Orange-400 and, sitting last, it beat the per-band rules
   * above — so the two fields that invert to a *light* ground in a dark
   * scheme got orange on pale green: 1.68:1 and 1.38:1. The name takes the
   * band's own ink, and the two forest fields override it above. */

  /* Orange-700 is the step that clears 4.5:1 on paper. On the dark canvas it
   * measures 3.18:1, so the label comes up the ramp instead of down. */
  :root:not([data-theme="light"]) .aside span {
    color: var(--orange-400);
  }
}

/* ---- Performance and platforms --------------------------------------- */

/*
 * The one dark band on the page. It was a tint four percent off the ground
 * colour, which looked like a rendering artefact rather than a decision.
 */
.performance {
  /* The paper-derived muted ink measures 1.87:1 on this ground. Secondary
   * text on a dark field has to come down from the light, not up from the
   * dark. */
  --muted: color-mix(in srgb, var(--green-50) 76%, var(--green-800));
  --rule: color-mix(in srgb, var(--canvas) 20%, transparent);

  background: var(--heading);
  color: var(--canvas);
}

.performance h2,
.performance .points {
  color: var(--canvas);
}

/*
 * The eyebrow is orange in every band — at the step of the orange ramp that
 * clears 4.5:1 on the ground it sits on.
 *
 * Orange-500 is the page's accent and works on paper, but it measures
 * 1.30:1 on the sage and would vanish; on the forest ground it needs to
 * come up rather than down. One hue, three steps, each one a token in the
 * file: that is a rule, where "cream on the dark band" was an exception.
 */
.performance .eyebrow,
.pains .eyebrow {
  color: var(--orange-400);
}

.performance .spine {
  color: color-mix(in srgb, var(--canvas) 60%, transparent);
}

.performance .lead,
.performance .band-foot {
  color: color-mix(in srgb, var(--canvas) 76%, transparent);
}

.performance .band-foot {
  margin-top: var(--s3);
}


/*
 * Keys, not adjectives. Three phrases divided by hairlines asked this
 * reader to take "vários atalhos de teclado" on faith; these are the
 * bindings, and they can be checked in about a second.
 *
 * Set as rows rather than a wrapping line: a keyboard reference is a table
 * everywhere this reader has ever seen one, and one row per binding fills
 * the column the headline stands in instead of leaving the dark band half
 * empty under a single line of keycaps.
 */
/*
 * The keyboard sheet runs the full measure, in three columns.
 *
 * Squeezed into the right half of a two-column band it was fifteen rows in
 * two uneven stacks with the other half of the block empty, under a title
 * broken across six lines in a 330px measure. This is the densest, most
 * on-audience thing on the page; it should be the widest.
 */
/*
 * Three columns, so fifteen bindings are five even rows.
 *
 * `auto-fit` gave four columns on a wide screen, which is fifteen items in
 * sixteen cells: a hole in the bottom right of the densest table on the page,
 * under a headline promising a dense interface. Three divides.
 */
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0 var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 62rem) {
  .points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
 * No rule under every binding.
 *
 * Twelve of the page's thirty-odd hairlines were here, one per row, and a
 * reference table does not need a line between rows that are already aligned
 * in three columns — the alignment is the structure. The page has one system
 * of lines now, and it is the hours.
 */
.points li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  /* One line each, and the same line height whether the binding is "C" or
   * "Ctrl Z": rows of different heights across three columns break the one
   * thing a reference table is for, which is scanning across it. */
  min-height: 2.1rem;
  padding: 0.42rem 0;
}

.keys {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
}

kbd {
  min-width: 1.5rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid currentcolor;
  border-radius: var(--chip);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
}

/* The keys line up in a column of their own, so the sheet scans down the
 * bindings the way a reference sheet is read. */
.points .keys {
  justify-content: flex-end;
  min-width: 5.2rem;
}

.keys-does {
  font-size: 0.88rem;
  opacity: 0.82;
}

/*
 * Every platform, before the footer (SER-398).
 *
 * The five pills sat beside the closing card, orange on orange, and some
 * readers never saw them there. Here they are a block of their own across
 * the band, centred under a label, over the rule the credits used to have.
 * Positioned so the hero's jump can land on its middle (`.platforms-anchor`).
 */
.platforms-block {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  text-align: center;
}

.platforms-block .eyebrow {
  margin: 0 auto;
}

.platforms-block .stores {
  justify-content: center;
}

/* The feedback line closes the band under the block, on its axis. */
.close .band-foot {
  margin-inline: auto;
  text-align: center;
}

/*
 * Where "Other platforms" lands: the list's middle, stopped half of what
 * shows under the masthead below it (the page's scroll padding is the
 * masthead), so the pills arrive in the middle of the screen at any height
 * the list wraps to. A jump to `#platforms` itself still stops under the
 * masthead, as an old link expects.
 */
.platforms-list {
  position: relative;
}

.platforms-anchor {
  position: absolute;
  top: 50%;
  scroll-margin-top: calc((100svh - var(--masthead)) / 2);
}

.stores li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* Four terms, four columns. At an 11rem minimum only three fitted the card,
 * so "Preço / Grátis" — the row added last, and the one a reader is most
 * likely to be looking for — sat alone on a second line under three others. */
.platform-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--s4);
  margin: 0;
}

.platform-rows dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.platform-rows dd {
  margin: var(--s1) 0 0;
  color: var(--heading);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* The store links are the second most important action on the page, so
 * they are the size of one. They were 12px outlined pills. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

/*
 * Downloads are links, not buttons.
 *
 * Three outlined pills of equal weight put "Web" — which is the same action
 * as the button beside it — in the costume of an app store, and gave the
 * page three competing calls to action where it has one. The stores are
 * where you fetch it; the button is what you do. Set as the small mono
 * voice the rest of the page's metadata uses, with the detail line the
 * markup already carried finally visible.
 */
.stores {
  gap: var(--s2) var(--s4);
}

.store {
  display: inline-block;
  padding: 0.55rem 1.3rem;
  border: 1px solid currentcolor;
  border-radius: 999px;
  color: var(--heading);
  text-decoration: none;
}

.store:hover {
  background: var(--heading);
  color: var(--canvas);
}

/* The "open in / download on" line is what the button already means. Set
 * above the label it made a two-storey pill that read as unfinished. */
.store-detail {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.store-label {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* An old Windows install's update link lands on its entry in the list below
 * the masthead: the page's scroll padding leaves that room for every jump
 * (SER-323), so the list adds none of its own. "Other platforms" lands on
 * `.platforms-anchor` instead (SER-398). */

/*
 * The download for the visitor's own system (ENG-335).
 *
 * Under the line that says how to start. Every system's link is in the
 * markup; the Worker names the visitor's system on the landing body
 * (`os-windows` and the rest, apps/edge/src/worker.js) and only that one
 * shows, with "other platforms" beside it for a wrong guess. With no system
 * named the row is the App Store and Google Play, and "other platforms" is
 * the way to the desktop apps.
 *
 * After `.store`, which would otherwise show every hidden link again.
 */
/* The two badges side by side on a 360px phone too: at the wider gap Google
 * Play dropped under the App Store there. */
.get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  max-width: none;
  margin: var(--s2) 0 0;
}

/* The row's type, which the consent banner's buttons share (consent.css). */
.get .store {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/*
 * Drawn as store badges (SER-323): the store's mark, its "Baixar na" over
 * its name, on a filled tile. The outlined pill read as one more line of
 * text, and a reader on a 14" screen looked for the download with it in
 * view. The tile is the page's ink rather than the stores' black, and its
 * corner is the badge's, tighter than the pills around it.
 */
/* The list of platforms before the footer draws the same badges (Tiemy, on
 * SER-398): as outlined pills some readers never saw them. The web, which
 * has no store, carries a globe. */
.get .get-app,
.platforms-block .store {
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.6rem;
  padding: 0.45rem 0.95rem 0.45rem 0.8rem;
  background: var(--green-800);
  border: 0;
  border-radius: 10px;
  color: var(--green-50);
  line-height: 1.15;
}

.get .get-app:hover,
.platforms-block .store:hover {
  background: var(--green-700);
  color: var(--green-50);
}

.get .store-mark,
.platforms-block .store .store-mark {
  grid-row: 1 / span 2;
  width: 1.45rem;
  height: 1.45rem;
  fill: currentcolor;
}

/* The list's pills hid this line; a badge prints it, as a store's does. */
.get .store-detail,
.platforms-block .store .store-detail {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.get .store-label,
.platforms-block .store .store-label {
  font-size: 1.05rem;
}

/* After `.store`, whose `inline-block` would otherwise stack the mark over
 * the words. Not in the hero's rule: there `.get-app` decides what shows.
 * Found by its place, not a class of its own: the release verifiers read the
 * Ubuntu link's class attribute as it is. */
.platforms-block .store {
  display: inline-grid;
  /* The block centres its row; a badge's words start at the mark. */
  text-align: start;
}

.get-app {
  display: none;
}

.get-ios,
.get-android {
  display: inline-grid;
}

:is(.os-windows, .os-android, .os-ios, .os-linux) .get-app {
  display: none;
}

.os-windows .get-windows,
.os-android .get-android,
.os-ios .get-ios,
.os-linux .get-linux {
  display: inline-grid;
}

/*
 * A link that looks like a secondary button under the pointer (SER-398).
 *
 * Underlined text alone read as a sentence, not as the way to every other
 * platform. Under the pointer or the keyboard it takes the outlined pill the
 * page's secondary buttons are. The pill is drawn around the words, taking
 * no room of its own: as padding it pushed the words off the badges' left
 * edge and, in English, off the badges' row, and made the hero taller than
 * its booking. Its sides stop short of the badge beside it (the row's gap
 * is `--s2`).
 */
.get-other {
  position: relative;
  color: var(--heading);
  font-size: 0.94rem;
}

.get-other::before {
  content: "";
  position: absolute;
  inset: -0.4rem -0.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
}

.get-other:hover,
.get-other:focus-visible {
  text-decoration: none;
}

.get-other:hover::before,
.get-other:focus-visible::before {
  border-color: currentcolor;
}

/* With a pointer, the pill is the focus ring too: the page's outline around
 * the words inside it drew two rings. Twice as thick under the keyboard as
 * under the pointer, so focus reads at a glance. On a touch screen the pill
 * is always there and the outline stays the sign of focus. */
@media (hover: hover) {
  .get-other:focus-visible {
    outline: none;
  }

  .get-other:focus-visible::before {
    border-width: 2px;
  }
}

/* A touch screen has no pointer to hover with, so the pill shows from the
 * start. On a phone the link wraps under the badges, to the page's left
 * edge, where a pill drawn outside the words would reach the screen's: here
 * it is the link's own padding and border, the words inside it. */
@media (hover: none) {
  .get-other {
    padding: 0.55rem 1.1rem;
    border: 1px solid currentcolor;
    border-radius: 999px;
    text-decoration: none;
  }

  .get-other::before {
    content: none;
  }
}

/* ---- Who made it ---------------------------------------------------- *
 *
 * The person behind Cuco, second on the page (SER-323). A reader deciding
 * whether to trust an app with their calendars meets her before the
 * argument starts. On the features' sage ground, so the orange hero is
 * followed by a quieter field and the forest of the problem band after it.
 */
.about {
  --muted: color-mix(in srgb, var(--green-800) 88%, var(--green-300));
  --border: color-mix(in srgb, var(--green-800) 34%, var(--green-300));
  --rule: color-mix(in srgb, var(--green-800) 22%, transparent);

  background: var(--green-300);
  color: var(--green-800);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
}

.about .lead {
  max-width: 36rem;
  margin: 0;
}

.about .lead + .lead {
  margin-top: var(--s3);
}

/* Two facts, set as the hero's specification is: a label and a value. */
.about-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
  margin: var(--s5) 0 0;
}

.about-rows dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-rows dd {
  margin: var(--s1) 0 0;
  color: var(--heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.about-rows i {
  font-style: oblique 10deg;
}

/* Her site is there for whoever wants more, not as a second ask. */
.about-more {
  margin: var(--s4) 0 0;
  font-size: 0.88rem;
}

.about-more a {
  color: var(--muted);
  text-decoration-color: color-mix(in srgb, currentcolor 45%, transparent);
}

.about-photo {
  margin: 0;
}

.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--green-800);
  border-radius: var(--card);
}

.about-photo figcaption {
  margin-top: var(--s2);
  color: var(--muted);
  font-size: 0.88rem;
}

/* Beside the words where there is room; on a phone the face comes first,
 * at a size that leaves the words in the same screen. */
@media (min-width: 62rem) {
  .about-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 0 var(--s8);
    align-items: start;
  }
}

@media (max-width: 62rem) {
  .about-photo {
    order: -1;
  }

  .about-photo img {
    max-width: 16rem;
  }
}

@media (max-width: 34rem) {
  .about-rows {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- The disclosure -------------------------------------------------- *
 *
 * Compliance prose, set as compliance prose. It used to be a floating card
 * two thirds of the way down the page, which gave a privacy essay the same
 * weight as the product. It reads as the footnote it is now.
 */

/*
 * The token, not the property.
 *
 * `padding-block` here overrode the padding and left `--band-pad` alone, and
 * the hour axis is hung off `--band-pad`: the spine cancels the band's top
 * padding with a negative margin of exactly that size. With the two out of
 * step by eight pixels the 16:00 mark landed 592px after 15:00 and 608 before
 * 17:00 — the one thing an hour axis may not do. Setting the token moves the
 * padding and the axis together.
 */
.page-landing main > section.trust > .inner {
  --band-pad: var(--s4);
}

.sheet {
  padding-top: var(--s2);
}

.sheet h2 {
  margin-bottom: var(--s3);
}

.sheet-lead {
  max-width: 44rem;
  margin-bottom: var(--s4);
  color: var(--text);
  font-size: 1rem;
}

.sheet-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: var(--s2);
  padding: var(--s2) 0;
  border-top: 1px solid var(--border);
}

/* The same small tracked-out label as every other one on the page. It had
 * its own size, weight and tracking, which made three mono treatments for
 * one job. */
/*
 * One label voice on the page, and the mono is not it.
 *
 * The mono belongs to the clock: the hour rail, the booking chip, a keycap,
 * the axis under the availability bars. It had spread to the section
 * eyebrows, these table terms, the platform terms, the credit labels and the
 * account names beside the bars — and then the feature names moved to the
 * sans, which left the page running two different kinds of small label at
 * once, in two different faces, for the same job. Sans, tracked, upper case,
 * everywhere the label is a word rather than a number.
 */
.sheet-rows dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/*
 * A measure, not the full band.
 *
 * These ran 1130px — about 150 characters a line, twice a readable one, in
 * the section a reader is most likely to be reading carefully. It was capped
 * at `68ch` already and the cap did nothing: `.sheet p { max-width: none }`
 * sat below it and outranked it, so the widest text on the page was set that
 * way by a rule written to stop exactly that.
 */
.sheet .sheet-lead,
.sheet-rows dd {
  max-width: 40rem;
}

.sheet-rows dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.sheet-more {
  margin: var(--s3) 0 0;
  font-size: 0.9rem;
}

/* ---- Creating the next event ----------------------------------------- */

/*
 * The deck's own field, at the page's last moment.
 *
 * Slide 410:18502 is a full bleed of #ff8800 with the wordmark blown up
 * past every edge in #ffcf99 and the type over it in #2f4125 — three colours
 * this palette already holds, in a construction the page was not using. The
 * whole landing page was one ground with an accent sprinkled on it, which is
 * how a brand with a very loud house style ends up looking like anyone's.
 *
 * `slice` is doing the work: the wordmark is drawn far larger than the band
 * and cropped by it, so the shapes read as pattern rather than as a logo
 * placed in a corner.
 */
/*
 * The field does not follow the reader's colour scheme.
 *
 * `#ff8800` with `#2f4125` over it is the brand's own pairing, and it is the
 * same pairing on a dark slide as on a light one. Left to the semantic
 * tokens, dark mode turned the type pale and put near-white on orange, which
 * is both off-brand and under four-to-one. So the band pins the brand values
 * for everything inside it, and the card, the button and the footnote all
 * resolve from those.
 */
.close {
  --heading: var(--green-800);
  --text: var(--green-800);
  --muted: var(--green-800);
  --canvas: var(--green-50);
  --surface: var(--green-50);
  --border: var(--green-800);

  background: var(--accent);
  color: var(--green-800);
}

/*
 * The wordmark running off the bottom of a band.
 *
 * Sunk by most of its own height, so what shows is the top of the letters
 * across the full measure — which is what every closing slide in the deck
 * does. The band clips it; nothing else has to.
 */
.bleed {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  /* About three fifths of the word, which is the deck's crop. Any less and
   * the round letters read as domes rather than as "cuco". */
  height: var(--bleed-h);
}

.bleed-accent {
  fill: var(--accent);
}

.bleed-peach {
  fill: var(--orange-200);
}

/*
 * Room for the bleed, so the last line of the band is clear of it.
 *
 * `--s6` was not room: it is 48px against a 216px mark, so the five credit
 * lines ran seventy-two pixels into the letterforms. They stayed legible,
 * because the reading column stacks above the pattern, but "legible on top
 * of" is not "clear of" — the deck's sign-off has nothing printed on it.
 * Specific enough to beat the shared band padding, which is what silently
 * ate the first attempt at this.
 */
/*
 * No room reserved for the sign-off any more: it is in the footer, and the
 * closing block runs to the end of its own booking like every other block.
 */

.close h2,
.close .lead,
.close .spine,
.close .band-foot,
.page-landing .close .band-foot a {
  color: var(--heading);
}

/* Orange on orange is not a link. */
.page-landing .close .band-foot a {
  text-decoration-color: color-mix(in srgb, var(--heading) 55%, transparent);
}

/* The card is the one light object on the field: the event you have not made
 * yet, sitting on the brand's own ground. */
/* The same corner as every other window on the page. It was the one square
 * card among four rounded ones. */
.close .event {
  border-radius: var(--card);
}

.close .event {
  position: relative;
  grid-column: auto;
  grid-row: auto;
  max-width: 27rem;
  background: var(--surface);
  border-color: var(--heading);
  border-left-color: var(--heading);
}

.close .event-meta,
.close .event-title {
  color: var(--heading);
}

.close .button {
  background: var(--heading);
  color: var(--canvas);
}

.close .button:hover {
  background: var(--green-900, #1f2c18);
}

.close .band-head {
  max-width: 38rem;
}

/* An event is the width of an event. Stretched across the whole right column
 * it was an 840px banner with a button pinned to its left edge and half a
 * metre of nothing after it. */
.close .week {
  max-width: 27rem;
}

/*
 * The specification moved to the hero, where the reader is when they are
 * deciding. Down here it stood five thousand pixels past the question.
 */
/* Two by two. At `auto-fit` the copy column takes three of the four terms
 * and drops "Preço / Grátis" onto a line of its own — the row a reader in a
 * hurry is most likely to be looking for, orphaned under the other three. */
.hero .platform-rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid color-mix(in srgb, var(--green-800) 30%, transparent);
}

/* Two lines of specification beside a paragraph is a table, and a table on
 * the opening field is set at the size of the words around it, not at a
 * heading's. */
.hero .platform-rows dd {
  font-size: 1rem;
}

/* The badges' row before the footer: the hero's gap between badges. */
.close .stores {
  gap: var(--s2);
  margin-top: var(--s3);
}

.close .actions {
  margin: var(--s2) 1.15rem;
}

.close .note {
  margin: 0 1.15rem;
}

/*
 * The wordmark is the best thing the brand owns, so it is the masthead
 * rather than a signature hidden at the bottom of the page.
 *
 * At 1.5rem it was 96px wide for four glyphs, and these glyphs are discs
 * with a bite taken out of them: at 24px across the bite closes up and the
 * word reads as four smudges. The deck never sets the wordmark small — every
 * appearance in those sixty slides is at least a third of the frame — so
 * this is the smallest it can be and still be the word.
 */
.sign {
  display: block;
  width: auto;
  height: 2.25rem;
  fill: var(--accent);
}

/* ================================================================== *
 * Narrow screens: the same week, one day at a time.
 * ================================================================== */

@media (max-width: 62rem) {
  .page-landing main {
    perspective: none;
  }

  .page-landing main > section > .inner {
    --band-pad: var(--s8);
  }

  .week {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    row-gap: var(--s2);
  }

  .week .corner,
  .week .hour,
  .week .rule,
  .week .day {
    display: none;
  }

  .event,
  .event.allday,
  .event.over {
    grid-column: 1;
    grid-row: auto;
    margin: 0;
    transform: none;
  }

  .product {
    transform: none;
  }

  .band-head {
    margin-bottom: var(--s4);
  }

  /* In one column the headline's margin and the grid's gap were both spent
   * between it and the paragraph under it: 112px that pushed the downloads
   * to a phone's fold (SER-323). */
  .page-landing .hero h1 {
    margin-bottom: var(--s2);
  }

  .hero .band-body {
    row-gap: var(--s6);
  }
}

@media (max-width: 34rem) {
  :root {
    --gutter: 1.25rem;
  }

  /* Not the data sheet: it has no surface of its own, and padded it set that
   * band's words 24px in from every other band's (SER-323). */
  .new-event {
    padding: var(--s3);
  }

  .availability li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .hero .note {
    max-width: none;
  }
}

/*
 * Someone who has asked their system for less movement gets the page with
 * the lift taken out. Nothing about the argument depended on it.
 */
@media (prefers-reduced-motion: reduce) {
  .page-landing main {
    perspective: none;
  }

  .event,
  .sheet,
  .product {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  a,
  .button,
  .store {
    transition: color 120ms ease, background-color 120ms ease,
      border-color 120ms ease;
  }
}