/*
 * The home page: the argument, the stage, the app, the others, the price.
 * The tokens and the shared parts are base.css. The phones are phone.css.
 */

/* ---------- The argument ---------- */

.argue {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.charge {
  display: grid;
  gap: 0.4rem;
  max-width: 47rem;
  color: var(--ink2);
  font-size: clamp(1.1875rem, 2.1vw, 1.875rem);
  line-height: 1.3;
}

.charge .turn {
  color: var(--ink);
  font-weight: 700;
}

/* The rule is the loudest thing on the site, and it changes with the habit,
   so it is sized by its longest line and never by the window alone: "no X."
   and "YouTube second." are both set whole, on one line each. A letter of
   this face at this weight is about half an em wide; 0.58 leaves room for
   the wide ones, and for a scrollbar the window's width does not know
   about. The script counts the letters. */
.rule {
  --second: 13;
  --first: 7;
  --measure: calc(min(100vw, var(--page)) - 2 * var(--gutter));
  display: grid;
  /* The script holds it at the tallest habit's height; the room left over
     goes under the lines, not between them. */
  align-content: start;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  font-size: min(11rem, calc(var(--measure) / (var(--second) * 0.58)));
  line-height: 0.88;
}

.rule span {
  display: block;
  white-space: nowrap;
}

.rule i {
  font-style: normal;
  color: var(--lava);
}

/* On a phone the first line is the larger, as large as it can be set. */
@media (max-width: 40rem) {
  .rule span:first-child {
    font-size: min(1.75em, calc(var(--measure) / (var(--first) * 0.58)));
  }
}

/* ---------- The stage ---------- */

.stage {
  padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 7vw, 5rem);
}

html:not(.js) [data-needs-script] {
  display: none;
}

.js [data-without-script] {
  display: none;
}

/* The habits, as one row of square keys. The one in hand is ink. */
.picker {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border: var(--rule) solid var(--ink);
  border-bottom: 0;
  background: var(--paper);
  scrollbar-width: none;
}

.picker button {
  flex: 1 0 auto;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  border: 0;
  border-right: var(--rule) solid var(--ink);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: 800 1.25rem/1 var(--display);
  letter-spacing: -0.02em;
  cursor: pointer;
}

.picker button:last-child {
  border-right: 0;
}

@media (hover: hover) {
  .picker button:hover {
    background: var(--paper2);
  }
}

.picker button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.picker button:focus-visible {
  outline-offset: -6px;
}

.floor {
  display: grid;
  border: var(--rule) solid var(--ink);
  background: var(--stage);
  color: var(--stage-ink);
  transition: background-color 400ms ease;
}

/* A habit met is the one place the hot colour goes. */
.stage.is-met .rock {
  background: var(--hot);
}

.rock {
  position: relative;
  overflow: hidden;
  --tall: 25rem;
  min-height: var(--tall);
  transition: background-color 400ms ease;
}

/* The still and the canvas are both the whole artboard, a square he fills
   a little over half of. The square is larger than the space it sits in
   and is placed by his middle, so he is large and what stands beside him
   is still in the picture. */
.rock .frame {
  position: absolute;
  left: 50%;
  top: 50%;
  /* And never so large that he outgrows the height he is given: he is a
     little over half the square, so the square is at most 1.55 of it. */
  width: min(54rem, 128%, calc(var(--tall) * 1.55));
  aspect-ratio: 1;
  /* A little left of his middle: what stands beside him stands on his
     left hand, the right of the picture. */
  transform: translate(-55%, -62%);
}

.rock img,
.rock canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rock canvas {
  transition: opacity 200ms ease;
}

.panel {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-top: var(--rule) solid var(--stage-ink);
}

.panel .label {
  color: var(--stage-ink2);
}

