/* Chaffline ------------------------------------------------------------------
   Duotone instrument: ink on pressed board. One signal colour, --flag, and it
   means exactly one thing - this message scored above the threshold. Nothing
   below the line is ever allowed to wear it.
   -------------------------------------------------------------------------- */

:root {
  --paper:   #E6E8E3;
  --paper-2: #F1F3EE;
  --ink:     #1A2420;
  --ink-2:   #56645D;
  --rule:    #C6CBC3;
  --flag:    #C42B1C;

  --shell: 1180px;
  --plot-h: 540px;
  --chip-h: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #101614;
    --paper-2: #18211E;
    --ink:     #DFE4DE;
    --ink-2:   #8B9992;
    --rule:    #2B3733;
    --flag:    #FF6A52;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.shell { width: min(var(--shell), 100% - 2rem); margin-inline: auto; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: 1rem; }

/* Buttons ------------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: .82rem 1.5rem;
  font-variation-settings: 'wdth' 92, 'wght' 600;
  font-size: .95rem;
  letter-spacing: .005em;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background-color .16s ease, color .16s ease;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: transparent; color: var(--ink); }
.btn-quiet { background: transparent; border-color: var(--rule); }
.btn-quiet:hover { border-color: var(--ink); }
.btn-sm { padding: .55rem 1.05rem; font-size: .875rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* Top bar ------------------------------------------------------------------ */

.topbar { border-bottom: 1px solid var(--rule); }

.topbar-in {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  min-height: 72px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  font-variation-settings: 'wdth' 82, 'wght' 700;
  font-size: 1.2rem;
  letter-spacing: .004em;
}
.mark { flex: none; color: var(--ink); }

.topnav {
  display: flex;
  gap: 1.75rem;
  margin-inline-start: auto;
  font-size: .95rem;
}
.topnav a { text-decoration: none; color: var(--ink-2); }
.topnav a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .topnav { display: none; }
  .topbar-in { justify-content: space-between; gap: 1rem; }
}

/* Hero --------------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3.5rem, 6vw, 5.5rem); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.hero-copy h1 {
  font-variation-settings: 'wdth' 78, 'wght' 600;
  font-size: clamp(2.7rem, 6vw, 4.4rem);
  line-height: .97;
  letter-spacing: -.022em;
}

.lede {
  margin-top: 1.6rem;
  max-width: 38ch;
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.2rem;
}

.hero-note {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  max-width: 36ch;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* The plot ----------------------------------------------------------------- */

.plot { margin: 0; }

.plot-field { position: relative; height: var(--plot-h); }

.threshold {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--chip-h) / 2 + (1 - var(--s)) * (100% - var(--chip-h)));
  border-top: 1px dashed var(--ink-2);
}

.threshold-tag {
  position: absolute;
  inset-inline-end: 0;
  top: .4rem;
  font-size: .78rem;
  color: var(--ink-2);
  background: var(--paper);
  padding-inline-start: .6rem;
}

.chip {
  --pos: calc(var(--chip-h) / 2 + (1 - var(--s)) * (100% - var(--chip-h)));
  position: absolute;
  inset-inline: 0;
  top: var(--pos);
  transform: translateY(-50%);
  height: var(--chip-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-inline: 1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  transition: top .85s cubic-bezier(.19, .8, .26, 1), opacity .45s ease-out;
  transition-delay: calc(var(--i) * 85ms);
}

.chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
  color: var(--ink-2);
}

.chip-text b {
  /* inline-block keeps the strike-through off the author's name: the message was
     removed, not the person. */
  display: inline-block;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  color: var(--ink);
  margin-inline-end: .5rem;
}

.chip-state {
  font-size: .78rem;
  white-space: nowrap;
  color: var(--flag);
}

.chip.is-flagged {
  border-color: var(--flag);
  background: color-mix(in srgb, var(--flag) 7%, var(--paper-2));
}
.chip.is-flagged .chip-text { text-decoration: line-through; text-decoration-color: var(--flag); }

.js .plot:not(.is-settled) .chip {
  top: 50%;
  opacity: 0;
}

.plot figcaption {
  margin-top: 1.4rem;
  max-width: 44ch;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .plot { --plot-h: 440px; --chip-h: 46px; }
  .lede, .hero-note { max-width: 46ch; }
}

@media (max-width: 560px) {
  /* Keep the word "removed" — only the reason has to go. */
  .chip { gap: .7rem; padding-inline: .75rem; }
  .chip-reason { display: none; }
  /* Two stacked buttons of nearly-equal width read as a mistake; match them. */
  .cta-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cta-row .btn { text-align: center; }
}

/* Bands -------------------------------------------------------------------- */

.band {
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  border-top: 1px solid var(--rule);
}
.band-alt { background: var(--paper-2); }

