/*
 * The sign-in pages in Coho's identity: concept 03, "Six Percent"
 * (coho-concepts/docs/briefs/03-six-percent.md and docs/brand-rules.md).
 *
 * Dark by default. The server renders <html data-theme="dark"> unless the
 * `coho-theme` cookie says light, so nothing flashes; theme.js only switches
 * it and remembers the choice. Tokens are the concept site's, by name.
 */

/* FACES */
/* FACES */
/* FACES */

/* Served from here, not from Google, on a page that takes a password. */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  /* block: a wordmark that flashes in Georgia and reflows is worse than one 80ms late (brand rules) */
  font-display: block;
  src: url(fonts/pt-serif-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* TOKENS */
/* TOKENS */
/* TOKENS */

/* Dark first, because dark is the default. */
:root {
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg: #101419;            /* --ground-dk */
  --panel: #182028;         /* --read-dk */
  --panel-line: #26323E;
  --text: #FBFAF8;
  --head: #FBFAF8;
  --muted: #A6BCCC;         /* between --slate-dk and its hover: 9.4:1 on the ground, 8.4:1 on the slab */
  --field: #101419;
  --field-line: #8FA9BC;
  --link: #8FA9BC;
  --focus: #8FA9BC;
  --btn: #8FA9BC;
  --btn-text: #101419;
  --btn-hover: #C5D1DC;
  /* Red is a signal, never a surface or body text: only the error rule uses it. */
  --signal: #D9453F;        /* --red-dk */
  --notice: #8FA9BC;
  --coho-slate: #8FA9BC;
  --coho-red: #D9453F;
  --word: #FBFAF8;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #FBFAF8;            /* --paper */
  --panel: #E4E9EE;         /* --fog, the reading slab */
  --panel-line: #CBD5DF;
  --text: #15181C;          /* --ink */
  --head: #1E2935;          /* --slate-ink */
  --muted: #4A5D72;         /* between --slate-mid and --slate: 6.5:1 on paper, 5.6:1 on the fog */
  --field: #FBFAF8;
  --field-line: #566A80;
  --link: #3A4E63;
  --focus: #3A4E63;
  --btn: #3A4E63;           /* --slate, the working colour */
  --btn-text: #FBFAF8;
  --btn-hover: #2A3847;
  --signal: #9E1B1F;        /* --red */
  --notice: #3A4E63;
  --coho-slate: #3A4E63;
  --coho-red: #9E1B1F;
  --word: #15181C;
  color-scheme: light;
}

/* BASE */
/* BASE */
/* BASE */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A column: the panel, then the legal footer under it, both centred. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 16px;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/26px var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.panel {
  width: 100%;
  max-width: 416px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  padding: 32px;
}

/* THE LOCKUP */
/* THE LOCKUP */
/* THE LOCKUP */

/* Every measurement from --h (docs/coho-lockup.css). */
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.coho-lockup { --h: 24px; display: inline-flex; align-items: flex-end; gap: calc(var(--h) * 0.1295); color: var(--word); text-decoration: none; }
.coho-mark { display: inline-flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; height: var(--h); width: calc(var(--h) * 2); }
.coho-mark > i { display: block; height: 47%; flex-shrink: 0; }
.coho-mark > i:first-child { background: var(--coho-slate); }
.coho-mark > i:last-child { background: var(--coho-red); }
.coho-word {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.07em;
  font-size: calc(var(--h) * 1.32979);
  margin-bottom: calc(var(--h) * -0.1642);
}

.theme-toggle {
  font: 500 13px/1 var(--sans);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--panel-line);
  padding: 8px 10px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--field-line); }

/* TYPE */
/* TYPE */
/* TYPE */

/* PT Serif headings on the --h scale, tracking -0.03em. */
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(24px * 1.32979);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--head);
  margin: 0 0 20px;
  text-wrap: balance;
}
p { margin: 0 0 16px; }
strong { font-weight: 600; }

/* FORMS */
/* FORMS */
/* FORMS */

form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
form.secondary { border-top: 1px solid var(--panel-line); padding-top: 20px; margin-top: 4px; }

label { font-weight: 600; font-size: 14px; line-height: 20px; margin-top: 12px; }
.optional { font-weight: 400; color: var(--muted); }

input[type="email"],
input[type="text"],
input[type="password"],
input[type="number"],
select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: 400 16px/1 var(--sans);
  color: var(--text);
  background-color: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 0;
}

/* Numbers are typed, not stepped: the spinner is a 10px target beside a field of millions. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* The platform's arrow is replaced by a chevron drawn in the theme's muted colour. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* A field shows focus by its own border growing to 2px, not with a ring around it. The inset
   shadow is the second pixel, so nothing around the field moves. */
input:focus,
select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: inset 0 0 0 1px var(--focus);
}

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