.figure {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.figure b {
  font: 800 clamp(5rem, 9vw, 8.5rem) / 0.85 var(--display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.figure span {
  color: var(--stage-ink2);
  font-size: 1.375rem;
  font-weight: 600;
}

.gauge {
  height: 1.375rem;
  border: var(--rule) solid var(--stage-ink);
  background: #f6f1e7;
}

.gauge i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--lava);
  transition: width 160ms ease-out;
}

.meter {
  display: grid;
  gap: 0.25rem;
}

.meter input {
  width: 100%;
  height: 2.75rem;
  margin: 0;
  accent-color: var(--lava);
  cursor: pointer;
}

.panel .button {
  justify-self: start;
}

.says {
  display: grid;
  gap: 0.6rem;
  min-height: 9.5rem;
  padding-top: 1.25rem;
  border-top: var(--rule) solid var(--stage-ink);
  align-content: start;
}

.says .line {
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.beside {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  align-content: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-top: var(--rule) solid var(--stage-ink);
}

.beside .phone {
  width: min(100%, 16rem);
}

.beside .caption {
  color: var(--stage-ink2);
}

@media (min-width: 64rem) {
  .floor {
    grid-template-columns: minmax(0, 1fr) 23rem 19rem;
  }

  .rock {
    --tall: 40rem;
  }

  .panel,
  .beside {
    border-top: 0;
    border-left: var(--rule) solid var(--stage-ink);
  }
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .floor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .rock {
    grid-column: 1 / -1;
    --tall: 30rem;
  }

  .beside {
    border-left: var(--rule) solid var(--stage-ink);
  }
}

/* Without the script there is no meter to drag, so the stances are laid
   out in a row and the page still shows what he does. */
.stances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--rule) solid var(--ink);
  border-top: 0;
  background: var(--stage);
  color: var(--stage-ink);
}

.stances li {
  display: grid;
  justify-items: center;
  padding-bottom: 1rem;
  overflow: hidden;
}

.stances img {
  width: 150%;
  max-width: none;
  margin-top: -25%;
}

.stances .label {
  color: var(--stage-ink2);
}

/* ---------- Three facts ---------- */

.facts .wrap {
  display: grid;
  gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
}

.facts p {
  padding-top: 1.1rem;
  border-top: var(--rule) solid var(--ink);
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.35;
}

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

/* ---------- In the app ---------- */

.inapp {
  padding-top: clamp(4rem, 10vw, 8rem);
}

.inapp h2 {
  max-width: 14ch;
  margin-top: 0.75rem;
}

.phones {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.phones figure {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  margin: 0;
}

.phones .phone {
  width: min(100%, 19rem);
}

.phones figcaption {
  padding-top: 1rem;
  border-top: var(--rule) solid var(--ink);
  color: var(--ink2);
}

.phones figcaption b {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ink);
  font-size: 1.25rem;
}

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

  /* The middle one stands a little lower, so the three read as a hand of
     cards and not a grid of features. */
  .phones figure:nth-child(2) {
    margin-top: 4rem;
  }
}

.more {
  margin-top: 2.5rem;
  font-weight: 700;
}

.more a {
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--lava);
}

/* ---------- The others ---------- */

.others {
  margin-top: clamp(4rem, 10vw, 8rem);
  padding-block: clamp(4rem, 8vw, 6.5rem);
  background: var(--night);
  color: var(--night-ink);
}

.others .label {
  color: var(--night-lava);
}

.others h2 {
  max-width: 20ch;
  margin-top: 0.75rem;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
}

.compare {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  overflow-x: auto;
}

.compare table {
  width: 100%;
  min-width: 69rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.compare th,
.compare td {
  padding: 1.25rem 1.1rem;
  border-top: 1px solid var(--night-hair);
  text-align: left;
  vertical-align: top;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--night-ink2);
}

