/* The pieces pages are built from: the hero, phone pictures, cards, steps, the skin tone row,
   questions, the contact form and tables. Each part has a heading comment, so it's easy to find. */

/* ---------- the tip for people inside Instagram or TikTok (main.js shows it) ---------- */

.inapp-notice {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  padding: 0.7rem 1rem;
  background: var(--sun-soft);
  font-size: 0.95rem;
  text-align: center;
}

.inapp-notice.is-visible {
  display: flex;
}

.inapp-notice button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- the hero, at the top of Home ---------- */

.hero {
  padding-block: var(--space-5) var(--space-6);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--space-5);
}

.hero-lead {
  font-size: 1.25rem;
  color: var(--ink-soft);
  max-width: 520px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-4) var(--space-3);
}

/* the three small promises under the buttons */
.hero-promises {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--muted);
}

.hero-promises li::before {
  content: "✓";
  margin-right: 6px;
  font-weight: 700;
  color: var(--mint-text);
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- phone pictures: a real app screen inside a phone shaped frame ---------- */

.phone {
  width: 100%;
  max-width: 280px;
  margin: 0;
  padding: 10px;
  border-radius: 44px;
  background: var(--ink);
  box-shadow: 0 30px 60px rgba(27, 26, 51, 0.22), 0 8px 18px rgba(27, 26, 51, 0.12);
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 34px;
}

/* two phones side by side, one a little lower, for the hero */
.phone-pair {
  display: flex;
  justify-content: center;
  /* each phone is only as tall as its own screen */
  align-items: flex-start;
  gap: var(--space-3);
}

.phone-pair .phone:last-child {
  margin-top: var(--space-5);
}

@media (max-width: 900px) {
  .phone-pair {
    margin-top: var(--space-2);
  }
}

@media (max-width: 560px) {
  .phone-pair {
    gap: var(--space-2);
  }

  .phone-pair .phone {
    padding: 6px;
    border-radius: 30px;
  }

  .phone-pair .phone img {
    border-radius: 25px;
  }

  .phone-pair .phone:last-child {
    margin-top: var(--space-4);
  }
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  gap: var(--space-3);
}

.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cards-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 960px) {
  .cards-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .cards-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .cards-4 {
    grid-template-columns: 1fr;
  }
}

.card {
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

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

/* the round coloured circle with a small drawing, at the top of a card */
.card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-2);
  border-radius: 16px;
  background: var(--lilac-soft);
  color: var(--ink);
}

.card-icon svg {
  width: 26px;
  height: 26px;
}

.card-icon-coral {
  background: var(--coral-soft);
}

.card-icon-mint {
  background: var(--mint-soft);
}

.card-icon-sun {
  background: var(--sun-soft);
}

/* ---------- numbered steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* the big serif number in a lilac square, the same as the routine steps in the app */
.step-number {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-3);
  border-radius: 18px;
  background: var(--lilac-soft);
  font-family: var(--font-display);
  font-size: 2rem;
}

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

.center-link {
  margin-top: var(--space-4);
  text-align: center;
}

/* ---------- features: words on one side, a phone on the other ---------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.feature + .feature {
  border-top: 1px solid var(--line);
}

/* every other feature swaps sides, so the page doesn't feel like a list */
.feature:nth-of-type(even) .feature-words {
  order: 2;
}

.feature .phone {
  justify-self: center;
}

/* feature headings use the serif, a size between a page heading and a card heading */
.feature-words h2,
.feature-words h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}

.feature-words p {
  color: var(--ink-soft);
  font-size: 1.1rem;
}

.feature-words ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.2rem;
  color: var(--ink-soft);
}

.feature-words li {
  margin-bottom: 0.4rem;
}

