/* Letter Decoder product pages. Loaded after styles.css, which provides the
   fonts, color tokens and focus styles. Everything here is scoped to
   body.product so the homepage and company privacy page are unaffected.
   No animation: these are reading pages. */

.product {
  --doc: 46rem;
  line-height: 1.6;
}

.product .container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.product .skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.product .skip-link:focus {
  transform: none;
}

/* Header ----------------------------------------------------------------- */

.product .header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: 84px;
  border-bottom: 1px solid var(--line);
}

.product .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.product .brand-mark {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1;
}

.product .brand-mark-small {
  width: 32px;
  height: 32px;
  font-size: 18px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(23, 33, 28, 0.2);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 180ms ease;
}

.lang-switch:hover {
  border-color: var(--ink);
}

.product-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-left: -12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.product-nav .product-name {
  margin-right: 8px;
  color: var(--ink);
  font-weight: 600;
}

.product-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.product-nav a:hover {
  color: var(--ink);
}

.product-nav a[aria-current="page"]:not(.product-name) {
  padding: 0 14px;
  background: rgba(28, 76, 56, 0.1);
  color: var(--green);
}

/* Shared type ------------------------------------------------------------- */

.product .eyebrow {
  margin: 0 0 20px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.product h1,
.product h2,
.product h3 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

.product h1 {
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.product a {
  text-underline-offset: 0.18em;
}

/* Long-form documents (Privacy, Terms, Support) -------------------------- */

.doc {
  max-width: var(--doc);
  padding: 72px 0 104px;
}

.doc-header {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.product .doc-lead {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
}

.doc .doc-meta {
  margin: 20px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.doc h2 {
  margin: 56px 0 16px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  scroll-margin-top: 24px;
}

.doc h3 {
  margin: 32px 0 10px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  scroll-margin-top: 24px;
}

.doc p,
.doc li {
  font-size: 17px;
  line-height: 1.65;
}

.doc p {
  margin: 0 0 16px;
}

.doc ul,
.doc ol {
  margin: 0 0 16px;
  padding-left: 1.3em;
}

.doc li + li {
  margin-top: 8px;
}

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

.doc a {
  color: var(--green);
  font-weight: 500;
}

.doc strong {
  font-weight: 600;
}

.summary-box {
  margin: 0 0 8px;
  padding: 28px 32px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}

.summary-box h2 {
  margin-top: 0;
  font-size: 22px;
}

.summary-box ul {
  margin-bottom: 0;
}

.toc {
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}

.doc .toc h2 {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.toc ol {
  columns: 2;
  column-gap: 32px;
  margin: 0;
  padding-left: 1.3em;
}

.toc li {
  break-inside: avoid;
  font-size: 16px;
}

.toc li + li {
  margin-top: 4px;
}

.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Provider table: a table on wide screens, stacked rows on phones. */
.provider-table {
  width: 100%;
  margin: 8px 0 20px;
  border-collapse: collapse;
  font-size: 16px;
}

.provider-table th,
.provider-table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.provider-table thead th {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.provider-table tbody th {
  font-weight: 600;
}

.note {
  padding: 16px 20px;
  border-left: 3px solid var(--green);
  background: rgba(28, 76, 56, 0.06);
  border-radius: 0 12px 12px 0;
}

/* Support FAQ --------------------------------------------------------------- */

.faq-group h2 {
  margin-top: 48px;
}

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

.faq:last-child {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 44px 12px 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background: rgba(28, 76, 56, 0.1);
  color: var(--green);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}

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

.faq-body {
  padding: 0 0 16px;
}

.contact-card {
  margin-top: 56px;
  padding: 36px 32px;
  border-radius: 24px;
  background: var(--ink);
  color: var(--white);
}

.contact-card h2 {
  margin: 0 0 12px;
  color: var(--white);
}

.contact-card p,
.contact-card li {
  color: var(--on-green);
}

.contact-card .eyebrow {
  color: var(--lime);
}

.contact-card a:not(.button) {
  color: var(--lime);
}

.contact-card :focus-visible {
  outline-color: var(--lime);
}

/* Buttons (shared look with the homepage) ----------------------------------- */

.product .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.product .button-primary {
  background: var(--green);
  color: var(--white);
}

.product .button-primary:hover {
  background: var(--green-dark);
}

.product .button-secondary {
  border: 1px solid rgba(23, 33, 28, 0.2);
  background: var(--white);
  color: var(--ink);
}

.product .button-secondary:hover {
  border-color: var(--ink);
}

.product .button-light {
  background: var(--white);
  color: var(--ink);
}

.product .button-light:hover {
  background: var(--lime);
}

/* Overview page --------------------------------------------------------------- */

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 64px;
  align-items: end;
  padding: 88px 0 96px;
}

.product-hero h1 {
  font-size: 84px;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.product-hero h1 span {
  color: var(--green);
}

.product-hero .doc-lead {
  max-width: 32em;
  margin-top: 28px;
}

.hero-aside {
  padding: 28px;
  border-radius: 24px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}

.status-pill {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-aside p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 16px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.steps-band {
  background: var(--green);
  color: var(--white);
}

.steps-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px var(--gutter) 104px;
}

.steps-band .eyebrow {
  color: var(--lime);
}

.steps-band h2 {
  max-width: 14em;
  margin-bottom: 48px;
  font-size: 48px;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 254, 249, 0.5);
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.6fr) minmax(0, 0.6fr);
  gap: 40px;
  align-items: baseline;
  padding: 28px 0 32px;
  border-bottom: 1px solid rgba(255, 254, 249, 0.18);
}

.step-number {
  color: var(--lime);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.steps h3 {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.steps p {
  max-width: 30em;
  margin: 0;
  color: var(--on-green);
  font-size: 17px;
  line-height: 1.6;
}

.overview-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px 96px;
  padding: 104px 0;
  border-bottom: 1px solid var(--line);
}

.overview-section:last-of-type {
  border-bottom: 0;
}

.overview-section h2 {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.overview-section .doc {
  padding: 0;
}

.overview-section .doc > :first-child {
  margin-top: 0;
}

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

.know-list li {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.know-list li + li {
  margin-top: 0;
}

.know-list strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}

.link-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-cards a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 44px;
  padding: 24px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 180ms ease;
}

.link-cards a:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.link-cards strong {
  font-size: 18px;
}

.link-cards span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
}

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

.product .copyright {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.product .footer-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* Tablet (≤1079px) ------------------------------------------------------------ */

@media (max-width: 1079px) {
  .product-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .product-hero h1 { font-size: 64px; }
  .overview-section { grid-template-columns: minmax(0, 1fr); }
  .link-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile (≤759px) ------------------------------------------------------------- */

@media (max-width: 759px) {
  .product .header-bar { min-height: 68px; }
  .product-nav { gap: 0 2px; margin-left: -10px; }
  .product-nav a { padding: 0 10px; }
  .product-nav .product-name { margin-right: 2px; }
  .doc .toc h2 { font-size: 12px; }
  .doc-header .doc-lead { font-size: 17px; }
  .product h1 { font-size: 40px; }
  .product-hero { padding: 56px 0 64px; }
  .product-hero h1 { font-size: 46px; }
  .doc { padding: 48px 0 72px; }
  .doc h2 { margin-top: 44px; font-size: 26px; }
  .summary-box { padding: 22px 20px; }
  .toc ol { columns: 1; }
  .steps-inner { padding: 72px var(--gutter) 80px; }
  .steps-band h2 { font-size: 34px; }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0 26px; }
  .steps h3 { font-size: 24px; }
  .overview-section { gap: 28px; padding: 72px 0; }
  .overview-section h2 { font-size: 34px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .contact-card { padding: 28px 22px; border-radius: 20px; }

  /* Stack the provider table into labelled rows. */
  .provider-table thead { display: none; }
  .provider-table,
  .provider-table tbody,
  .provider-table tr,
  .provider-table th,
  .provider-table td { display: block; }
  .provider-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .provider-table th,
  .provider-table td { padding: 2px 0; border: 0; }
  .provider-table td::before {
    content: attr(data-label) ": ";
    color: var(--muted);
    font-weight: 600;
  }
}

/* Narrow phones (≤379px): keep the brand and language switch on one row. */
@media (max-width: 379px) {
  .product .brand { gap: 10px; font-size: 15px; }
  .product .header-bar { column-gap: 12px; }
  .lang-switch { padding: 0 12px; font-size: 14px; }
}