.compare thead th {
  border-top: 0;
  font: 0.8125rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.compare tbody th {
  width: 17rem;
  padding-left: 0;
  color: var(--night-ink);
  font-size: 1.125rem;
  font-weight: 700;
}

.compare thead th:first-child {
  width: 17rem;
}

/* Ahonui's column is a strip of paper through the slab. */
.compare .us {
  border-top-color: rgba(23, 23, 26, 0.18);
  background: #f6f1e7;
  color: #17171a;
  font-weight: 700;
}

.others .small {
  margin-top: 1.5rem;
  color: var(--night-ink2);
}

.small {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ---------- The price ---------- */

.price {
  padding-top: clamp(4rem, 10vw, 8rem);
}

.price .wrap {
  display: grid;
  gap: 3rem clamp(2rem, 6vw, 5rem);
}

.offer {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  justify-items: start;
}

.offer .say {
  max-width: 35rem;
  color: var(--ink2);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.45;
}

.offer .small {
  max-width: 35rem;
  color: var(--ink2);
}

.plan {
  display: grid;
  gap: 0.4rem;
  padding-block: 1.25rem 1.75rem;
  border-top: 1px solid var(--hair);
}

.plan.is-pick {
  border-top: var(--rule) solid var(--ink);
}

/* Each plan is a way to the store, the whole of it, so the saving and the
   figure are pressed as one thing. At rest it is the same two columns. */
a.plan {
  color: inherit;
  text-decoration: none;
}

a.plan:hover .save {
  background: var(--lava-up);
}

a.plan:hover .amount b {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.08em;
}

.plan .label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan .save {
  padding: 0.3rem 0.6rem;
  border: 2px solid #17171a;
  border-radius: 6px;
  background: var(--lava);
  color: #17171a;
}

.plans {
  min-width: 0;
}

.amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
}

.amount b {
  font: 800 3.5rem/1 var(--display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* One big figure on the page, and it is the year. */
.plan.is-pick .amount b {
  font-size: clamp(4.75rem, 9vw, 8rem);
  line-height: 0.88;
}

.amount span,
.billed {
  color: var(--ink2);
}

.amount span {
  font-size: 1.25rem;
  font-weight: 600;
}

.lines {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--hair);
  list-style: none;
  font-size: 1rem;
  line-height: 1.4;
}

@media (min-width: 60rem) {
  .price .wrap {
    grid-template-columns: minmax(0, 1fr) 32rem;
  }
}

/* ---------- The name, at the end ---------- */

.meaning {
  padding-top: clamp(4rem, 10vw, 8rem);
}

.meaning p {
  max-width: 24ch;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .floor,
  .rock,
  .rock canvas,
  .gauge i {
    transition: none;
  }
}

/* ---------- On a phone (AHO-636) ----------
 *
 * The stage was 1,690px tall on a phone: the rock, the figure, a gauge, the
 * slider, the button, a reserved line and then the phone, so what was done
 * and what it did were never on one screen. The habits were a row cut off
 * mid-word, the table showed its labels and a sliver of one column, and the
 * app's screens were four screens of phones. */
@media (max-width: 40rem) {
  .argue {
    padding-block: 1.75rem 1.25rem;
  }

  .rule {
    margin-top: 1.25rem;
  }

  /* Five habits, all in sight: three over two, the rules drawn by the gap. */
  .picker {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--rule);
    overflow: visible;
    background: var(--ink);
  }

  .picker button {
    grid-column: span 2;
    min-height: 3rem;
    padding: 0 0.5rem;
    border-right: 0;
    background: var(--paper);
    font-size: 1.125rem;
  }

  .picker button:nth-child(n + 4) {
    grid-column: span 3;
  }

  /* Him and the phone side by side, the controls under both (AHO-841).
     Stacked, the button and the phone it acts on were 625px apart: on a
     small phone a tap changed a phone off the screen. Now what is done,
     what he makes of it and what the phone does are all in one screen. */
  .floor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "rock beside" "panel panel";
  }

  .rock {
    grid-area: rock;
    --tall: 12rem;
    min-height: 0;
  }

  .rock .frame {
    width: 165%;
    transform: translate(-53%, -58%);
  }

  .beside {
    grid-area: beside;
    border-top: 0;
    border-left: var(--rule) solid var(--stage-ink);
  }

  .panel {
    grid-area: panel;
  }

  .panel {
    gap: 0.6rem;
    padding: 0.875rem 1.25rem 1.25rem;
  }

  .figure b {
    font-size: 3.25rem;
  }

  /* The slider is the gauge: one bar, filled to the reading, dragged by a
     square thumb. A vertical swipe that starts on it scrolls the page. */
  .gauge {
    display: none;
  }

  .meter input {
    height: 2.75rem;
    border: var(--rule) solid var(--stage-ink);
    background: linear-gradient(var(--lava), var(--lava)) 0 / var(--fill, 0%) 100% no-repeat #f6f1e7;
    -webkit-appearance: none;
    appearance: none;
    touch-action: pan-y;
  }

  .meter input::-webkit-slider-thumb {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 0;
    background: var(--ink);
    -webkit-appearance: none;
    appearance: none;
  }

  .meter input::-moz-range-thumb {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 0;
    background: var(--ink);
  }

  .panel .button {
    justify-self: stretch;
    padding-inline: 1rem;
  }

  .says {
    min-height: 0;
    padding-top: 0.9rem;
  }

  .beside {
    padding: 0.75rem;
  }

  .beside .phone {
    width: 100%;
  }

  /* The panel under it says what the phone shows; a caption here was
     the line that pushed the button off a small screen. */
  .beside .caption {
    display: none;
  }

  .more a {
    display: inline-block;
    padding-block: 0.75rem;
  }

  /* The comparison, a question at a time: Ahonui's answer on its strip,
     then the others, each named. */
  .compare {
    overflow: visible;
  }

  .compare table,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .compare thead {
    display: none;
  }

  .compare tbody tr {
    padding-block: 1.25rem;
    border-top: var(--rule) solid var(--night-ink);
  }

  .compare tbody th {
    width: auto;
    padding: 0 0 0.75rem;
    border: 0;
    font-size: 1.25rem;
  }

  .compare td {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.75rem;
    /* The same inset as Ahonui's strip, so the names and answers line up. */
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--night-hair);
  }

  .compare td::before {
    content: attr(data-label);
    color: var(--night-ink2);
    font: 0.75rem/1.6 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .compare td.us {
    margin-bottom: 0.25rem;
    padding: 0.75rem;
    border: 0;
  }

  .compare td.us::before {
    color: #46423c;
  }

  .price .actions .button {
    flex: 1 1 100%;
  }
}