@media (max-width: 760px) {
  .feature {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .feature:nth-of-type(even) .feature-words {
    order: 0;
  }

  .feature .phone {
    max-width: 240px;
  }
}

/* the small coloured label, like "Early estimate" */
.tag {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lilac-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.tag-mint {
  background: var(--mint-soft);
  color: var(--mint-text);
}

.tag-coral {
  background: var(--coral-soft);
  color: var(--accent-text);
}

/* ---------- the ten Monk skin tone shades ---------- */

.tones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.tone {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: var(--shadow);
}

/* the colours come from the Monk Skin Tone Scale, lightest to deepest */
.tone-1 { background: #f6ede4; }
.tone-2 { background: #f3e7db; }
.tone-3 { background: #f7ead0; }
.tone-4 { background: #eadaba; }
.tone-5 { background: #d7bd96; }
.tone-6 { background: #a07e56; }
.tone-7 { background: #825c43; }
.tone-8 { background: #604134; }
.tone-9 { background: #3a312a; }
.tone-10 { background: #292420; }

@media (max-width: 560px) {
  .tone {
    width: 44px;
    height: 44px;
    border-width: 2px;
  }
}

.tones-credit {
  margin-top: var(--space-3);
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- the dark privacy band ---------- */

.band {
  padding: var(--space-5) var(--space-4);
  border-radius: 36px;
  background: var(--ink);
  color: var(--white);
}

.band h2 {
  color: var(--white);
}

.band p {
  color: #d9d4e8;
  max-width: 620px;
}

.band a {
  color: var(--white);
}

.band-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}

.band-points li {
  padding: var(--space-3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid #3a3857;
}

.band-points strong {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
}

.band-points span {
  color: #d9d4e8;
  font-size: 0.95rem;
}

@media (max-width: 760px) {
  .band {
    padding: var(--space-4) var(--space-3);
    border-radius: 28px;
  }

  .band-points {
    grid-template-columns: 1fr;
  }
}

/* ---------- questions that open and close ---------- */

.faq {
  max-width: 780px;
  margin-inline: auto;
}

.faq details {
  margin-bottom: var(--space-2);
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 1.15rem 1.4rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

/* hide the browser's own little triangle, we draw a plus instead */
.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent-text);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  margin: 0;
  padding: 0 1.4rem 1.25rem;
  color: var(--ink-soft);
}

/* ---------- the last call to action, at the bottom of pages ---------- */

.final-call {
  padding: var(--space-5) var(--space-3);
  border-radius: 36px;
  background: linear-gradient(135deg, var(--coral-soft), var(--lilac-soft));
  border: 1px solid var(--line);
  text-align: center;
}

.final-call p {
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

/* ---------- a soft box for important notes, like "what Dermata is not" ---------- */

.notice-box {
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: 24px;
  background: var(--sun-soft);
}

.notice-box p {
  margin: 0;
}

@media (max-width: 560px) {
  .notice-box {
    padding: var(--space-3);
  }
}

/* ---------- tables, like what we keep on the privacy page ---------- */

/* lets a wide table scroll sideways on a phone instead of squashing */
.table-wrap {
  overflow-x: auto;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

th,
td {
  padding: 0.9rem 1.2rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

th {
  background: var(--lilac-soft);
  font-size: 0.9rem;
}

tr:last-child td {
  border-bottom: none;
}

/* ---------- the contact form ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 820px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.form {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

@media (max-width: 560px) {
  .form {
    padding: var(--space-3);
  }
}

.form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-small);
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
}

.form textarea {
  min-height: 160px;
  resize: vertical;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 3px solid var(--sky);
  outline-offset: 1px;
  background: var(--white);
}

/* the hidden box only spam robots fill in */
.trap-field {
  position: absolute;
  left: -9999px;
}

.form-message {
  display: none;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-small);
  background: var(--mint-soft);
  color: var(--mint-text);
  font-weight: 600;
}

.form-message.is-visible {
  display: block;
}

.form-message.is-problem {
  background: var(--coral-soft);
  color: var(--accent-text);
}

.contact-list {
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-card);
  background: var(--glass);
  border: 1px solid var(--line);
}

.contact-list h2 {
  font-size: 1.75rem;
}

.contact-list dl {
  margin: 0 0 var(--space-3);
}

.contact-list dt {
  font-weight: 600;
}

.contact-list dd {
  margin: 0 0 var(--space-2);
}

/* ---------- the not found page ---------- */

.not-found {
  padding-block: var(--space-6);
  text-align: center;
}

.not-found p {
  color: var(--muted);
}

/* ---------- small helpers used on a few pages ---------- */

/* a gap above a heading that follows text, inside the reading column */
.space-above {
  margin-top: var(--space-5);
}

/* the mission line on the About page */
.big-quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.3;
}

/* numbered steps written as plain text, like "What happens when you scan" */
.plain-steps {
  margin: 0;
  padding-left: 1.4rem;
}

.plain-steps li {
  margin-bottom: var(--space-2);
  padding-left: 0.3rem;
}

.plain-steps li::marker {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--accent-text);
}

.center-buttons {
  justify-content: center;
}

/* ---------- the Terms and Cookies pages ---------- */

/* smaller headings than the rest of the site, so long legal text is easy to scan */
.legal-text {
  padding-top: var(--space-3);
}

.legal-text h2 {
  font-size: 1.6rem;
  margin-top: var(--space-4);
}

.legal-text .notice-box {
  margin-top: 0;
}

.space-above-small {
  margin-top: var(--space-2);
}