.band-title,
.split-head h2,
.closer h2 {
  font-variation-settings: 'wdth' 82, 'wght' 600;
  font-size: clamp(1.85rem, 3.3vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -.016em;
  max-width: 20ch;
}

.band-intro {
  margin-top: 1.3rem;
  max-width: 56ch;
  color: var(--ink-2);
}

.band-foot {
  margin-top: 2.2rem;
  max-width: 62ch;
  font-size: .95rem;
  color: var(--ink-2);
}

/* What it catches ---------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.split-head p {
  margin-top: 1.3rem;
  max-width: 44ch;
  color: var(--ink-2);
}

.split-head .aside {
  margin-top: 1.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: .88rem;
}

.cats {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.cat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding-block: .62rem;
  border-bottom: 1px solid var(--rule);
}

.cat-box {
  width: 9px;
  height: 9px;
  background: var(--ink);
}

.cat-label { font-size: .98rem; }

.cat-state {
  font-size: .75rem;
  color: var(--ink-2);
  opacity: .8;
}

.cat.is-off .cat-box { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.cat.is-off .cat-label { color: var(--ink-2); opacity: .6; }

/* Controls ----------------------------------------------------------------- */

.controls {
  margin: 3rem 0 0;
  border-top: 1px solid var(--rule);
}

.control {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  column-gap: 3rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--rule);
}

.control dt {
  font-variation-settings: 'wdth' 88, 'wght' 600;
  font-size: 1.22rem;
  line-height: 1.2;
}

.control dd {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .control { grid-template-columns: minmax(0, 1fr); }
  .control dd { margin-top: .55rem; }
}

/* Pricing ------------------------------------------------------------------ */

.prices {
  width: 100%;
  margin-top: 3rem;
  border-collapse: collapse;
}

.prices thead th {
  padding: 0 1rem .8rem 0;
  border-bottom: 1px solid var(--ink);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: .82rem;
  color: var(--ink-2);
  text-align: start;
}

.prices tbody th,
.prices tbody td {
  padding: 1.15rem 1rem 1.15rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  text-align: start;
}

.prices tbody th {
  font-variation-settings: 'wdth' 90, 'wght' 600;
  font-size: 1.1rem;
  white-space: nowrap;
}

.prices .price {
  font-variation-settings: 'wdth' 82, 'wght' 600;
  font-feature-settings: 'tnum' 1;
  font-size: 1.45rem;
  white-space: nowrap;
}

.prices .year {
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
  color: var(--ink-2);
}

/* The column header says "Per year". On narrow screens the header is gone, so the
   cell has to say it itself or it reads as a second, unexplained price. */
.prices .per { display: none; }

.prices .allow {
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
  color: var(--ink-2);
}

.prices .note {
  font-size: .95rem;
  color: var(--ink-2);
  width: 42%;
}

.prices .is-featured th,
.prices .is-featured td { background: var(--paper-2); }
.prices .is-featured th { box-shadow: inset 3px 0 0 var(--ink); padding-inline-start: .9rem; }

/* The table carries five columns now, four of which cannot wrap, so it stacks earlier
   than it used to. This block is the prices table only. */
@media (max-width: 820px) {
  .prices thead { display: none; }
  .prices tbody, .prices tr, .prices th, .prices td { display: block; }
  .prices tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 1rem;
    padding-block: 1.2rem;
    border-bottom: 1px solid var(--rule);
  }
  .prices tbody th,
  .prices tbody td { padding: 0; border: 0; }
  .prices tbody th { grid-column: 1; }
  .prices .price { grid-column: 2; grid-row: 1; text-align: end; }
  .prices .year {
    grid-column: 2;
    grid-row: 2;
    text-align: end;
    font-size: .86rem;
  }
  .prices .year.is-na { display: none; }
  .prices .per { display: inline; }
  .prices .allow { grid-column: 1; grid-row: 2; font-size: .92rem; }
  .prices .note { grid-column: 1 / -1; grid-row: 3; width: auto; margin-top: .45rem; }
  .prices .is-featured th,
  .prices .is-featured td { background: transparent; }
  .prices .is-featured th { box-shadow: none; padding-inline-start: 0; }
  .prices tbody tr.is-featured { box-shadow: inset 3px 0 0 var(--ink); padding-inline-start: .9rem; }
}

/* Closer ------------------------------------------------------------------- */

.closer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(4.5rem, 9vw, 7rem);
}

.closer-in { display: grid; justify-items: start; gap: 2rem; }
.closer h2 { max-width: 16ch; }
.closer p { font-size: .92rem; opacity: .7; }

.closer .btn-solid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.closer .btn-solid:hover { background: transparent; color: var(--paper); }
.closer :focus-visible { outline-color: var(--paper); }