/* Under a row that swipes, where you are in it (AHO-844). */
.row-count {
  margin: 0.75rem 0 0;
  color: var(--ink2);
  font: 0.75rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: right;
}

.row-count[hidden] {
  display: none;
}

/* The app's screens, a row to swipe with the next one peeking, not four
   screens of phones stacked. */
@media (max-width: 51.99rem) {
  .phones {
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 17rem);
    gap: 1.25rem;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .phones figure {
    scroll-snap-align: start;
  }

  .phones .phone {
    width: 100%;
  }
}

/* The price before the buttons: on a phone the two buttons came first and
   the one big figure after them. */
@media (max-width: 59.99rem) {
  .offer {
    display: contents;
  }

  .offer h2 {
    order: 1;
  }

  .offer .say {
    order: 2;
  }

  .plans {
    order: 3;
  }

  .offer .actions {
    order: 4;
  }

  .offer .small {
    order: 5;
  }
}

/* The support chat's bubble sat over the stage's phone on a phone, on the
   page most visitors land on from an ad (AHO-861). Kept off this page there
   unless the chat is open; the footer's support link still opens it. */
@media (max-width: 40rem) {
  #ph-conversations-widget-container:not(:has([aria-label="Close"])) {
    display: none !important;
  }
}

/* From an ad, the rule is the ad's own words, so on a phone it comes first,
   above the lines that lead to it (AHO-861): in Instagram's browser those
   three grey lines were the whole of the first look. */
@media (max-width: 40rem) {
  .from-ad .argue .wrap {
    display: flex;
    flex-direction: column;
  }

  .from-ad .argue .rule {
    order: -1;
    margin: 0 0 1.25rem;
  }
}

/* And the demo is the rest of that first look (AHO-863). From an ad, 81%
   of phone visitors never scrolled: in Instagram's browser, 390 by 664,
   the masthead's row of links, the ad's words, three lines saying what the
   ad had just said and the picker filled the screen, and him, the phone and
   the button were all under it. The ad made the argument; here the page
   shows it. The habit is the ad's, so the picker follows the demo, and the
   try comes before the drag, since trying is what the ad asked about. */
@media (max-width: 40rem) {
  .from-ad .masthead nav a:not(.button),
  .from-ad .masthead .wrap::after,
  .from-ad .argue .charge {
    display: none;
  }

  .from-ad .masthead .wrap {
    padding-bottom: 0.75rem;
  }

  .from-ad .argue {
    padding-block: 1rem 1rem;
  }

  /* Held at the tallest habit's height so the picker under it stays put;
     from an ad the picker is not under it. */
  .from-ad .argue .rule {
    min-height: 0 !important;
    margin: 0;
    font-size: min(3.25rem, calc(var(--measure) / (var(--second) * 0.58)));
  }

  .from-ad .rule span:first-child {
    font-size: inherit;
  }

  .from-ad .stage .wrap {
    display: flex;
    flex-direction: column;
  }

  .from-ad .stage .picker {
    order: 1;
    margin-top: 1.25rem;
    border-bottom: var(--rule) solid var(--ink);
  }

  .from-ad .panel > * {
    order: 1;
  }

  .from-ad .panel > .label:first-child,
  .from-ad .panel > .button {
    order: 0;
  }
}

/* The download where the demo lands (AHO-865), once the block has been
   seen: dark, so it is not a second "try" beside the orange one. */
.panel .get {
  justify-self: start;
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
}

.panel .get[hidden] {
  display: none;
}

/* After a few tries it draws the eye (AHO-899). */
.panel .get.is-nudged {
  animation: get-nudge 1.6s ease-in-out infinite;
}

@keyframes get-nudge {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lava) 55%, transparent); }
  50% { box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--lava) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .panel .get.is-nudged {
    animation: none;
    outline: 3px solid var(--lava);
    outline-offset: 3px;
  }
}

@media (max-width: 40rem) {
  .panel .get {
    justify-self: stretch;
  }

  .from-ad .panel > .get {
    order: 0;
  }
}