/* Square, like the fields, with the tick in the button's colours. */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 0;
  cursor: pointer;
}
input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--btn-text);
  border-bottom: 2px solid var(--btn-text);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
}
input[type="checkbox"]:checked { background: var(--btn); border-color: var(--btn); }
input[type="checkbox"]:checked::before { opacity: 1; }

.hint { font-size: 14px; line-height: 20px; color: var(--muted); margin: 4px 0 0; }
/* The slug line when it says no: in the signal colour, without the boxed alert `.error` draws. */
.hint.refused { color: var(--signal); }

/* color-scheme: light, in both themes. The widget's frame is a light-scheme
   document; inside a dark-scheme page a browser paints a mismatched frame on an
   opaque white canvas, which showed as a white edge round the dark widget. */
.captcha { margin-top: 16px; min-height: 78px; color-scheme: light; }

button[type="submit"],
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: 20px;
  padding: 0 20px;
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--btn-text);
  background: var(--btn);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
button[type="submit"]:hover, .button:hover { background: var(--btn-hover); }

button.quiet {
  color: var(--link);
  background: transparent;
  border: 1px solid var(--field-line);
}
button.quiet:hover { background: transparent; color: var(--text); }

.links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--text); }

/* Messages: a rule on the left, text in the body colour. Red marks the rule only. */
.error,
.notice {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 20px;
  background: var(--field);
  border-left: 3px solid var(--notice);
}
.error { border-left-color: var(--signal); }

/* Body colour, not --muted: the line that says what creating an account agrees to must be easy to read. */
.assent { font-size: 14px; line-height: 20px; margin: 16px 0 0; }

/* FOOTER */
/* FOOTER */
/* FOOTER */

.site-footer {
  width: 100%;
  max-width: 720px;
  margin-top: 24px;
  font-size: 13px;
  line-height: 20px;
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
/* Cookie settings: a button, since it opens the bar rather than going anywhere, dressed as the links beside it. */
.site-footer button.link {
  font: inherit;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.site-footer button.link:hover { color: var(--text); }

/* CONSENT */
/* CONSENT */
/* CONSENT */

/* Fixed to the foot of the window until answered. Accept and Decline are the same button, so
   declining is exactly as easy as accepting, as EU regulators expect. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 32px;
  padding: 20px 24px;
  background: var(--panel);
  border-top: 1px solid var(--field-line);
  font-size: 14px;
  line-height: 22px;
}
.consent[hidden] { display: none; }
.consent p { margin: 0; max-width: 64ch; }
.consent-actions { display: flex; gap: 12px; }
.consent .button { margin-top: 0; height: 44px; min-width: 112px; }
/* Room under the footer while the bar covers the bottom of the page. */
body.asking { padding-bottom: 200px; }

/* LEGAL PAGES */
/* LEGAL PAGES */
/* LEGAL PAGES */

/* A reading column: wider than a form, still about 75 characters a line. */
.panel.document { max-width: 720px; padding: 40px 48px 48px; }

.document .updated { color: var(--muted); font-size: 14px; line-height: 20px; margin-top: -8px; }

.document h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--head);
  margin: 40px 0 12px;
  scroll-margin-top: 24px;
  text-wrap: balance;
}
.document h3 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--head); margin: 24px 0 8px; }

.document ul,
.document ol { margin: 0 0 16px; padding-left: 22px; }
.document li { margin-bottom: 6px; }
.document li > ul,
.document li > ol { margin: 6px 0 0; }

.document dl { margin: 0 0 16px; }
.document dt { font-weight: 600; color: var(--head); }
.document dd { margin: 0 0 12px; }

/* The plain-language summary at the top: a rule on the left, like a notice. */
.document .summary {
  background: var(--field);
  border-left: 3px solid var(--notice);
  padding: 16px 20px 4px;
  margin: 0 0 24px;
}
.document .summary ul { margin-bottom: 12px; }

.document .toc { font-size: 14px; line-height: 20px; margin: 0 0 8px; }
.document .toc ol { columns: 2 220px; column-gap: 32px; margin: 0; }
.document .toc li { break-inside: avoid; }

/* Tables scroll inside themselves on a phone, never the page. */
.table-wrap { overflow-x: auto; margin: 0 0 20px; }
.document table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.document th,
.document td {
  text-align: left;
  vertical-align: top;
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--panel-line);
  /* break-word, not anywhere: anywhere shrinks a column to a letter and splits every word in it. */
  overflow-wrap: break-word;
}
.document th:last-child,
.document td:last-child { padding-right: 0; }
.document thead th { color: var(--head); font-weight: 600; border-bottom-color: var(--field-line); }
.document tbody th { color: var(--head); font-weight: 600; }

/* THE PRICING CALCULATOR */
/* THE PRICING CALCULATOR */
/* THE PRICING CALCULATOR */

/* A selling page rather than a contract: wider, so the form can sit in columns and the answer's
   four columns have room, with prose still held to a reading measure. */