/* Footer ------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); padding-block: 3.5rem 2rem; }

.footer-in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.footer-brand p {
  margin-top: .9rem;
  max-width: 28ch;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.footer-col { display: grid; align-content: start; gap: .55rem; }

.footer-col h2 {
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: .82rem;
  color: var(--ink-2);
  margin-bottom: .2rem;
}

.footer-col a {
  font-size: .92rem;
  text-decoration: none;
  color: var(--ink);
  justify-self: start;
}
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  font-size: .82rem;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .footer-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Motion ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js .plot:not(.is-settled) .chip { top: var(--pos); opacity: 1; }
}

/* Legal documents ----------------------------------------------------------
   Privacy and Terms share this. No --flag anywhere on these pages: on this site
   that red means "scored above the line" and nothing else gets to wear it.
   Hierarchy is carried by the width axis - the clause number is the same size as
   its heading and recedes only by being wider and quieter.
   -------------------------------------------------------------------------- */

.doc-head { padding-block: clamp(3rem, 6vw, 4.75rem) 0; }

.doc-head h1 {
  font-variation-settings: 'wdth' 78, 'wght' 600;
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  line-height: .99;
  letter-spacing: -.02em;
  max-width: 17ch;
}

.doc-lede {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: .45rem 1.5rem;
  margin: 2.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  max-width: 52ch;
  font-size: .9rem;
}
.masthead dt { color: var(--ink-2); }
.masthead dd { margin: 0; }

/* Frame -------------------------------------------------------------------- */

.doc {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--rule);
  align-items: start;
}

.doc-rail { position: sticky; top: 1.5rem; }

.doc-rail h2 {
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: .82rem;
  color: var(--ink-2);
  margin-bottom: .55rem;
}

.doc-rail ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.doc-rail a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .35rem;
  padding-block: .46rem;
  border-bottom: 1px solid var(--rule);
  font-size: .88rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--ink-2);
}
.doc-rail a:hover { color: var(--ink); }
.doc-rail a .n { font-feature-settings: 'tnum' 1; opacity: .65; }

/* Sections ----------------------------------------------------------------- */

.doc-body { max-width: 66ch; }

.doc-sec {
  padding-block: 2.6rem;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 1.5rem;
}
.doc-sec:first-child { padding-top: 0; }

.doc-sec > h2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .95rem;
  align-items: baseline;
  font-variation-settings: 'wdth' 84, 'wght' 600;
  font-size: clamp(1.35rem, 2.4vw, 1.62rem);
  line-height: 1.14;
  letter-spacing: -.012em;
}

.doc-sec > h2 .n {
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-feature-settings: 'tnum' 1;
  color: var(--ink-2);
}

.doc-sec h3 {
  margin-top: 1.9rem;
  font-variation-settings: 'wdth' 92, 'wght' 600;
  font-size: 1.05rem;
  line-height: 1.3;
}

.doc-sec p { margin-top: 1.05rem; }
.doc-sec h2 + p, .doc-sec h3 + p { margin-top: .85rem; }

.doc-sec a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}
.doc-sec a:hover { text-decoration-color: currentColor; }

/* Plain hairline list ------------------------------------------------------ */

.doc-list {
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.doc-list li {
  padding-block: .72rem;
  border-bottom: 1px solid var(--rule);
  font-size: .97rem;
  line-height: 1.5;
}
.doc-list b {
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-weight: 400;
}

/* The ledger --------------------------------------------------------------- */

.ledger {
  width: 100%;
  margin-top: 1.6rem;
  border-collapse: collapse;
  font-size: .95rem;
}

.ledger thead th {
  padding: 0 1.2rem .7rem 0;
  border-bottom: 1px solid var(--ink);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: .82rem;
  color: var(--ink-2);
  text-align: start;
}
.ledger thead th:last-child { padding-inline-end: 0; }

.ledger tbody th,
.ledger tbody td {
  padding: .95rem 1.2rem .95rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  text-align: start;
  line-height: 1.45;
}

.ledger tbody th {
  font-variation-settings: 'wdth' 94, 'wght' 600;
  font-weight: 400;
  width: 38%;
}

.ledger .why { color: var(--ink-2); }

.ledger .keep {
  padding-inline-end: 0;
  color: var(--ink-2);
  font-feature-settings: 'tnum' 1;
}

@media (max-width: 720px) {
  .ledger thead { display: none; }
  .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; }
  .ledger tbody tr {
    padding-block: 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .ledger tbody th,
  .ledger tbody td { padding: 0; border: 0; width: auto; }
  .ledger tbody td { margin-top: .3rem; }
  .ledger .keep::before {
    /* The column head is gone on narrow screens, so the row has to say it. A
       colon, not "Kept for": the values are not all durations. */
    content: 'Kept: ';
  }
}

/* The one boxed thing per page --------------------------------------------- */

.doc-note {
  margin-top: 1.7rem;
  padding: 1.35rem 1.45rem;
  border: 1px solid var(--ink);
  background: var(--paper-2);
}
.doc-note h3 { margin-top: 0; }
.doc-note > :first-child + p { margin-top: .7rem; }

/* Steps - a real sequence, so it gets real numbers -------------------------- */

.steps {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--rule);
}

