/* Easy Resume's public pages. The palette is the app icon's: a white sheet on black. Light mode is the paper,
   dark mode is the icon's background. */

:root {
  color-scheme: light dark;

  --bg: #f4f4f2;
  --ink: #111111;
  --muted: #5a5a5a;
  --line: #dcdcd8;
  --link: var(--ink);

  --paper-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 10px 28px rgb(0 0 0 / 0.14);

  --font-display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 40rem;
  --gutter: clamp(1rem, 5vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --ink: #ececec;
    --muted: #a3a3a3;
    --line: #2c2c2c;

    --paper-shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 10px 28px rgb(0 0 0 / 0.6);
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

main {
  flex: 1;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  padding: 0.5rem 0.875rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus-visible {
  top: 0.75rem;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

/* The column every page sits in. */
.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The app icon is black, so on the dark page it gets a hairline edge to stay a tile. */
.icon {
  border-radius: 22.5%;
}

@media (prefers-color-scheme: dark) {
  .icon {
    box-shadow: 0 0 0 1px var(--line);
  }
}

/* Header on every page: the icon and name lead home, the pages sit to the right. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand img {
  width: 2rem;
  height: 2rem;
}

.pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pages a {
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}

.pages a:hover,
.pages a[aria-current="page"] {
  color: var(--ink);
}

.pages a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.35em;
}

.fine-print {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Inner pages: policy, terms, support */

.doc {
  padding-block: clamp(2rem, 6vw, 3.5rem) clamp(3rem, 8vw, 5rem);
}

.doc h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.updated {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.doc .lede {
  margin: 0 0 2.5rem;
  color: var(--muted);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  line-height: 1.45;
}

.doc h1 + .lede {
  margin-top: 1rem;
}

.doc h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.doc h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.doc p,
.doc ul,
.doc ol {
  margin: 0 0 1rem;
}

.doc ul,
.doc ol {
  padding-left: 1.25rem;
}

.doc li {
  margin-bottom: 0.5rem;
}

.doc li::marker {
  color: var(--muted);
}

.doc strong {
  font-weight: 650;
}

/* Support's contact block. */
.contact {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
}

.contact p {
  margin: 0 0 0.5rem;
}

.contact p:last-child {
  margin-bottom: 0;
}

.contact .email {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
}

/* 404 */

.lost {
  padding-block: clamp(4rem, 14vw, 8rem);
}

.lost img {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 2rem;
}

.lost h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.375rem, 1.5rem + 4.6vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.lost p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.1875rem;
}

/* Footer on every page */

.site-footer {
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: inherit;
}

.site-footer a:hover {
  color: var(--ink);
}

.site-footer .pages a {
  text-decoration: none;
}

/* Landing page: wider than the reading measure, so the hero has room for the stack of paper. */

.landing {
  --measure: 64rem;
}

.hero {
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 7vw, 5rem) clamp(3rem, 8vw, 5.5rem);
}

@media (min-width: 45em) {
  .hero {
    grid-template-columns: 1.05fr 1fr;
  }
}

.pitch {
  margin: 0 0 1.25rem;
  font-size: clamp(2.375rem, 1.5rem + 4.6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.lede {
  margin: 0 0 2rem;
  max-width: 30rem;
  color: var(--muted);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  line-height: 1.45;
}

.badge {
  display: inline-block;
  border-radius: 9px;
}

.badge img {
  width: auto;
  height: 2.75rem;
}

.hero .fine-print {
  margin: 0.875rem 0 0;
}

/* Sheets of paper: the template previews, white in both modes, with a soft shadow. */
.sheet {
  background: #fff;
  border-radius: 3px;
  box-shadow: var(--paper-shadow);
}

/* The three templates fanned like printouts. The sheets sit inset far enough that their rotated corners stay
   inside the box, so nothing needs clipping and the paper shadows show in full. */
.paper-stack {
  position: relative;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  aspect-ratio: 1 / 0.97;
}

.paper-stack .sheet {
  position: absolute;
  width: 58%;
}

.sheet-back-left {
  left: 5%;
  top: 9%;
  transform: rotate(-7deg);
}

.sheet-back-right {
  right: 5%;
  top: 7%;
  transform: rotate(6deg);
}

.paper-stack .sheet-front {
  left: 19%;
  top: 1.5%;
  width: 62%;
}

.section {
  padding-block: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
}

.section h2 {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.section p {
  margin: 0;
  color: var(--muted);
}

.features {
  display: grid;
  gap: 1.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 36em) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60em) {
  .features {
    grid-template-columns: repeat(4, 1fr);
  }
}

.plans {
  display: grid;
  gap: 2rem 3rem;
  align-items: start;
}

@media (min-width: 45em) {
  .plans {
    grid-template-columns: 1fr 1fr;
  }
}

.plans h2 {
  font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
  margin-bottom: 0.5rem;
}

.templates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.templates p {
  margin-top: 0.625rem;
  color: var(--ink);
  font-size: 0.875rem;
}

.tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}