html, body { height: 100%; }

    body{
      min-height: 100vh;
      margin: 0;                         /* important */
      display: grid;
      grid-template-rows: auto 1fr auto; /* header | content | footer */
    }

    
    /* Editorial reading width: centered column with wide side margins */
    /* Constrain only the article content column */
    .article-content{
      max-width: 820px;     /* pick 760–860 based on taste */
      margin: 0 auto;
      padding: 0 28px;      /* creates the “wide margins” feel */
    }
    @media (max-width: 768px){
      .article-content{
        max-width: 100%;
        padding: 0 18px;
      }
    }

    /* Slightly tighter on small screens */
    @media (max-width: 768px) {
      #article, .article, .article-content, main {
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
      }
    }

    /* =========================
    WYB Atlantic-style type
    (NO layout changes)
    ========================= */
      :root{
        --wyb-body-font: "Source Serif 4", Georgia, "Times New Roman", serif;
        --wyb-ui-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        --wyb-primary: #8b1e3f;     /* your primary (burgundy-ish) */
        --wyb-primary-2: #b53a5a;   /* slightly lighter primary */
        --wyb-soft: #f7f5f6;        /* light background */
        --wyb-border: #e8e2e6;      /* subtle border */
        --wyb-text: #1f1f1f;
        --wyb-muted: #5a5a5a;
        --wyb-card: #ffffff;
      }

      /* Body copy */
      body{
        font-family: var(--wyb-body-font);
        font-size: 18px;
        line-height: 1.75;
        color: #1f1f1f;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

      /* Headings: keep your existing sizing/alignment, just change the face + soften weight */
      h1, h2, h3{
        font-family: var(--wyb-body-font);
        font-weight: 650;            /* strong but not shouty */
        letter-spacing: -0.01em;     /* subtle editorial tightness */
      }

      /* Optional: UI bits stay clean sans (only if you want) */
      nav, button, .nav, .menu, .meta, .toc, .pill, .tag{
        font-family: var(--wyb-ui-font);
      }

    
    .article-title {
     text-align: center;
      margin-top: 5rem;   /* ← adds space from top */
      margin-bottom: 1.25rem;
      line-height: 1.15;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
      
    }

    .article-author{
      text-align: center;
      font-family: var(--wyb-ui-font);
      font-size: 0.8rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #777;
      margin-bottom: 2.25rem;
    }

    /* .hero-image {
      width: 80%;              
      max-width: 1100px;       
      margin: 0 auto 2rem;     
      height: 420px;

      background-image: url("./images/hero-speed-dating-chicago.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      border-radius: 12px;
    } */

    .hero-image {
      width: 80%;
      max-width: 1100px;
      margin: 0 auto 2rem;
      border-radius: 12px;
      overflow: hidden; /* keeps rounded corners clean */
    }

    .hero-image img {
      width: 100%;
      height: 420px;
      object-fit: cover;
      display: block;
    }


    /* @media (min-width: 1200px) {
      .hero-image {
        height: 500px;
        width: 75%;   
      }
    }

    @media (max-width: 640px) {
      .hero-image {
        width: 100%;
        height: 220px;
        background-position: center bottom; 
        border-radius: 8px;
      }
    } */

    @media (min-width: 1200px) {
      .hero-image img {
        height: 500px;
      }
    }

    @media (max-width: 640px) {
      .hero-image {
        width: 100%;
        border-radius: 8px;
      }

      .hero-image img {
        height: 220px;
        object-position: center bottom;
      }
    }

    /* for spacing between sections */
    .article-content section{
      margin-top: 3rem;
    }
    .article-content section:first-of-type{
      margin-top: 0; /* prevents a weird gap at the very top */
    }

    .article-content { max-width: 720px; margin: 0 auto; }
    .article-content .toc {
      margin: 1.5rem 0 2rem;
      padding: 1.25rem 1.25rem;
      background: #fafafa;
      border-radius: 12px;
    }
    .article-content .toc strong { display:block; margin-bottom: .5rem; }
    .article-content .toc ul { margin: .5rem 0 0 1.25rem; }
    .article-content .toc li { margin: .35rem 0; }

    .article-content table {
      width: 100%;
      border-collapse: collapse;
      margin: 1rem 0 1.5rem;
      font-size: 0.98rem;
    }
    .article-content th, .article-content td {
      text-align: left;
      border: 1px solid #e6e6e6;
      padding: .75rem .75rem;
      vertical-align: top;
    }
    .article-content th { background: #fafafa; }

    .article-cta {
      margin: 2.5rem 0 0;
      padding: 1.75rem 1.5rem;
      background: #fafafa;
      border-radius: 12px;
      text-align: center;
    }
    .article-cta h3 { margin: 0 0 .5rem; }
    .article-cta p { margin: 0 0 1rem; }
    .article-cta .cta-btn {
      display: inline-block;
      padding: .85rem 1.1rem;
      border-radius: 10px;
      text-decoration: none;
      background: #111;
      color: #fff;
      font-weight: 700;
    }
    .article-cta .cta-btn:hover { filter: brightness(0.95); }

    /* --- CTA split layout --- */
    .article-cta { text-align: center; } /* keep heading centered */

    .article-cta .cta-split{
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-top: 1.25rem;
      text-align: left;               /* right-side content aligns nicely */
    }

    .article-cta .cta-left{ flex: 0 0 44%; }
    .article-cta .cta-right{ flex: 1; }

    .article-cta .cta-image{
      width: 100%;
      height: auto;
      display: block;
      border-radius: 12px;
      box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    }

    .article-cta .cta-right p{ margin: 0 0 1rem; } /* keep your spacing */

    /* Button color update */
    .article-cta .cta-btn{
      background: #96372F;  /* maroon from your 3rd image */
    }

    /* Mobile stack */
    @media (max-width: 820px){
      .article-cta .cta-split{
        flex-direction: column;
        text-align: center;
      }
      .article-cta .cta-left,
      .article-cta .cta-right{
        width: 100%;
      }
    }

      /* Legend + indicator squares */
      .legend-dot{
        display:inline-block;
        width:12px;
        height:12px;
        border-radius:3px;
        margin-left:4px;   /* small visible spacing */
        vertical-align:-1px;
      }
      .legend-dot.blue{ background:#3b82f6; }    /* Speed Dating */
      .legend-dot.orange{ background:#f59e0b; }  /* Mixers / Activity */

      

      .data-dashboard{
        margin: 1.25rem 0;
        padding: 18px;
        background:#f5f6fb;
        border-radius:18px;
        border:1px solid #ececf3;
      }

      .data-dashboard__grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:18px;
      }

      .data-card{
        background:#ffffff;
        border-radius:16px;
        padding:14px 14px 10px;
        border:1px solid #eeeeee;
        box-shadow:0 1px 0 rgba(0,0,0,0.03);
      }

      .data-card__header{
        display:flex;
        justify-content:space-between;
        align-items:baseline;
        margin-bottom:8px;
      }

      .data-card__header h3{
        font-size:.95rem;
        margin:0;
      }

      .data-card__header span{
        font-size:.8rem;
        color:#666;
      }

      canvas{
        width:100% !important;
        height:220px !important;
      }

      @media(max-width:720px){
        .data-dashboard__grid{
          grid-template-columns:1fr;
        }
      }

      /* =========================
        Mistakes list styling
        ========================= */

      /* .mistakes-list{
        margin-top: 1.25rem;
        padding-left: 1.2rem;
        list-style: disc;
      } */
      .mistakes-list{
        list-style: none;
        padding-left: 0;
      }

      .mistakes-list li::before{
        content: "•";
        color: var(--wyb-primary);
        margin-right: 10px;
      }

      .mistakes-list li{
        margin-bottom: 0.85rem;
        line-height: 1.6;
      }

      .mistakes-list strong{
        font-weight: 550;
        color: #1f1f1f;
      }

      /* =========================
      WYB Modern Compare Table
      ========================= */

    /* section spacing */
    .compare-section h2 { margin-bottom: 0.75rem; }
    .compare-section p { max-width: 900px; }

    /* table container feel */
    .compare-table{
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background: var(--wyb-card);
      border: 1px solid var(--wyb-border);
      border-radius: 16px;
      overflow: hidden;
      margin-top: 1rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    }

    /* header row */
    .compare-table thead th{
      text-align: left;
      padding: 16px 18px;
      font-size: 0.98rem;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(90deg, var(--wyb-primary), var(--wyb-primary-2));
      border-bottom: 1px solid rgba(255,255,255,0.18);
    }

    /* make the first header cell slightly different, like the reference */
    .compare-table thead th:first-child{
      width: 22%;
      background: var(--wyb-primary);
    }

    /* body cells */
    .compare-table tbody td{
      padding: 14px 18px;
      vertical-align: top;
      font-size: 0.95rem;
      line-height: 1.5;
      color: var(--wyb-text);
      border-bottom: 1px solid var(--wyb-border);
    }

    /* last row no border */
    .compare-table tbody tr:last-child td{
      border-bottom: none;
    }

    /* "Aspect" column styled as a soft label column */
    .compare-table tbody td:first-child{
      font-weight: 700;
      color: var(--wyb-primary);
      background: var(--wyb-soft);
      border-right: 1px solid var(--wyb-border);
      letter-spacing: 0.1px;
    }

    /* subtle row hover, minimal */
    .compare-table tbody tr:hover td{
      background: rgba(139, 30, 63, 0.03);
    }
    .compare-table tbody tr:hover td:first-child{
      background: rgba(139, 30, 63, 0.06);
    }

    /* column separation like the reference (subtle) */
    .compare-table tbody td + td{
      border-left: 1px solid var(--wyb-border);
    }

    .compare-emphasis thead th:nth-child(2){
      background: linear-gradient(90deg, var(--wyb-primary), var(--wyb-primary-2));
    }
    .compare-emphasis thead th:nth-child(3){
      background: #f0d7de; /* soft tinted contrast */
      color: #3a1f27;
    }
    .compare-emphasis tbody td:nth-child(3){
      color: var(--wyb-muted);
    }

    #formats-compare h3 {
      margin-bottom: 0.75rem;
    }

    #formats-compare p {
      margin-bottom: 1.75rem;
    }

    #formats-compare table {
      margin-top: 0.75rem;
    }

    /* slightly tighter on large tables */
    @media (min-width: 900px){
      .compare-table tbody td{
        font-size: 0.94rem;
      }
    }

    /* Mobile/tablet: allow horizontal scroll instead of converting to cards */
    .table-scroll{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 16px; /* keep rounded feel */
    }

    /* ensure the table has a minimum width so columns don’t crush */
    .compare-table{
      min-width: 740px; /* tweak: 680–820 depending on your content */
    }

    /* optional: keep first column visible while scrolling */
    @media (max-width: 900px){
      .compare-table th:first-child,
      .compare-table td:first-child{
        position: sticky;
        left: 0;
        z-index: 2;
      }
      .compare-table th:first-child{
        z-index: 3;
      }
      .compare-table td:first-child{
        background: var(--wyb-soft);
      }
    }

    /* Mobile: turn rows into clean "cards" so it stays readable */
    /* @media (max-width: 720px){
      .compare-table{
        border-radius: 14px;
      }
      .compare-table thead{
        display: none;
      }
      .compare-table, .compare-table tbody, .compare-table tr, .compare-table td{
        display: block;
        width: 100%;
      }

      .compare-table tr{
        border-bottom: 1px solid var(--wyb-border);
      }
      .compare-table tr:last-child{
        border-bottom: none;
      }

      .compare-table tbody td{
        border: none;
        border-bottom: 1px solid var(--wyb-border);
      }
      .compare-table tbody td:first-child{
        border-right: none;
        border-bottom: 1px solid var(--wyb-border);
        color: #fff;
        background: var(--wyb-primary);
        font-weight: 800;
      }
      .compare-table tbody td:last-child{
        border-bottom: none;
      }
    } */


      .back-to-top a{
        text-align: center;
        margin-top: 1.5rem;
        font-size: 0.9rem;
        text-decoration: none;
        color: var(--wyb-primary);
        border-bottom: 1px solid transparent;
      }

      .back-to-top a:hover{
        border-bottom-color: var(--wyb-primary);
      }

      .faq-section {
        margin-top: 2rem;
      }

      .faq-section details {
        border-bottom: 1px solid #e5e5e5;
        padding: 0.6rem 0;
      }

      .faq-section summary {
        font-size: 0.98rem;   /* slightly smaller */
        font-weight: 600;
        cursor: pointer;
        list-style: none;
      }

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

      .faq-section summary::after {
        content: "+";
        float: right;
        font-size: 1rem;
      }

      .faq-section details[open] summary::after {
        content: "–";
      }

      .faq-section p {
        font-size: 0.92rem;   /* smaller body text */
        line-height: 1.55;
        margin-top: 0.4rem;
        color: #444;
      }

      /* =========================
        Footer (matches your homepage)
        ========================= */

        .footer {
          padding: 46px 22px 24px;
        }

        .footer__inner {
          max-width: 1100px;
          margin: 0 auto;
          display: grid;
          gap: 30px;
          grid-template-columns: 1.2fr auto;
          align-items: start;
        }

        .footer__quote {
          margin: 0 0 18px 0;
          font-size: 16px;
          color: #333;
        }

        .footer__cta {
          margin: 0;
          font-size: 16px;
          color: #333;
        }

        .footer__bottom {
          max-width: 1100px;
          margin: 26px auto 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 18px;
          color: #777;
          font-size: 13px;
        }

        .footer__links {
          display: flex;
          align-items: center;
          gap: 14px;
          flex-wrap: wrap;
        }

        .footer__links a {
          color: #777;
          text-decoration: underline;
        }

        /* Hard override: prevent homepage footer from being turned into a full-height section */
        footer.footer {
          height: auto !important;
          min-height: 0 !important;
          display: block !important;
        }

        footer.footer .footer__bottom {
          margin-top: 26px !important; /* overrides margin-top:auto */
        }

        /* Align subscribe form with quote text baseline (homepage behavior) */
        /* right column positioning */
        .footer__right{
          display: flex;
          justify-content: flex-start;  /* key change */
          align-items: flex-start;
        }

        /* remove any leftover right pushing */
        /* .beehiiv-embed-wrap--footer{
          margin-left: 0 !important;
        } */

        /* Responsive */
        @media (max-width: 820px) {
          .footer__inner {
            grid-template-columns: 1fr;
          }
        }


        /* =========================
          Author Block
          ========================= */

        .author-block{
          margin-top: 3.5rem;
        }

        .author-divider{
          height: 1px;
          background: #222;
          opacity: 0.35;
          margin-bottom: 1.25rem;
        }

        .author-heading{
          font-family: "Libre Baskerville", serif;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          font-size: 0.95rem;
          margin-bottom: 1.5rem;
        }

        .author-row{
          display: flex;
          align-items: center;
          gap: 1.25rem;
        }

        .author-photo{
          width: 72px;
          height: 72px;
          border-radius: 50%;
          overflow: hidden;
          background: #ddd; /* placeholder background */
          flex-shrink: 0;
        }

        .author-photo img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .author-text p{
          margin: 0;
          font-size: 1.05rem;
          line-height: 1.5;
        }

        .author-linkedin{
          display: inline-block;
          margin-top: 6px;
          font-family: var(--wyb-ui-font);
          font-size: 0.85rem;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          text-decoration: none;
          color: #666;
          border-bottom: 1px solid transparent;
        }

        .author-linkedin:hover{
          border-bottom-color: #666;
        }

        /* mobile */
        @media (max-width: 640px){
          .author-row{
            align-items: flex-start;
          }
        }

        /* Ensure header matches homepage even if page-level CSS tries to get cute */
        .topbar {
          position: sticky;
          top: 0;
          z-index: 10;
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 22px;
          background: #fff;
          border-bottom: 1px solid #ececec;
        }

        /* .topbar__left,
        .topbar__right {
          display: flex;
          align-items: center;
          gap: 18px;
        } */

        .topbar__left{
          display: flex;
          align-items: center;
          gap: 18px;
        }

        .brandmark {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 34px;
          height: 34px;
          border-radius: 10px;
          overflow: hidden;
          text-decoration: none;
        }

        .brandmark__img {
          width: 34px;
          height: 34px;
          object-fit: cover;
        }

      /* Article footer subscribe form override */
      .footer__right {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        max-width: 460px;
      }

      .footer__right .wyb-subscribe-form {
        width: 100%;
        max-width: 460px;
        margin: 0;
      }

      .footer__right .subscribe-message {
        text-align: left;
      }

      @media (max-width: 900px) {
        .footer__right {
          max-width: 520px;
        }
      }

      @media (max-width: 640px) and (orientation: portrait) {
        .footer__right {
          max-width: 100%;
        }

        .footer__right .wyb-subscribe-form input {
          height: 54px;
          min-height: 54px;
          padding: 0 22px;
          border-radius: 18px;
          font-size: 18px;
          line-height: 54px;
        }

        .footer__right .wyb-subscribe-form button {
          height: 58px;
          min-height: 58px;
          border-radius: 18px;
          font-size: 18px;
        }
      }