/* Absolute, not a grid column: a step contains inline links, and every element
   child of a grid container becomes its own item - the link would land in the
   number's cell. */
.steps li {
  position: relative;
  padding: .85rem 0 .85rem 2.15rem;
  border-bottom: 1px solid var(--rule);
  font-size: .97rem;
  line-height: 1.5;
}
.steps li::before {
  position: absolute;
  inset-inline-start: 0;
  top: .85rem;
  counter-increment: step;
  content: counter(step);
  font-feature-settings: 'tnum' 1;
  color: var(--ink-2);
}

/* Sign-off ----------------------------------------------------------------- */

.doc-end {
  margin-top: 2.6rem;
  font-size: .9rem;
  color: var(--ink-2);
}

@media (max-width: 980px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .doc-rail { position: static; }
  .doc-rail ol { columns: 2; column-gap: 2rem; }
  .doc-rail li { break-inside: avoid; }
}

@media (max-width: 520px) {
  .masthead { grid-template-columns: minmax(0, 1fr); gap: .1rem 0; }
  .masthead dd { margin-bottom: .7rem; }
  .doc-rail ol { columns: 1; }
}

/* The dashboard ------------------------------------------------------------
   Same instrument, turned around: the marketing pages plot messages against a
   line, and this is where the line gets set. So it is the same paper, the same
   hairlines, the same width axis doing the hierarchy - only the density changes,
   because this is a form and not an argument.

   **No --flag anywhere below.** On this site that red means one thing, a message
   scored above the threshold, and a spent allowance is not that. Where a state
   has to shout, it does it with a hatched fill and a plain sentence instead.
   -------------------------------------------------------------------------- */

/* Signed-in pages are often short; this keeps the footer at the bottom of the
   window instead of halfway up it. */
body.app { min-height: 100vh; display: flex; flex-direction: column; }
body.app > main { flex: 1 0 auto; }

.appbar { border-bottom: 1px solid var(--rule); }

.appbar-in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

/* Who you are. **Colour is identity on this site; --flag is signal.** A face and
   a server icon are the two things here that belong to somebody else, so they
   keep their own colour — greyscale now means one specific thing, a server
   Chaffline has not been added to, and it is the only place it is used. */
.identity {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-inline-start: auto;
  font-size: .9rem;
}

.identity-face {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.identity-face img { display: block; width: 100%; height: 100%; object-fit: cover; }

.identity-initial {
  font-variation-settings: 'wdth' 82, 'wght' 600;
  font-size: .78rem;
  color: var(--ink-2);
}

.identity-name {
  font-variation-settings: 'wdth' 94, 'wght' 600;
  color: var(--ink);
}

/* A hairline rather than a gap: Sign out is a different kind of thing from the
   name beside it, and the rule says so without another word. */
.identity form { display: flex; align-items: center; }
.identity form::before {
  content: "";
  align-self: stretch;
  width: 1px;
  margin-inline-end: .7rem;
  background: var(--rule);
}

/* A submit button that has to read as a link: Sign out is a POST, because a
   GET that ends your session is a link anything on the page can follow. */
.plainbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
  cursor: pointer;
}
.plainbtn:hover { text-decoration-color: currentColor; }

.appfoot { margin-top: auto; border-top: 1px solid var(--rule); padding-block: 1.6rem; }

.appfoot-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: .82rem;
  color: var(--ink-2);
}
.appfoot-in nav { display: flex; gap: 1.4rem; }
.appfoot-in a { text-decoration: none; }
.appfoot-in a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .identity-name, .identity form::before { display: none; }
}

/* The column --------------------------------------------------------------- */

.pane {
  width: min(48rem, 100% - 2rem);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem);
}

.pane-title {
  font-variation-settings: 'wdth' 80, 'wght' 600;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -.018em;
  max-width: 20ch;
}

.pane-lede {
  margin-top: 1.1rem;
  max-width: 50ch;
  color: var(--ink-2);
}

.pane-foot {
  margin-top: 1.8rem;
  font-size: .9rem;
  color: var(--ink-2);
}

.crumb { margin-bottom: 1.6rem; font-size: .88rem; color: var(--ink-2); }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Boxed messages ----------------------------------------------------------- */

