/* Shared styles for the per-client landing pages (gmail / outlook / yahoo).
 *
 * Extracted from inbox-preview/index.html rather than duplicated inline in each
 * page: three copies of ~500 lines would drift the moment anyone edited one, and
 * an external sheet is cacheable across the pages a visitor is likely to browse
 * between. index.html keeps its own inline styles untouched, so this cannot
 * regress the existing trial page.
 *
 * There is no build step in this app — this file is committed as-is.
 */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

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

    :root {
      --bg: #f7f4ef;
      --text: #211d18;
      --text-dim: #6b6453;
      --accent: #181410;
      --line: #d6cfc1;
      --code-bg: #f5f2ec;
      --green: #15803d;
      --amber: #b45309;
      --red: #dc2626;
    }

    html {
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
    }
    .powerline-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      z-index: 100;
      background: linear-gradient(90deg, transparent, var(--bg) 20%, var(--bg) 80%, transparent);
      overflow: hidden;
    }

    .powerline-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, #181410 40%, #181410 60%, transparent);
      animation: powerPulse 4s ease-in-out infinite;
    }

    @keyframes powerPulse {
      0% { left: -100%; opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { left: 100%; opacity: 0; }
    }
    nav {
      position: fixed;
      top: 2px;
      left: 0;
      right: 0;
      z-index: 50;
      padding: 1.5rem 3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(180deg, var(--bg) 60%, transparent);
    }

    .logo {
      font-weight: 600;
      font-size: 0.875rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent);
      text-decoration: none;
    }

    .logo span {
      color: var(--text-dim);
      font-weight: 400;
    }

    .nav-contact {
      font-size: 0.8125rem;
      color: var(--text-dim);
      text-decoration: none;
      letter-spacing: 0.05em;
      transition: color 0.3s;
    }

    .nav-contact:hover {
      color: var(--accent);
    }
    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 11rem 2rem 5rem;
      position: relative;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 900px;
      height: 900px;
      max-width: 100vw;
      background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-label {
      font-size: 0.75rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 2rem;
      font-weight: 500;
    }

    h1 {
      font-size: clamp(2.75rem, 7vw, 5.5rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.02;
      color: var(--accent);
      margin-bottom: 1.75rem;
      max-width: 14ch;
    }

    .tagline {
      font-size: clamp(1.0625rem, 2vw, 1.375rem);
      font-weight: 300;
      color: var(--text-dim);
      max-width: 620px;
      line-height: 1.5;
      margin-bottom: 3rem;
    }

    .section-head {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .section-kicker {
      font-size: 0.75rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--text-dim);
      font-weight: 500;
      margin-bottom: 1rem;
    }

    .section-title {
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--accent);
      line-height: 1.1;
    }

    .section-sub {
      font-size: 1.0625rem;
      font-weight: 300;
      color: var(--text-dim);
      max-width: 560px;
      margin: 1.25rem auto 0;
      line-height: 1.55;
    }

    .divider {
      width: 1px;
      height: 70px;
      background: linear-gradient(180deg, transparent, rgba(0,0,0,0.12), transparent);
      margin: 0 auto;
    }

    .block { padding: 5rem 0; }

    .step-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .step-list li {
      display: flex;
      gap: 0.875rem;
      align-items: baseline;
      font-size: 0.9375rem;
      color: var(--text);
      font-weight: 300;
      line-height: 1.5;
    }

    .step-list .n {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      color: var(--bg);
      background: var(--accent);
      min-width: 1.4rem;
      height: 1.4rem;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      flex-shrink: 0;
      transform: translateY(0.1rem);
    }

    .code-card {
      background: var(--code-bg);
      border: 1px solid var(--line);
      border-radius: 6px;
      overflow: hidden;
    }

    .code-head {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--line);
      background: #e9e4db;
    }

    .dot { width: 10px; height: 10px; border-radius: 50%; }
    .dot.r { background: #cbc4b6; }
    .dot.y { background: #cbc4b6; }
    .dot.g { background: #cbc4b6; }
    .code-title {
      margin-left: 0.5rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      color: var(--text-dim);
    }

    pre {
      margin: 0;
      padding: 1.25rem 1.25rem;
      overflow-x: auto;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8125rem;
      line-height: 1.7;
      color: var(--text);
    }

    .c-key { color: #7c3aed; }
    .c-str { color: #15803d; }
    .c-num { color: #b45309; }
    .c-com { color: var(--text-dim); }
    .c-cmd { color: #2563eb; }
    .clients-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .client {
      background: var(--bg);
      padding: 1.75rem 1.5rem;
    }

    .client-name {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 0.5rem;
    }

    .tier {
      display: inline-block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.625rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.2rem 0.55rem;
      border-radius: 3px;
      margin-bottom: 0.875rem;
    }

    .tier.real {
      color: var(--green);
      border: 1px solid rgba(21, 128, 61, 0.35);
      background: rgba(21, 128, 61, 0.08);
    }

    .tier.sim {
      color: var(--text-dim);
      border: 1px solid var(--line);
    }

    .client-note {
      font-size: 0.8125rem;
      line-height: 1.5;
      color: var(--text-dim);
      font-weight: 300;
    }
    .integrations {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .integration {
      background: var(--bg);
      padding: 2.25rem 2rem;
      text-align: center;
    }

    .integration h4 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 0.5rem;
    }
    .integration .tier {
      margin-bottom: 0.75rem;
    }

    .integration p {
      font-size: 0.875rem;
      line-height: 1.55;
      color: var(--text-dim);
      font-weight: 300;
    }

    .integration code {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      color: var(--text);
      background: var(--code-bg);
      padding: 0.15rem 0.4rem;
      border-radius: 3px;
      border: 1px solid var(--line);
    }

    /* A code chip that IS the link keeps the accent color, or the link is
       invisible (the chip rule above would override the anchor's color). */
    .integration a code { color: var(--accent); }

    .html-input {
      width: 100%;
      min-height: 150px;
      resize: vertical;
      background: var(--code-bg);
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--text);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8125rem;
      line-height: 1.6;
      padding: 0.9rem 1rem;
      margin-bottom: 0.875rem;
      transition: border-color 0.2s;
    }
    .html-input:focus { outline: none; border-color: rgba(0,0,0,0.28); }
    .html-input::placeholder { color: #b0a99b; }

    .start-btn {
      width: 100%;
      font-size: 0.8125rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--bg);
      background: var(--accent);
      border: 1px solid var(--accent);
      padding: 0.8rem 1rem;
      cursor: pointer;
      transition: all 0.25s;
    }
    .start-btn:hover { background: transparent; color: var(--accent); }

    .render-status {
      font-size: 0.8125rem;
      line-height: 1.5;
      color: var(--text-dim);
      min-height: 1.2rem;
      margin-top: 0.75rem;
    }
    .render-status.pending { color: var(--amber); }
    .render-status.ok { color: var(--green); }
    .render-status a { color: var(--accent); text-decoration: underline; }
    .tryit {
      width: 100%;
      max-width: 840px;
      margin: 1rem auto 0;
      text-align: left;
    }

    .tryit-tabs {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    .tryit-tab {
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--text-dim);
      background: transparent;
      border: 1px solid var(--line);
      padding: 0.6rem 1.75rem;
      cursor: pointer;
      transition: all 0.25s;
    }
    .tryit-tab:hover { color: var(--text); }
    .tryit-tab.active {
      color: var(--bg);
      background: var(--accent);
      border-color: var(--accent);
    }

    .tryit-panel.hidden { display: none; }

    .tryit-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .tryit-col {
      background: var(--bg);
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
    }
    .tryit-panel > .tryit-col {
      border: 1px solid var(--line);
      position: relative;
      transition: border-color 0.2s, background 0.2s;
    }

    .tryit-col-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.6875rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 1rem;
    }

    .tryit .html-input { min-height: 132px; margin-bottom: 0.75rem; }
    .tryit .start-foot { margin-top: 1rem; }
    .tryit-col.dragover {
      border: 1px dashed var(--accent);
      background: #fff;
    }
    .tryit-col.dragover::after {
      content: 'Drop your .eml file to render';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(247, 244, 239, 0.92);
      color: var(--accent);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.875rem;
      letter-spacing: 0.05em;
      pointer-events: none;
      z-index: 2;
    }
    .drop-hint {
      font-size: 0.75rem;
      line-height: 1.5;
      color: var(--text-dim);
      margin-top: 0.75rem;
    }
    .drop-hint strong { color: var(--text); font-weight: 600; }
    .linkish {
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      color: var(--text);
      text-decoration: underline;
      cursor: pointer;
    }
    .linkish:hover { color: var(--accent); }

    .hero-scroll {
      display: inline-block;
      margin-top: 2.5rem;
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-dim);
      text-decoration: none;
      transition: color 0.3s;
    }
    .hero-scroll:hover { color: var(--accent); }
    footer {
      padding: 2rem 3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--line);
      max-width: 1140px;
      margin: 0 auto;
      width: 100%;
    }

    .footer-left {
      font-size: 0.75rem;
      color: var(--text-dim);
      letter-spacing: 0.05em;
    }

    .footer-right { display: flex; gap: 1.75rem; }

    .footer-right a {
      font-size: 0.75rem;
      color: var(--text-dim);
      text-decoration: none;
      letter-spacing: 0.05em;
      transition: color 0.3s;
    }

    .footer-right a:hover { color: var(--accent); }
    .fade-in {
      opacity: 0;
      transform: translateY(18px);
      animation: fadeIn 0.7s ease forwards;
    }
    .fade-in:nth-child(1) { animation-delay: 0.05s; }
    .fade-in:nth-child(2) { animation-delay: 0.2s; }
    .fade-in:nth-child(3) { animation-delay: 0.35s; }
    .fade-in:nth-child(4) { animation-delay: 0.5s; }

    @keyframes fadeIn {
      to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 860px) {
      .showcase { grid-template-columns: 1fr; gap: 2.25rem; }
      .pillars-grid { grid-template-columns: 1fr; }
      .analysis-grid { grid-template-columns: 1fr; }
      .integrations { grid-template-columns: 1fr; }
      .start-grid { grid-template-columns: 1fr; }
      .tryit-cols { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      nav { padding: 1.25rem 1.5rem; }
      section { padding: 0 1.5rem; }
      .hero { padding: 9rem 1.5rem 3.5rem; }
      .block { padding: 3.5rem 0; }
      footer { padding: 1.5rem; flex-direction: column; gap: 1rem; text-align: center; }
      .cta-row { flex-direction: column; width: 100%; }
      .cta-link { width: 100%; text-align: center; }
    }

/* ---------------------------------------------------------------------------
 * Layout + link rules the original extraction missed.
 *
 * The extractor kept CLASS selectors and dropped bare element rules, so
 * `section { max-width: 1140px; margin: 0 auto }` was lost and every section ran
 * full-bleed instead of sitting in the page column. index.html was unaffected
 * because it keeps its own inline styles.
 * ------------------------------------------------------------------------- */
section {
  width: 100%;
  /* 840px of content (matching the hero's paste panel) + the 2rem gutters the
     hero uses, so both line up at every width.
     The gutters have to live on `.block`, not here: `.block` is a CLASS selector
     so it beats this element rule on specificity regardless of order — including
     inside media queries. With `padding: 5rem 0` the sections had NO horizontal
     padding, which was invisible above ~840px (max-width centred them) but ran
     them edge-to-edge on anything narrower while the hero stayed inset. */
  max-width: 904px;
  margin: 0 auto;
  padding: 0 3rem;
}

/* Inline links: the browser default blue is wrong for this palette. Underlined
   rather than colour-coded, so they still read as links in body copy. */
a {
  color: inherit;
}
.client-note a,
.section-sub a,
.integration p a,
.tagline a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: opacity 0.2s;
}
.client-note a:hover,
.section-sub a:hover,
.integration p a:hover,
.tagline a:hover {
  opacity: 0.65;
}

/* The client-card heading links to that client's page — keep it looking like a
   heading, not a link, but underline so it is discoverable. */
.client-name a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.client-name a:hover { opacity: 0.65; }

@media (max-width: 768px) {
  section { padding: 0 1.5rem; }
}

/* Buttons + action row — used by the 'Test them all at once' CTA. The
 * extractor missed these, so the CTA rendered as a bare underlined link
 * instead of a button. Copied verbatim from index.html so the two match. */

/* Buttons + action row, taken verbatim from preview.html (they live there, not
 * in index.html, which is why the extractor never saw them). Without these the
 * "Test them all at once" CTA rendered as a bare underlined link. The
 * text-decoration:none on .btn must win over the generic link underline rule
 * above, so this block is kept last. */
.actions { margin-top: 3rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-block;
  font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  padding: 0.8rem 2rem; text-decoration: none; transition: all 0.25s; cursor: pointer;
  border: 1px solid var(--accent);
}
.btn-primary { color: var(--bg); background: var(--accent); }
.btn-primary:hover { background: transparent; color: var(--accent); }
.btn-secondary { color: var(--text); border-color: rgba(0,0,0,0.18); background: transparent; }
.btn-secondary:hover { border-color: var(--accent); }

/* Footer is not a <section>, so it needs the column width AND the gutters
   spelled out — otherwise it runs wider above 840px and edge-to-edge below it. */
footer {
  /* Box == the content column, so the border-top divider lines up with the
     grids above rather than running 2rem wider on each side. Below the column
     width it goes fluid and takes the same gutters as .block instead. */
  max-width: 840px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 904px) {
  footer { max-width: none; padding-left: 2rem; padding-right: 2rem; }
}
@media (max-width: 768px) {
  footer { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Gutters for the section blocks. Mirrors the hero's 2rem / 1.5rem so the
   content column is identical above and below the fold at every width. */
.block { padding: 5rem 2rem; }
@media (max-width: 768px) {
  .block { padding: 3.5rem 1.5rem; }
}