app_for_indeed/legal/embed-support.html

<div id="afi-support-embed">
  <style>
    #afi-support-embed {
      --brand: #2557a7;
      --brand-dark: #1a4480;
      --heading: #0052cc;
      --text: #2d2d2d;
      --secondary: #5f6368;
      --muted: #767676;
      --border: #e4e4e4;
      --bg: #f4f6f9;
      --card: #ffffff;
      --well: #eff4fc;
      --success: #1e8e3e;
      --required: #d93025;
      --shadow: 0 1px 3px rgba(60, 64, 67, 0.12), 0 4px 12px rgba(60, 64, 67, 0.08);
      --radius: 12px;
      --radius-sm: 8px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.6;
      color: var(--text);
      background: var(--bg);
      padding: 1.5rem 1rem 2.5rem;
      box-sizing: border-box;
    }
    #afi-support-embed *,
    #afi-support-embed *::before,
    #afi-support-embed *::after {
      box-sizing: border-box;
    }
    #afi-support-embed .wrap {
      max-width: 880px;
      margin: 0 auto;
    }
    #afi-support-embed .page-intro {
      text-align: center;
      margin-bottom: 1.75rem;
    }
    #afi-support-embed .page-intro h1 {
      margin: 0 0 0.5rem;
      font-size: 2rem;
      font-weight: 700;
      color: var(--heading);
      letter-spacing: -0.02em;
    }
    #afi-support-embed .page-intro .lead {
      margin: 0 auto;
      max-width: 36rem;
      font-size: 1.05rem;
      color: var(--muted);
    }
    #afi-support-embed .page-intro .badge {
      display: inline-block;
      margin-bottom: 0.75rem;
      padding: 0.35rem 0.75rem;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--brand);
      background: var(--well);
      border-radius: 999px;
    }
    #afi-support-embed .layout {
      display: grid;
      gap: 1.25rem;
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
      #afi-support-embed .layout {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: start;
      }
    }
    #afi-support-embed .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    #afi-support-embed .form-card__head {
      padding: 1.35rem 1.5rem 1rem;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, var(--well) 0%, var(--card) 100%);
    }
    #afi-support-embed .form-card__head h2 {
      margin: 0 0 0.25rem;
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--heading);
    }
    #afi-support-embed .form-card__head p {
      margin: 0;
      font-size: 0.9rem;
      color: var(--muted);
    }
    #afi-support-embed form {
      padding: 0.25rem 0 1rem;
    }
    #afi-support-embed .field {
      padding: 1.1rem 1.5rem;
      border-bottom: 1px solid var(--border);
    }
    #afi-support-embed .field:last-of-type {
      border-bottom: none;
    }
    #afi-support-embed label {
      display: block;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0.45rem;
    }
    #afi-support-embed .required {
      color: var(--required);
      font-weight: 400;
    }
    #afi-support-embed .hint {
      margin: -0.2rem 0 0.6rem;
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.45;
    }
    #afi-support-embed input[type="text"],
    #afi-support-embed input[type="email"],
    #afi-support-embed select,
    #afi-support-embed textarea {
      width: 100%;
      padding: 0.7rem 0.85rem;
      font-size: 0.95rem;
      font-family: inherit;
      color: var(--text);
      background: #fafbfc;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    #afi-support-embed input::placeholder,
    #afi-support-embed textarea::placeholder {
      color: #9aa0a6;
    }
    #afi-support-embed input:hover,
    #afi-support-embed select:hover,
    #afi-support-embed textarea:hover {
      border-color: #c6c9cc;
    }
    #afi-support-embed input:focus,
    #afi-support-embed select:focus,
    #afi-support-embed textarea:focus {
      outline: none;
      border-color: var(--brand);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(37, 87, 167, 0.15);
    }
    #afi-support-embed select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.85rem center;
      padding-right: 2.25rem;
      cursor: pointer;
    }
    #afi-support-embed textarea {
      min-height: 130px;
      resize: vertical;
    }
    #afi-support-embed .actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem 1rem;
      padding: 1rem 1.5rem 1.25rem;
      background: #fafbfc;
      border-top: 1px solid var(--border);
    }
    #afi-support-embed button[type="submit"] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 7.5rem;
      padding: 0.7rem 1.75rem;
      font-size: 0.95rem;
      font-weight: 600;
      font-family: inherit;
      color: #fff;
      background: var(--brand);
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(37, 87, 167, 0.3);
      transition: background 0.15s ease, transform 0.1s ease;
    }
    #afi-support-embed button[type="submit"]:hover {
      background: var(--brand-dark);
    }
    #afi-support-embed button[type="submit"]:active {
      transform: translateY(1px);
    }
    #afi-support-embed .submit-note {
      font-size: 0.8rem;
      color: var(--muted);
    }
    #afi-support-embed .sidebar-section {
      margin-bottom: 1.25rem;
    }
    #afi-support-embed .sidebar-section:last-child {
      margin-bottom: 0;
    }
    #afi-support-embed .sidebar-section h3 {
      margin: 0 0 0.65rem;
      padding: 0 0.25rem;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--secondary);
    }
    #afi-support-embed .info-box {
      padding: 1rem 1.15rem;
      border-radius: var(--radius-sm);
      font-size: 0.88rem;
      line-height: 1.5;
    }
    #afi-support-embed .info-box--apple {
      background: #f0f4ff;
      border: 1px solid #c5d4f0;
      color: #3d4f5f;
    }
    #afi-support-embed .info-box--apple strong {
      color: var(--heading);
    }
    #afi-support-embed .info-box--links {
      background: var(--well);
      border: 1px solid #d0dff5;
    }
    #afi-support-embed .info-box--links a {
      display: block;
      padding: 0.45rem 0;
      color: var(--brand);
      font-weight: 500;
      text-decoration: none;
      border-bottom: 1px solid rgba(37, 87, 167, 0.12);
    }
    #afi-support-embed .info-box--links a:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    #afi-support-embed .info-box--links a:first-child {
      padding-top: 0;
    }
    #afi-support-embed .info-box--links a:hover {
      text-decoration: underline;
    }
    #afi-support-embed .faq-card {
      padding: 0;
    }
    #afi-support-embed details {
      border-bottom: 1px solid var(--border);
    }
    #afi-support-embed details:last-child {
      border-bottom: none;
    }
    #afi-support-embed summary {
      padding: 1rem 1.15rem;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      transition: background 0.15s ease;
    }
    #afi-support-embed summary::-webkit-details-marker {
      display: none;
    }
    #afi-support-embed summary::after {
      content: "+";
      flex-shrink: 0;
      width: 1.5rem;
      height: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      font-weight: 400;
      color: var(--brand);
      background: var(--well);
      border-radius: 50%;
      transition: transform 0.2s ease;
    }
    #afi-support-embed details[open] summary::after {
      content: "−";
    }
    #afi-support-embed summary:hover {
      background: #fafbfc;
    }
    #afi-support-embed details[open] summary {
      color: var(--heading);
      background: var(--well);
    }
    #afi-support-embed .faq-answer {
      padding: 0 1.15rem 1rem;
      font-size: 0.88rem;
      color: var(--muted);
      line-height: 1.55;
    }
    #afi-support-embed .trouble-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #afi-support-embed .trouble-list li {
      padding: 0.85rem 1.15rem;
      font-size: 0.88rem;
      border-bottom: 1px solid var(--border);
      line-height: 1.5;
    }
    #afi-support-embed .trouble-list li:last-child {
      border-bottom: none;
    }
    #afi-support-embed .trouble-list strong {
      display: block;
      color: var(--heading);
      font-size: 0.9rem;
      margin-bottom: 0.15rem;
    }
    #afi-support-embed .footer-note {
      margin-top: 1.5rem;
      padding: 1rem 1.15rem;
      text-align: center;
      font-size: 0.82rem;
      color: var(--muted);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }
    @media (max-width: 640px) {
      #afi-support-embed .page-intro h1 {
        font-size: 1.65rem;
      }
      #afi-support-embed .actions {
        flex-direction: column;
        align-items: stretch;
      }
      #afi-support-embed button[type="submit"] {
        width: 100%;
      }
    }
  </style>

  <div class="wrap">
    <header class="page-intro">
      <span class="badge">Support</span>
      <h1>How can we help?</h1>
      <p class="lead">
        Send us a message about the app and we’ll reply within a few business days.
        For billing, Apple handles subscriptions directly.
      </p>
    </header>

    <div class="layout">
      <section class="card form-card" aria-labelledby="form-heading">
        <div class="form-card__head">
          <h2 id="form-heading">Submit a support request</h2>
          <p>All fields marked with <span class="required">*</span> are required.</p>
        </div>

        <form
          action="https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse"
          method="POST"
          target="_top"
        >
          <div class="field">
            <label for="afi-name">Your name <span class="required">*</span></label>
            <input type="text" id="afi-name" name="entry.111111111" required autocomplete="name" placeholder="Jane Smith">
          </div>

          <div class="field">
            <label for="afi-email">Email address <span class="required">*</span></label>
            <p class="hint">We’ll reply to this address.</p>
            <input type="email" id="afi-email" name="entry.222222222" required autocomplete="email" placeholder="you@example.com">
          </div>

          <div class="field">
            <label for="afi-topic">What do you need help with? <span class="required">*</span></label>
            <select id="afi-topic" name="entry.333333333" required>
              <option value="" disabled selected>Choose a topic</option>
              <option value="Subscription / billing">Subscription / billing</option>
              <option value="Bug report">Bug report</option>
              <option value="Feature question">Feature question</option>
              <option value="AI search">AI search</option>
              <option value="Indeed browser">Indeed browser</option>
              <option value="CV Maker">CV Maker</option>
              <option value="Privacy">Privacy</option>
              <option value="Other">Other</option>
            </select>
          </div>

          <div class="field">
            <label for="afi-macos">macOS version</label>
            <p class="hint">Optional — helps us reproduce issues faster.</p>
            <input type="text" id="afi-macos" name="entry.444444444" placeholder="e.g. macOS 15.4">
          </div>

          <div class="field">
            <label for="afi-message">Describe your issue <span class="required">*</span></label>
            <p class="hint">Steps to reproduce, error messages, and what you expected to happen.</p>
            <textarea id="afi-message" name="entry.555555555" required placeholder="Tell us what happened…"></textarea>
          </div>

          <div class="actions">
            <button type="submit">Submit</button>
            <span class="submit-note">You’ll see a confirmation after sending.</span>
          </div>
        </form>
      </section>

      <aside class="sidebar">
        <div class="sidebar-section">
          <h3>Billing &amp; refunds</h3>
          <div class="card info-box info-box--apple">
            <strong>Managed by Apple</strong><br>
            Open <strong>System Settings → Apple ID → Subscriptions</strong>, select <strong>App for Indeed</strong>, then change or cancel your plan. Refunds follow Apple’s policies.
          </div>
        </div>

        <div class="sidebar-section">
          <h3>Quick links</h3>
          <nav class="card info-box info-box--links" aria-label="Related pages">
            <a href="https://sites.google.com/view/app-for-indeed/home" target="_top">Home</a>
            <a href="https://sites.google.com/view/app-for-indeed/privacy-policy" target="_top">Privacy Policy</a>
            <a href="https://sites.google.com/view/app-for-indeed/terms-of-services" target="_top">Terms of Use</a>
          </nav>
        </div>

        <div class="sidebar-section">
          <h3>Common questions</h3>
          <div class="card faq-card">
            <details>
              <summary>Is this app affiliated with Indeed?</summary>
              <p class="faq-answer">No. App for Indeed is an independent tool and is not endorsed by Indeed, Inc.</p>
            </details>
            <details>
              <summary>How does AI job search work?</summary>
              <p class="faq-answer">Enter a prompt or use shortcuts on Home. The app returns job summaries you can save or open in the in-app Indeed browser.</p>
            </details>
            <details>
              <summary>Where is my data stored?</summary>
              <p class="faq-answer">Profiles, saved jobs, and preferences stay on your Mac. See the Privacy Policy for third-party processing details.</p>
            </details>
            <details>
              <summary>CV Maker not loading?</summary>
              <p class="faq-answer">Check your internet connection, pick a template, link it to a profile, then preview again.</p>
            </details>
          </div>
        </div>

        <div class="sidebar-section">
          <h3>Troubleshooting</h3>
          <ul class="card trouble-list">
            <li>
              <strong>App won’t launch</strong>
              Quit completely and reopen. Restart your Mac if needed.
            </li>
            <li>
              <strong>Subscription not unlocking</strong>
              Confirm the purchase under Apple ID Subscriptions, then relaunch the app.
            </li>
            <li>
              <strong>Indeed pages not loading</strong>
              Check your network and use reload in the in-app browser.
            </li>
            <li>
              <strong>AI search errors</strong>
              Try a shorter, clearer prompt with a stable connection.
            </li>
          </ul>
        </div>
      </aside>
    </div>

    <p class="footer-note">
      App for Indeed is not affiliated with, sponsored by, or endorsed by Indeed, Inc.
      Indeed® is a trademark of Indeed, Inc.
    </p>
  </div>
</div>