.notice {
  margin-top: 2rem;
  padding: 1.35rem 1.45rem;
  border: 1px solid var(--ink);
  background: var(--paper-2);
}
.notice h2 {
  font-variation-settings: 'wdth' 90, 'wght' 600;
  font-size: 1.05rem;
}
.notice p { margin-top: .7rem; max-width: 60ch; font-size: .95rem; color: var(--ink-2); }
.notice-act { margin-top: 1.1rem; }

.formerror {
  margin-top: 1.8rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--ink);
  border-inline-start-width: 3px;
  background: var(--paper-2);
  font-size: .95rem;
  max-width: 60ch;
}

.saved {
  margin-top: 2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--ink);
  font-size: .92rem;
  color: var(--ink-2);
}

.empty { font-size: .92rem; color: var(--ink-2); }

/* Server list -------------------------------------------------------------- */

.servers {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

/* Three states on one list, each said three ways: a rule at the start of the
   row, whether the icon has its colour, and the word on the right. The rule is
   on every row and only changes weight, so nothing shifts as servers go live. */
.server {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding-block: .95rem;
  padding-inline-start: .9rem;
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 2px 0 0 transparent;
}
.server.is-added { box-shadow: inset 2px 0 0 var(--rule); }
.server.is-live { box-shadow: inset 2px 0 0 var(--ink); }

.server-face {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.server-face img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Not added is the only greyed state, and it is greyed because it is the one
   server on the list that is not yours to configure yet. */
.server:not(.is-added) .server-face img { filter: grayscale(1) contrast(.95); opacity: .75; }
.server:not(.is-added) .server-name { color: var(--ink-2); }

.server-initial {
  font-variation-settings: 'wdth' 82, 'wght' 600;
  font-size: .9rem;
  color: var(--ink-2);
}

.server-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variation-settings: 'wdth' 94, 'wght' 400;
}
.server.is-live .server-name { font-variation-settings: 'wdth' 94, 'wght' 600; }

.server-state {
  font-size: .78rem;
  color: var(--ink-2);
  white-space: nowrap;
}
.server.is-live .server-state { color: var(--ink); }

@media (max-width: 620px) {
  .server { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: .5rem; }
  .server-state { grid-column: 2 / -1; grid-row: 2; }
  .server .btn { grid-column: 3; grid-row: 1; }
}

/* Setup -------------------------------------------------------------------- */

.setup-where { font-size: .9rem; color: var(--ink-2); }
.setup-where b { font-variation-settings: 'wdth' 94, 'wght' 600; font-weight: 400; color: var(--ink); }

/* Three rules across the top. A stepped setup is one of the few things on this
   site that genuinely is a sequence, so it is allowed real numbers. */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .9rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.rail-bar { display: block; height: 2px; background: var(--rule); }
.rail-step.is-done .rail-bar { background: var(--ink-2); }
.rail-step.is-now .rail-bar { background: var(--ink); }

.rail-label {
  display: block;
  margin-top: .55rem;
  font-size: .78rem;
  color: var(--ink-2);
}
.rail-step.is-now .rail-label { color: var(--ink); }
.rail-n { font-feature-settings: 'tnum' 1; margin-inline-end: .45rem; opacity: .6; }

.ask {
  margin-top: 2.6rem;
  font-variation-settings: 'wdth' 78, 'wght' 600;
  font-size: clamp(1.95rem, 4.2vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 17ch;
}

.ask-note {
  margin-top: 1.1rem;
  max-width: 48ch;
  color: var(--ink-2);
}

/* Choosable rows ----------------------------------------------------------- */

.picks {
  margin-top: 1.8rem;
  border-top: 1px solid var(--rule);
  /* Long enough lists scroll rather than pushing the buttons off the screen -
     a server can have two hundred channels. Short lists never reach it. */
  max-height: 24rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.picks-wide, .picks-two { max-height: none; overflow: visible; }

.picks-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}

.pick {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .85rem;
  padding-block: .62rem;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}

/* The real input stays in the page and keeps every keyboard and screen-reader
   behaviour; only its appearance is replaced by the square. */
.pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.pick-box {
  width: 12px;
  height: 12px;
  margin-top: .46rem;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.pick:hover .pick-box { box-shadow: inset 0 0 0 1px var(--ink); }
.pick input:checked ~ .pick-box { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pick input:focus-visible ~ .pick-box { outline: 2px solid var(--ink); outline-offset: 3px; }

/* An author `display` beats the UA sheet's `[hidden] { display: none }`, so the
   filter in dashboard.js would hide nothing without this. */
.pick[hidden] { display: none; }

.pick-body { min-width: 0; }

.pick-label {
  display: block;
  font-size: .98rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pick:has(input:checked) .pick-label { font-variation-settings: 'wdth' 100, 'wght' 600; }

.pick-prefix { color: var(--ink-2); }

.pick-said {
  display: block;
  margin-top: .2rem;
  max-width: 54ch;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.pick-meta {
  font-size: .75rem;
  color: var(--ink-2);
  opacity: .8;
  white-space: nowrap;
  padding-top: .2rem;
}

.pick.is-disabled { cursor: default; }
.pick.is-disabled .pick-label { color: var(--ink-2); opacity: .6; }

.pick-agree { padding-block: 1.1rem; border-bottom: 0; }
.pick-agree .pick-label { max-width: 52ch; }
.pick-agree a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.pick-agree a:hover { text-decoration-color: currentColor; }

.agree {
  margin-top: 2.4rem;
  padding-inline: 1.3rem;
  border: 1px solid var(--ink);
  background: var(--paper-2);
}

.filter {
  width: 100%;
  max-width: 22rem;
  margin-top: 1.6rem;
  padding: .55rem .7rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
}
.filter:focus-visible { border-color: var(--ink); outline: none; }
.filter + .picks { margin-top: .9rem; }

/* Two columns of pickers --------------------------------------------------- */

.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.field { margin: 0; padding: 0; border: 0; min-width: 0; }

.field legend {
  padding: 0;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: .82rem;
  color: var(--ink-2);
}
.field .filter, .field .picks { margin-top: .8rem; }

@media (max-width: 720px) {
  .two, .picks-two { grid-template-columns: minmax(0, 1fr); }
  .two { gap: 2.4rem; }
}

/* Buttons at the end of a form --------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 2.4rem;
}
.actions-save { margin-top: 2.8rem; }
/* An author `display` beats the UA sheet's `[hidden] { display: none }` — the
   same trap `.pick[hidden]` documents. The save bar goes away on Overview. */
.actions[hidden] { display: none; }
.actions-note { font-size: .85rem; color: var(--ink-2); }

/* Disclosures -------------------------------------------------------------- */

.aside-details, .danger {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
  color: var(--ink-2);
}
.aside-details summary, .danger summary {
  cursor: pointer;
  color: var(--ink);
}
.aside-details p, .danger p { margin-top: .9rem; max-width: 58ch; }
.danger { margin-top: 3.5rem; }
.danger form { margin-top: 1.1rem; }

.plainlist {
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}
.plainlist li { break-inside: avoid; }

/* One server --------------------------------------------------------------- */

.guildhead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
}
.guildhead .server-face { width: 40px; height: 40px; grid-row: 1 / 3; }
/* You are in this server by definition, so its icon is never the greyed one. */
.guildhead .server-face img { filter: none; }

.guildhead h1 {
  font-variation-settings: 'wdth' 80, 'wght' 600;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -.016em;
}

.guildstate { font-size: .85rem; color: var(--ink-2); }

/* The allowance ------------------------------------------------------------ */

.usage {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink);
}

.usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.usage-head h3 {
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: .82rem;
  color: var(--ink-2);
}
.plan { font-size: .82rem; color: var(--ink-2); }

.meter { height: 3px; margin-top: 1.1rem; background: var(--rule); }
.meter-fill { display: block; height: 100%; width: var(--used); background: var(--ink); }

/* Spent, without spending the signal colour on it: the bar hatches over and the
   sentence underneath says what that means. */
.meter.is-spent .meter-fill {
  background: repeating-linear-gradient(135deg,
    var(--ink) 0 3px, var(--paper) 3px 6px);
}

.meter-read {
  margin-top: .7rem;
  font-size: .9rem;
  color: var(--ink-2);
}
.meter-read b {
  font-variation-settings: 'wdth' 88, 'wght' 600;
  font-feature-settings: 'tnum' 1;
  font-weight: 400;
  color: var(--ink);
}
.meter-read a { text-decoration: underline; text-underline-offset: 3px; }

.tallies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.8rem 0 0;
}
.tallies dt { font-size: .78rem; color: var(--ink-2); }
.tallies dd {
  margin: .25rem 0 0;
  font-variation-settings: 'wdth' 82, 'wght' 600;
  font-feature-settings: 'tnum' 1;
  font-size: 1.35rem;
}

@media (max-width: 620px) {
  .tallies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
}

/* Settings blocks ---------------------------------------------------------- */

.setblock {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.setblock h3 {
  font-variation-settings: 'wdth' 86, 'wght' 600;
  font-size: 1.22rem;
  line-height: 1.2;
}
.setnote {
  margin-top: .55rem;
  max-width: 54ch;
  font-size: .92rem;
  color: var(--ink-2);
}

/* Review ------------------------------------------------------------------- */

.summary {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .1rem 1.5rem;
  margin: 2.4rem 0 0;
  border-top: 1px solid var(--rule);
}
.summary dt {
  padding-block: .8rem;
  border-bottom: 1px solid var(--rule);
  font-size: .9rem;
  color: var(--ink-2);
}
.summary dd {
  margin: 0;
  padding-block: .8rem;
  border-bottom: 1px solid var(--rule);
  font-size: .95rem;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .summary { grid-template-columns: minmax(0, 1fr); }
  .summary dt { padding-bottom: 0; border-bottom: 0; }
  .summary dd { padding-top: .2rem; }
}

/* The plan button ----------------------------------------------------------
   Third column of the server header, beside the plan it acts on. It used to be
   a disclosure saying billing did not exist; it is a link now, and it goes to
   the one page plans are bought on rather than starting a second checkout here.
   -------------------------------------------------------------------------- */

.guildhead > .btn {
  grid-column: 3;
  grid-row: 1 / 3;
  justify-self: end;
  align-self: center;
}

@media (max-width: 620px) {
  .guildhead { grid-template-columns: auto minmax(0, 1fr); }
  .guildhead > .btn { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 1.2rem; }
}

/* Panels -------------------------------------------------------------------
   One server used to be one long scroll. It is four panels now, and the row of
   them gets no numbers: the setup rail is a sequence and earns its numbers,
   this is four doors on the same room. With dashboard.js blocked every panel
   stays on the page and these are anchors that jump to it — the long scroll,
   which is a worse page but never a broken one.
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 1.7rem;
  margin-top: 2.6rem;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding-block: .75rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: .95rem;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-now {
  border-bottom-color: var(--ink);
  font-variation-settings: 'wdth' 94, 'wght' 600;
  color: var(--ink);
}

/* The tab strip runs to the edge of a phone screen rather than stopping inside
   the gutter: a tab cut off at the frame looks broken, and one cut off at the
   edge of the glass reads as a row that carries on. */
@media (max-width: 620px) {
  /* -1rem is exactly the pane's gutter at this width, and it gets there without
     100vw, which would count a classic scrollbar and push the whole page sideways. */
  .tabs { gap: 1.3rem; margin-inline: -1rem; padding-inline: 1rem; }
  .tab { font-size: .9rem; }
}

.panel[hidden] { display: none; }

/* Inside a panel the tab strip is already the division, so the allowance drops
   its own rule rather than drawing a second one a few pixels under the first. */
.panel .usage { margin-top: 2rem; padding-top: 0; border-top: 0; }

.panel-title {
  margin-top: 2.4rem;
  font-variation-settings: 'wdth' 84, 'wght' 600;
  font-size: 1.4rem;
  line-height: 1.15;
}

/* The first block under a panel heading needs no rule above it: the panel is
   already the division the rule would be drawing. */
.setblock-first { margin-top: 1.9rem; padding-top: 0; border-top: 0; }

/* Strictness ---------------------------------------------------------------
   Five named positions on one track. Built by dashboard.js from the radios,
   which stay in the page and keep submitting — so the value that reaches the
   server is the one the no-script page would have sent.

   The handle is a square. Nothing on this site has a rounded corner, and a
   round thumb would be the one foreign shape on it.
   -------------------------------------------------------------------------- */

.slider { --at: 0; --thumb: 15px; margin-top: 1.9rem; }

.slider-track { position: relative; height: 34px; }

/* Track, fill and ticks all inset by half the handle, because that is where the
   handle's centre can actually reach. Without it the marks and the handle
   disagree by 7px at each end. */
.slider-track::before {
  content: "";
  position: absolute;
  inset-inline: calc(var(--thumb) / 2);
  top: calc(50% - 1.5px);
  height: 3px;
  background: var(--rule);
}

.slider-fill {
  position: absolute;
  inset-inline-start: calc(var(--thumb) / 2);
  top: calc(50% - 1.5px);
  width: calc((100% - var(--thumb)) * var(--at));
  height: 3px;
  background: var(--ink);
}

.slider-ticks {
  position: absolute;
  inset-inline: calc(var(--thumb) / 2);
  top: calc(50% + 6px);
  display: flex;
  justify-content: space-between;
}
.slider-tick { width: 1px; height: 7px; background: var(--rule); }
.slider-tick.is-default { height: 12px; background: var(--ink-2); }

.slider-input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.slider-input:focus { outline: none; }
.slider-input::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((34px - var(--thumb)) / 2);
  border: 0;
  border-radius: 0;
  background: var(--ink);
}
.slider-input::-moz-range-track { height: 34px; background: transparent; }
.slider-input::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 0;
  border-radius: 0;
  background: var(--ink);
}
/* The focus ring is drawn on the handle itself: the input's own box is 34px
   tall and an outline round it would frame empty space. */
.slider-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}
.slider-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

.slider-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .45rem;
  font-size: .78rem;
  color: var(--ink-2);
}