.panel.document.wide { max-width: 880px; }
.wide > p,
.wide > ul,
.wide > .lead { max-width: 68ch; }

/* Groups of fields under a small heading and a rule, the fields two to a row. */
form.calc { gap: 28px; margin: 28px 0 0; }
fieldset.group { border: 0; border-top: 1px solid var(--panel-line); margin: 0; padding: 20px 0 0; min-width: 0; }
fieldset.group legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
  font: 600 12px/16px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.calc .grid { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.calc .grid.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Labels sit on their fields, so a label that wraps pushes its own field down and not its row's. */
.calc .field { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.calc .field label { margin-top: 0; }

/* A yes-or-no need as a tile: the whole tile is the target, and a chosen one keeps a 2px edge. */
.option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  padding: 16px;
  font-weight: 400;
  background: var(--field);
  border: 1px solid var(--panel-line);
  cursor: pointer;
}
.option:hover { border-color: var(--field-line); }
.option:has(input:checked),
.option:has(input:focus-visible) { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.option input { margin-top: 2px; }
.option strong { display: block; font-size: 15px; line-height: 24px; color: var(--head); }
.option .hint { display: block; margin: 2px 0 0; }

/* What it assumes stays folded: a plus that turns to a minus, not the platform's triangle. */
.assumptions summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--link);
  cursor: pointer;
  list-style: none;
}
.assumptions summary::-webkit-details-marker { display: none; }
.assumptions summary::before {
  content: "+";
  display: inline-grid;
  place-content: center;
  width: 20px;
  height: 20px;
  font: 400 16px/1 var(--sans);
  border: 1px solid var(--field-line);
}
.assumptions[open] summary::before { content: "\2212"; }
.assumptions summary:hover { color: var(--text); }
.assumptions .grid { margin-top: 18px; }
.assumptions > .hint { margin-top: 12px; max-width: 68ch; }

.calc .actions button[type="submit"] { margin-top: 0; min-width: 220px; height: 52px; font-size: 16px; }

/* The answer: plans across, rows down, what was asked under each row's name. */
#calculator-result:not(:empty) { margin-top: 40px; }
#calculator-result.busy { opacity: 0.5; transition: opacity 120ms; }
#calculator-result > h3 { font: 400 24px/1.25 var(--serif); letter-spacing: -0.02em; color: var(--head); margin: 0 0 16px; }
#calculator-result > .hint { max-width: 68ch; }
.document table.estimate { font-size: 15px; line-height: 22px; }
.document table.estimate th,
.document table.estimate td { padding: 12px 16px; }
.document table.estimate th:first-child { padding-left: 0; }
.document table.estimate thead th { vertical-align: bottom; }
.document table.estimate thead th:not(:first-child) { font: 400 20px/1.2 var(--serif); letter-spacing: -0.02em; }
.document table.estimate tbody th .hint { display: block; font-weight: 400; }
.document table.estimate tfoot th,
.document table.estimate tfoot td { border-bottom: 0; border-top: 1px solid var(--field-line); padding-top: 16px; padding-bottom: 16px; }
.document table.estimate tfoot th { vertical-align: middle; }
.document table.estimate tfoot strong { font: 400 26px/1.1 var(--serif); letter-spacing: -0.02em; color: var(--head); }
.document table.estimate td.unavailable { color: var(--muted); }
/* The cheapest plan's column is a band, so the eye can run down it. */
.document table.estimate .best { background: var(--field); }
.badge {
  display: block;
  width: max-content;
  margin-top: 8px;
  padding: 4px 6px;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--btn-text);
  background: var(--btn);
}

/* Sign Up Now, under the answer. */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin: 32px 0 0;
  padding: 24px 28px;
  background: var(--field);
  border-left: 3px solid var(--notice);
}
.cta p { margin: 0; max-width: 46ch; }
.cta .button { margin-top: 0; height: 52px; padding: 0 28px; font-size: 16px; }

.document code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }

/* Disclaimers and limits of liability are set in capitals so they are conspicuous. */
.document .conspicuous { font-size: 14px; line-height: 22px; letter-spacing: 0.01em; }

@media (max-width: 480px) {
  body { padding: 24px 16px; }
  .panel { padding: 24px 20px; }
  .panel.document { padding: 24px 20px 32px; }
  .document th, .document td { padding-right: 8px; }
  .document table.estimate th, .document table.estimate td { padding: 10px 8px; }
  .document table.estimate tfoot strong { font-size: 20px; }
  /* The row names stay put while the plans scroll under them, so a swiped column is still labelled. */
  .document table.estimate th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
  .cta { padding: 20px; }
  .consent { padding: 16px; }
  .consent-actions { width: 100%; }
  .consent .button { flex: 1; }
  .cta .button { width: 100%; }
}

@media (max-width: 640px) {
  .calc .grid,
  .calc .grid.thirds { grid-template-columns: minmax(0, 1fr); }
  .calc .actions button[type="submit"] { width: 100%; }
}