@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap');

:root {
      --accent: #FF5F47;
      --contentPrimary: #0b0b0c;
      --contentSecondary: #333333;
      --border: #E9EAED;
      --backgroundPrimary: #ffffff;
      --backgroundSecondary: #F6F6F6;
      --backgroundAccent: #FFE2DB;
      --alwaysWhite: #ffffff;
      --alwaysBlack: #000000;

      --accentHover: #f05942;
      --primaryHover: #333333;
      --secondaryHover: #EEEEEE;

      --container: 1280px;
      --horizontalPadding: 40px;
      --verticalPadding: 80px;
      --cardPadding: 40px;

      --titleFontSize: 56px;
      --bodyFontSize: 20px;

      --bigGap: 56px;
      --defaultGap: 32px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--contentPrimary);
      background: var(--backgroundPrimary);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--horizontalPadding); }
    a { color: inherit; text-decoration: none; }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      height: 52px; padding: 0 24px; border-radius: 999px;
      font-weight: 500; font-size: 16px; letter-spacing: 0.1px;
      transition: background-color 250ms ease;
    }
    .btn-primary { background: var(--accent); color: var(--alwaysWhite); }
    .btn-primary:hover { background: var(--accentHover); }
    .btn-secondary { background: var(--backgroundSecondary); color: var(--alwaysBlack); }
    .btn-secondary:hover { background: var(--secondaryHover); }
    .btn-tertiary { background: var(--contentPrimary); color: var(--backgroundPrimary); }
    .btn-tertiary:hover { background: var(--primaryHover); }

    /* Chevron styling */
    .btn span[aria-hidden] {
      font-size: 20px;
      font-weight: 600;
      line-height: 1;
    }

    /* Header */
    .header-row { display: flex; align-items: center; justify-content: space-between; padding: var(--defaultGap) var(--horizontalPadding); }
    .brand { display: inline-flex; align-items: center; gap: 16px; font-size: 34px; font-weight: 600; letter-spacing: .2px; }
    .brand img { display: block;  width: 32px; height: 32px; }
    .brand span { font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; }

    /* Hero */
    .hero { padding: var(--defaultGap) 0; }
    .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .hero-image { width: 100%; height: 100%; object-fit: contain; }
    .hero-content { display: flex; flex-direction: column; gap: var(--bigGap); }
    .hero-content-text { display: flex; flex-direction: column; gap: 24px; }
    .title { font-size: var(--titleFontSize); line-height: 1.25; font-weight: 700; margin: 0; }
    .title .accent { color: var(--accent); }
    .break { display: inline; }
    .lead { color: var(--contentSecondary); font-size: var(--bodyFontSize); line-height: 1.7; max-width: 48ch; margin: 0; }
    .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
    .privacy { display:inline-flex; align-items:center; gap:8px; color: var(--contentSecondary); font-size: 15px; font-weight: 500; }
    .privacy svg { width: 16px; height: 16px; }

    /* Section: How it works */
    .section { padding: var(--verticalPadding) 0; }
    .section h2 { font-size: 28px; letter-spacing: .2px; margin: 0; }
    .hiw-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: var(--bigGap); }
    .card { display: flex; flex-direction: column; gap: var(--defaultGap); }
    .card-media { height: auto; width: 100%;}
    .card-body { display: flex; flex-direction: column; gap: 12px; }
    .card-title { font-weight: 600; font-size: 20px; margin: 0; }
    .card-text { color: var(--contentSecondary); font-size: 17px; line-height: 1.6; margin: 0; }

    /* Pricing */
    .pricing { display:grid; grid-template-columns: 1fr 1fr; gap: var(--defaultGap); align-items: stretch; margin-top: var(--bigGap); }
    .plan { background: var(--backgroundSecondary); border-radius: var(--cardPadding); padding: var(--cardPadding); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--cardPadding); }
    .plan + .plan { background: var(--backgroundAccent); }
    .plan-content { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
    .plan-header { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
    .plan h3 { margin: 0; font-size: 20px; color: var(--accent); font-weight:600; }
    .price { font-size: 32px; font-weight: 700; }
    .per { color: var(--contentSecondary); font-size: 20px; font-weight: 400; }
    .features { display:flex; flex-direction: column; gap: 24px; }
    .feature { display:flex; align-items:center; gap:16px; font-size: 17px; }
    .check { display:inline-flex; align-items:center; justify-content:center; width: 20px; height: 20px; border-radius: 999px; background:var(--accent); color:var(--alwaysWhite); font-size: 14px; flex: 0 0 20px; }

    .section-sub { color: var(--contentSecondary); font-size: var(--bodyFontSize); margin: 16px 0 0; line-height: 1.7; }

    /* FAQ */
    .faq { border-top: 1px solid var(--border); margin-top: var(--bigGap); }
    .faq-content {
      overflow: hidden;
      height: 0;
      max-width: 80ch;
      opacity: 0;
      visibility: hidden;
      padding-top: 0;
      transition: height 240ms ease, opacity 160ms ease;
      color: var(--contentSecondary);
      font-size: 17px;
      line-height: 1.8;
    }
    details.faq-item { border-bottom: 1px solid var(--border); padding: var(--bigGap) 0; }
    details > summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 24px; display:flex; align-items:center; justify-content:space-between; }
    details > summary::-webkit-details-marker { display:none; }
    .chev { transition: transform .2s ease; flex-shrink: 0; margin-left: 16px; }
    .summary-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    details[open] .chev { transform: rotate(90deg); }

    /* CTA footer */
    .cta { background: var(--accent); color: var(--alwaysWhite); }
    .cta .container { padding: var(--verticalPadding) var(--horizontalPadding) 32px var(--horizontalPadding); gap: 80px; display: flex; flex-direction: column; align-items: flex-start; }
    .cta-content { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--defaultGap); }
    .cta h3 { font-size: 32px; line-height: 1.6; letter-spacing: .2px; margin: 0; }
    .strike { color: var(--alwaysBlack); }
    .cta .btn-ghost { background: var(--alwaysWhite); color: var(--accent); }

    /* Footer */
    .site-footer { width: 100%; font-size: 15px; color: var(--alwaysWhite); font-weight: 500; }
    .foot-row { display:flex; flex-direction: row; align-items:center; justify-content:space-between; gap: 16px; }
    .foot-links a + a { margin-left: 16px; }

    /* Utilities */
    .muted { color: var(--contentSecondary); }

    @media (max-width: 900px) {
      .break { display: none; }
    }

    @media (max-width: 768px) {
      :root {
        --horizontalPadding: 20px;
        --verticalPadding: 40px;
        --cardPadding: 32px;

        --titleFontSize: 44px;
        --bodyFontSize: 17px;

        --bigGap: 32px;
        --defaultGap: 24px;
      }

      .hero-image { height: 400px; }

      .hero-grid { grid-template-columns: 1fr; }
      .hiw-grid { grid-template-columns: repeat(2, 1fr); }
      .pricing { grid-template-columns: 1fr; }

      .header-row .brand { font-size: 28px; }
      .header-row .brand img { width: 28px; height: 28px; }

      details > summary { font-size: 20px; font-weight: 500; }

      .foot-row { flex-direction: column; text-align: center; }
    }

    @media (max-width: 480px) {
      .hiw-grid { grid-template-columns: 1fr; }
      .header-row .btn.btn-primary { display: none; }
    }