.slider-read {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  font-size: .92rem;
  color: var(--ink-2);
}
.slider-title {
  font-variation-settings: 'wdth' 88, 'wght' 600;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink);
}
.slider-tag {
  margin-inline-start: .55rem;
  padding: .1rem .4rem;
  border: 1px solid var(--rule);
  font-size: .72rem;
}
.slider-said { display: block; margin-top: .3rem; max-width: 52ch; }

/* Plans --------------------------------------------------------------------
   The one page on this site where money is the subject, so it gets the one new
   drawn object: a period strip. A subscription is a length of time somebody has
   paid for, the date it renews is what they came here to check, and a hairline
   with a filled run says both at a glance where two dates in a sentence do not.
   Everything else is the site's existing furniture - choosable rows for the
   tiers, the boxed agreement from the activation screen for the tick boxes.
   -------------------------------------------------------------------------- */

.holdings { margin-top: 2.6rem; }

.holding {
  margin-top: 1.4rem;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid var(--ink);
  background: var(--paper-2);
}
/* An ended plan is still worth reading - it says why a server went back to
   Free - so it recedes rather than disappearing. */
.holding.is-over { border-color: var(--rule); background: transparent; }

.holding-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem 1.5rem;
}
.holding-head h3 {
  font-variation-settings: 'wdth' 84, 'wght' 600;
  font-size: 1.35rem;
  letter-spacing: -.01em;
}
.holding-price {
  font-size: .95rem;
  color: var(--ink-2);
  font-feature-settings: 'tnum' 1;
}
.holding-price b {
  font-variation-settings: 'wdth' 88, 'wght' 600;
  font-weight: 400;
  color: var(--ink);
}

/* Track, run and a notch at today. The notch is the run's own end, not a
   separate element: one box means it can never drift from the fill. */
.period {
  position: relative;
  height: 1px;
  margin-top: 1.5rem;
  background: var(--rule);
}
.period-run {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--elapsed);
  background: var(--ink);
}
.period-run::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--ink);
}
.is-over .period-run { background: var(--ink-2); }

.period-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .55rem;
  font-size: .78rem;
  color: var(--ink-2);
  font-feature-settings: 'tnum' 1;
}

.holding-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2.75rem;
  margin: 1.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.holding-facts dt { font-size: .76rem; color: var(--ink-2); }
.holding-facts dd { margin: .22rem 0 0; font-size: .98rem; }
.holding-warn { color: var(--ink-2); font-style: italic; }

.holding-said {
  margin-top: 1.1rem;
  max-width: 62ch;
  font-size: .9rem;
  color: var(--ink-2);
}

.holding-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-top: 1.4rem;
}
.holding-note { font-size: .84rem; color: var(--ink-2); max-width: 46ch; }

.holding-manage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-top: 1.6rem;
}

/* Monthly or yearly. Two links and a sentence, not a toggle: the page is
   rendered per period, so the state has to survive a reload with JS blocked. */
.switch {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .9rem 1.4rem;
  margin-top: 1.9rem;
}
.switch-on {
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
  font-variation-settings: 'wdth' 94, 'wght' 600;
  font-size: .95rem;
}
.switch-on:hover { color: var(--ink); }
.switch-on.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.switch-said {
  margin-inline-start: auto;
  max-width: 34ch;
  font-size: .82rem;
  color: var(--ink-2);
}

/* Four prices have to be readable against each other, so the tier rows keep
   their numbers in the meta column where every other number on this site sits,
   and it stops being the small quiet one. */
.picks-tiers .pick-meta {
  font-size: .95rem;
  color: var(--ink);
  opacity: 1;
  font-feature-settings: 'tnum' 1;
  font-variation-settings: 'wdth' 88, 'wght' 600;
  padding-top: .1rem;
}
.picks-tiers .is-disabled .pick-meta {
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: .8rem;
  color: var(--ink-2);
}

/* Two agreements in one box, so the hairline between them has to come back:
   .pick-agree drops its own for the single-box case on the activation screen. */
.agree .pick-agree + .pick-agree { border-top: 1px solid var(--rule); }

.assign-now {
  margin-top: 1.8rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--ink);
  max-width: 68ch;
  font-size: .95rem;
  color: var(--ink-2);
}
.assign-now b { color: var(--ink); font-variation-settings: 'wdth' 94, 'wght' 600; font-weight: 400; }

.assign-rest { margin-top: 3rem; }

@media (max-width: 620px) {
  .holding { padding: 1.2rem 1.1rem 1.3rem; }
  .switch-said { margin-inline-start: 0; }
}