/*
	Theme Name: Hello Elementor
	Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
	Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
	Author: Elementor Team
	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
	Version: 3.4.4
	Stable tag: 3.4.4
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/

/* Base Styles */
* { 
    box-sizing: border-box; 
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    line-height: 1.6; 
    color: #333; 
    background: #fff; 
    padding: 1rem; 
    margin: 0;
}

.comparison-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Desktop Table Styles */
.comparison-table-wrapper {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin: 3rem 0;
}

.comparison-table {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th {
    background: #0f1a1a;
    color: white;
    padding: 1.5rem;
    text-align: left;
    font-weight: bold;
    font-size: 1.1rem;
}

.comparison-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.comparison-table tr:nth-child(even) {
    background: #fef7f0;
}

.comparison-table tr:hover {
    background: #fed7aa;
    transition: background 0.3s ease;
}

.checkmark {
    color: #F6753D;
    font-weight: bold;
    font-size: 1.3rem;
    margin-right: 0.5rem;
}

.highlight {
    background: #549E4B69;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

.small-text {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
    font-weight: normal;
}

/* Mobile Cards Styles (Hidden by default) */
.comparison-cards {
    display: none;
}

.comparison-card {
    background: white;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.card-header {
    background: #0f1a1a30;
    color: white;
    padding: 1.5rem;
    margin: 0;
}

.card-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: bold;
}

.card-content {
    padding: 1.5rem;
}

.card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.card-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.card-label {
    font-weight: 600;
    color: #0f1a1a;
    flex: 0 0 40%;
    margin-right: 1rem;
    font-size: 0.95rem;
}

.card-value {
    flex: 1;
    text-align: right;
    font-size: 0.95rem;
}

/* Mobile Responsive Breakpoints */
@media (max-width: 768px) {
    body {
        padding: 0.5rem;
    }

    /* Hide desktop table, show mobile cards */
    .comparison-table-wrapper {
        display: none;
    }
    
    .comparison-cards {
        display: block;
    }

    .comparison-card {
        margin-bottom: 1.5rem;
    }

    .card-header {
        padding: 1.25rem;
    }

    .card-header h3 {
        font-size: 1.2rem;
    }

    .card-content {
        padding: 1.25rem;
    }

    .card-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.75rem 0;
    }

    .card-label {
        margin-bottom: 0.5rem;
        margin-right: 0;
        flex: none;
    }

    .card-value {
        text-align: left;
        margin-left: 0;
    }

    .small-text {
        margin-top: 0.125rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0.25rem;
    }

    .card-header {
        padding: 1rem;
    }

    .card-header h3 {
        font-size: 1.1rem;
    }

    .card-content {
        padding: 1rem;
    }

    .card-row {
        padding: 0.5rem 0;
    }

    .card-label,
    .card-value {
        font-size: 0.9rem;
    }

    .checkmark {
        font-size: 1.1rem;
    }
}

/* Desktop-only table improvements */
@media (min-width: 769px) {
    .comparison-table {
        overflow-x: auto;
    }
    
    .comparison-table table {
        min-width: 700px;
    }
}

/* Print styles */
@media print {
    .comparison-cards {
        display: none;
    }
    
    .comparison-table-wrapper {
        display: block !important;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .comparison-table tr:nth-child(even) {
        background: #f9f9f9 !important;
    }
    
    .comparison-table tr:hover {
        background: inherit !important;
    }
} 
/* =============== What to Expect: Timeline & Costs (standalone) =============== */
:root {
  --brand: #549E4B;          /* tweak this to match your brand */
  --brand-600: #0d9488;
  --ink: #0f172a;
  --muted: #475569;
  --bg: #ffffff90;
  --soft: #f8fafc;
  --ring: rgba(14,165,165,.15);
  --border: #e2e8f0;
}

.expect-section { background: var(--bg); padding: clamp(2rem, 3vw, 3rem) 1rem; }
.expect-container { max-width: 1100px; margin: 0 auto; }

.expect-header { text-align: center; margin-bottom: 2rem; }
.expect-header h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.expect-sub { color: var(--muted); margin-top: .5rem; }

.expect-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) {
  .expect-grid { grid-template-columns: 2.2fr 1fr; align-items: start; }
}

.expect-steps { margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1rem; }

.step { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: var(--soft); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; box-shadow: 0 1px 0 var(--ring); }
.step-badge { background: var(--brand); color: white; font-weight: 700; padding: .4rem .7rem; border-radius: 999px; line-height: 1; font-size: .85rem; white-space: nowrap; }
.step-title { margin: 0 0 .35rem 0; font-size: 1.05rem; color: var(--ink); }
.step-text p { margin: 0; color: var(--muted); }
.step + .step { position: relative; }
.step + .step::before {
  content: ""; position: absolute; left: .9rem; top: -1rem; bottom: calc(100% - 1rem);
  width: 2px; background: linear-gradient(to bottom, var(--ring), var(--brand));
  transform: translateX(-50%);
}
@media (min-width: 900px) {
  .step { padding: 1.25rem; }
  .step-title { font-size: 1.1rem; }
}

.expect-aside { position: sticky; top: 1rem; }
.aside-card { background: #549E4B23; border: 1px solid #549E4B; border-radius: 16px; padding: 1.25rem; }
.aside-title { margin: 0 0 .5rem 0; color: var(--brand-600); font-size: 1.1rem; }
.aside-body p { margin: 0 0 .75rem 0; color: #000; }
.aside-highlights { margin: 0; padding: 0; display: grid; gap: .5rem; }
.aside-highlights .hi { list-style: none; display: grid; grid-template-columns: 1.25rem 1fr; gap: .5rem; align-items: start; color: var(--muted); }
.aside-highlights .hi::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 4px; border: 2px solid var(--brand);
  background: radial-gradient(closest-side, var(--brand) 60%, transparent 0);
  margin-top: .15rem;
}

.expect-section a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 2px; }/* Grab Hub FAQ — palette */
:root{
  --gh-dark:#28303F;
  --gh-green:#549E4B;
  --gh-accent:#F6753D;
  --gh-text:#0F1A1A;
  --gh-bg:#F8FAFC;
  --gh-card:#FFFFFF;
  --gh-border:rgba(40,48,63,0.12);
}

.gh-eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  color:var(--gh-green);
  margin-bottom:.35rem;
  font-size:.8rem;
}

.gh-faq{
  background:var(--gh-bg);
  color:var(--gh-text);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius:16px;
  border:1px solid var(--gh-border);
}

.gh-faq__header h2{
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  color:var(--gh-dark);
  margin-bottom:1rem;
}

.gh-faq__list{
  margin-top:1rem;
}

.gh-faq__item{
  background:var(--gh-card);
  border:1px solid var(--gh-border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:12px;
  transition:border-color .25s ease, box-shadow .25s ease;
}

.gh-faq__item.is-open{
  border-color:var(--gh-green);
  box-shadow:0 6px 22px rgba(40,48,63,0.08);
}

.gh-faq__question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.2rem;
  font-size:1.05rem;
  line-height:1.4;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  color:var(--gh-dark);
}

.gh-faq__question:focus{
  outline:3px solid var(--gh-accent);
  outline-offset:2px;
  border-radius:10px;
}

.gh-faq__icon{
  flex:0 0 auto;
  width:28px;height:28px;
  border-radius:50%;
  border:2px solid var(--gh-green);
  position:relative;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.gh-faq__icon::before,
.gh-faq__icon::after{
  content:"";
  position:absolute;
  background:var(--gh-green);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.gh-faq__icon::before{ width:14px;height:2px; }
.gh-faq__icon::after{ width:2px;height:14px; }

.gh-faq__item.is-open .gh-faq__icon{
  background:var(--gh-green);
  border-color:var(--gh-green);
}
.gh-faq__item.is-open .gh-faq__icon::after{
  /* turn + into – when open */
  height:0;
}

.gh-faq__answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 1.2rem;
  background:#FFF;
}
.gh-faq__item.is-open .gh-faq__answer{
  padding:0 1.2rem 1.1rem;
}

.gh-faq__answer p{
  margin-top:.9rem;
  color:var(--gh-text);
}

/* Links inside FAQ should match site accent but remain accessible */
.gh-faq a{
  color:var(--gh-accent);
  text-decoration:none;
}
.gh-faq a:hover{
  text-decoration:underline;
}

/* Make it sit nicely beside the Timeline & Costs cards */
@media (min-width: 992px){
  .gh-faq{
    box-shadow:0 4px 24px rgba(40,48,63,0.06);
  }
}
/* Grab Hub FAQ — palette */
:root{
  --gh-dark:#28303F;
  --gh-green:#549E4B;
  --gh-accent:#F6753D;
  --gh-text:#0F1A1A;
  --gh-bg:#F8FAFC;
  --gh-card:#FFFFFF;
  --gh-border:rgba(40,48,63,0.12);
}

.gh-eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  color:var(--gh-green);
  margin-bottom:.35rem;
  font-size:.8rem;
}

.gh-faq{
  background:var(--gh-bg);
  color:var(--gh-text);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius:16px;
  border:1px solid var(--gh-border);
}

.gh-faq__header h2{
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  color:var(--gh-dark);
  margin-bottom:1rem;
}

.gh-faq__list{
  margin-top:1rem;
}

.gh-faq__item{
  background:var(--gh-card);
  border:1px solid var(--gh-border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:12px;
  transition:border-color .25s ease, box-shadow .25s ease;
}

.gh-faq__item.is-open{
  border-color:var(--gh-green);
  box-shadow:0 6px 22px rgba(40,48,63,0.08);
}

.gh-faq__question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.2rem;
  font-size:1.05rem;
  line-height:1.4;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  color:var(--gh-dark);
}

.gh-faq__question:focus{
  outline:3px solid var(--gh-accent);
  outline-offset:2px;
  border-radius:10px;
}

.gh-faq__icon{
  flex:0 0 auto;
  width:28px;height:28px;
  border-radius:50%;
  border:2px solid var(--gh-green);
  position:relative;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.gh-faq__icon::before,
.gh-faq__icon::after{
  content:"";
  position:absolute;
  background:var(--gh-green);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.gh-faq__icon::before{ width:14px;height:2px; }
.gh-faq__icon::after{ width:2px;height:14px; }

.gh-faq__item.is-open .gh-faq__icon{
  background:var(--gh-green);
  border-color:var(--gh-green);
}
.gh-faq__item.is-open .gh-faq__icon::after{
  /* turn + into – when open */
  height:0;
}

.gh-faq__answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 1.2rem;
  background:#FFF;
}
.gh-faq__item.is-open .gh-faq__answer{
  padding:0 1.2rem 1.1rem;
}

.gh-faq__answer p{
  margin-top:.9rem;
  color:var(--gh-text);
}

/* Links inside FAQ should match site accent but remain accessible */
.gh-faq a{
  color:var(--gh-accent);
  text-decoration:none;
}
.gh-faq a:hover{
  text-decoration:underline;
}

/* Make it sit nicely beside the Timeline & Costs cards */
@media (min-width: 992px){
  .gh-faq{
    box-shadow:0 4px 24px rgba(40,48,63,0.06);
  }
}
/* ===== Mobile overflow fix for Grab Hub FAQ ===== */
.gh-faq, .gh-faq * { box-sizing: border-box; }
.gh-faq { width:100%; max-width:100%; overflow-x:hidden; }
.gh-faq__item,
.gh-faq__question,
.gh-faq__answer { max-width:100%; }

/* Make the flex row wrap correctly and prevent text from pushing width */
.gh-faq__question {
  display:flex;
  align-items:center;
  gap:.75rem;
}
.gh-faq__question span:first-child{
  flex:1 1 auto;
  min-width:0;                /* allow text to shrink within flex */
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;      /* long words/URLs won't overflow */
}
.gh-faq__icon{
  flex:0 0 24px;
  width:24px; height:24px;
}

/* Tighten spacing + fonts on small screens */
@media (max-width: 480px){
  .gh-faq{ padding:16px; border-radius:12px; }
  .gh-faq__header h2{ font-size:1.25rem; }
  .gh-faq__question{ padding:12px 14px; font-size:1rem; }
  .gh-faq__answer{ padding:0 14px 12px; }
  .gh-faq__item{ margin:0 0 10px; }
}
/* Safety net if a parent container is wider than the viewport */
.gh-faq { margin-left:auto; margin-right:auto; }



/* =============== What to Expect: Timeline & Costs (standalone) =============== */
:root {
  --brand: #549E4B;          /* tweak this to match your brand */
  --brand-600: #0d9488;
  --ink: #0f172a;
  --muted: #475569;
  --bg: #ffffff90;
  --soft: #f8fafc;
  --ring: rgba(14,165,165,.15);
  --border: #e2e8f0;
}

.expect-section { background: var(--bg); padding: clamp(2rem, 3vw, 3rem) 1rem; }
.expect-container { max-width: 1100px; margin: 0 auto; }

.expect-header { text-align: center; margin-bottom: 2rem; }
.expect-header h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.expect-sub { color: var(--muted); margin-top: .5rem; }

.expect-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) {
  .expect-grid { grid-template-columns: 2.2fr 1fr; align-items: start; }
}

.expect-steps { margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1rem; }

.step { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: var(--soft); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; box-shadow: 0 1px 0 var(--ring); }
.step-badge { background: var(--brand); color: white; font-weight: 700; padding: .4rem .7rem; border-radius: 999px; line-height: 1; font-size: .85rem; white-space: nowrap; }
.step-title { margin: 0 0 .35rem 0; font-size: 1.05rem; color: var(--ink); }
.step-text p { margin: 0; color: var(--muted); }
.step + .step { position: relative; }
.step + .step::before {
  content: ""; position: absolute; left: .9rem; top: -1rem; bottom: calc(100% - 1rem);
  width: 2px; background: linear-gradient(to bottom, var(--ring), var(--brand));
  transform: translateX(-50%);
}
@media (min-width: 900px) {
  .step { padding: 1.25rem; }
  .step-title { font-size: 1.1rem; }
}

.expect-aside { position: sticky; top: 1rem; }
.aside-card { background: #549E4B23; border: 1px solid #549E4B; border-radius: 16px; padding: 1.25rem; }
.aside-title { margin: 0 0 .5rem 0; color: var(--brand-600); font-size: 1.1rem; }
.aside-body p { margin: 0 0 .75rem 0; color: #000; }
.aside-highlights { margin: 0; padding: 0; display: grid; gap: .5rem; }
.aside-highlights .hi { list-style: none; display: grid; grid-template-columns: 1.25rem 1fr; gap: .5rem; align-items: start; color: var(--muted); }
.aside-highlights .hi::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 4px; border: 2px solid var(--brand);
  background: radial-gradient(closest-side, var(--brand) 60%, transparent 0);
  margin-top: .15rem;
}

.expect-section a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 2px; }


/* Grab Hub FAQ — palette */
:root{
  --gh-dark:#28303F;
  --gh-green:#549E4B;
  --gh-accent:#F6753D;
  --gh-text:#0F1A1A;
  --gh-bg:#F8FAFC;
  --gh-card:#FFFFFF;
  --gh-border:rgba(40,48,63,0.12);
}

.gh-eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  color:var(--gh-green);
  margin-bottom:.35rem;
  font-size:.8rem;
}

.gh-faq{
  background:var(--gh-bg);
  color:var(--gh-text);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius:16px;
  border:1px solid var(--gh-border);
}

.gh-faq__header h2{
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  color:var(--gh-dark);
  margin-bottom:1rem;
}

.gh-faq__list{
  margin-top:1rem;
}

.gh-faq__item{
  background:var(--gh-card);
  border:1px solid var(--gh-border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:12px;
  transition:border-color .25s ease, box-shadow .25s ease;
}

.gh-faq__item.is-open{
  border-color:var(--gh-green);
  box-shadow:0 6px 22px rgba(40,48,63,0.08);
}

.gh-faq__question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.2rem;
  font-size:1.05rem;
  line-height:1.4;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  color:var(--gh-dark);
}

.gh-faq__question:focus{
  outline:3px solid var(--gh-accent);
  outline-offset:2px;
  border-radius:10px;
}

.gh-faq__icon{
  flex:0 0 auto;
  width:28px;height:28px;
  border-radius:50%;
  border:2px solid var(--gh-green);
  position:relative;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.gh-faq__icon::before,
.gh-faq__icon::after{
  content:"";
  position:absolute;
  background:var(--gh-green);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.gh-faq__icon::before{ width:14px;height:2px; }
.gh-faq__icon::after{ width:2px;height:14px; }

.gh-faq__item.is-open .gh-faq__icon{
  background:var(--gh-green);
  border-color:var(--gh-green);
}
.gh-faq__item.is-open .gh-faq__icon::after{
  /* turn + into – when open */
  height:0;
}

.gh-faq__answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 1.2rem;
  background:#FFF;
}
.gh-faq__item.is-open .gh-faq__answer{
  padding:0 1.2rem 1.1rem;
}

.gh-faq__answer p{
  margin-top:.9rem;
  color:var(--gh-text);
}

/* Links inside FAQ should match site accent but remain accessible */
.gh-faq a{
  color:var(--gh-accent);
  text-decoration:none;
}
.gh-faq a:hover{
  text-decoration:underline;
}

/* Make it sit nicely beside the Timeline & Costs cards */
@media (min-width: 992px){
  .gh-faq{
    box-shadow:0 4px 24px rgba(40,48,63,0.06);
  }
}
/* Grab Hub FAQ — palette */
:root{
  --gh-dark:#28303F;
  --gh-green:#549E4B;
  --gh-accent:#F6753D;
  --gh-text:#0F1A1A;
  --gh-bg:#F8FAFC;
  --gh-card:#FFFFFF;
  --gh-border:rgba(40,48,63,0.12);
}

.gh-eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  color:var(--gh-green);
  margin-bottom:.35rem;
  font-size:.8rem;
}

.gh-faq{
  background:var(--gh-bg);
  color:var(--gh-text);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius:16px;
  border:1px solid var(--gh-border);
}

.gh-faq__header h2{
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  color:var(--gh-dark);
  margin-bottom:1rem;
}

.gh-faq__list{
  margin-top:1rem;
}

.gh-faq__item{
  background:var(--gh-card);
  border:1px solid var(--gh-border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:12px;
  transition:border-color .25s ease, box-shadow .25s ease;
}

.gh-faq__item.is-open{
  border-color:var(--gh-green);
  box-shadow:0 6px 22px rgba(40,48,63,0.08);
}

.gh-faq__question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.2rem;
  font-size:1.05rem;
  line-height:1.4;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  color:var(--gh-dark);
}

.gh-faq__question:focus{
  outline:3px solid var(--gh-accent);
  outline-offset:2px;
  border-radius:10px;
}

.gh-faq__icon{
  flex:0 0 auto;
  width:28px;height:28px;
  border-radius:50%;
  border:2px solid var(--gh-green);
  position:relative;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.gh-faq__icon::before,
.gh-faq__icon::after{
  content:"";
  position:absolute;
  background:var(--gh-green);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.gh-faq__icon::before{ width:14px;height:2px; }
.gh-faq__icon::after{ width:2px;height:14px; }

.gh-faq__item.is-open .gh-faq__icon{
  background:var(--gh-green);
  border-color:var(--gh-green);
}
.gh-faq__item.is-open .gh-faq__icon::after{
  /* turn + into – when open */
  height:0;
}

.gh-faq__answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  padding:0 1.2rem;
  background:#FFF;
}
.gh-faq__item.is-open .gh-faq__answer{
  padding:0 1.2rem 1.1rem;
}

.gh-faq__answer p{
  margin-top:.9rem;
  color:var(--gh-text);
}

/* Links inside FAQ should match site accent but remain accessible */
.gh-faq a{
  color:var(--gh-accent);
  text-decoration:none;
}
.gh-faq a:hover{
  text-decoration:underline;
}

/* Make it sit nicely beside the Timeline & Costs cards */
@media (min-width: 992px){
  .gh-faq{
    box-shadow:0 4px 24px rgba(40,48,63,0.06);
  }
}
/* ===== Mobile overflow fix for Grab Hub FAQ ===== */
.gh-faq, .gh-faq * { box-sizing: border-box; }
.gh-faq { width:100%; max-width:100%; overflow-x:hidden; }
.gh-faq__item,
.gh-faq__question,
.gh-faq__answer { max-width:100%; }

/* Make the flex row wrap correctly and prevent text from pushing width */
.gh-faq__question {
  display:flex;
  align-items:center;
  gap:.75rem;
}
.gh-faq__question span:first-child{
  flex:1 1 auto;
  min-width:0;                /* allow text to shrink within flex */
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;      /* long words/URLs won't overflow */
}
.gh-faq__icon{
  flex:0 0 24px;
  width:24px; height:24px;
}

/* Tighten spacing + fonts on small screens */
@media (max-width: 480px){
  .gh-faq{ padding:16px; border-radius:12px; }
  .gh-faq__header h2{ font-size:1.25rem; }
  .gh-faq__question{ padding:12px 14px; font-size:1rem; }
  .gh-faq__answer{ padding:0 14px 12px; }
  .gh-faq__item{ margin:0 0 10px; }
}
/* Safety net if a parent container is wider than the viewport */
.gh-faq { margin-left:auto; margin-right:auto; }



/* =============== What to Expect: Timeline & Costs (standalone) =============== */
:root {
  --brand: #549E4B;          /* tweak this to match your brand */
  --brand-600: #0d9488;
  --ink: #0f172a;
  --muted: #475569;
  --bg: #ffffff90;
  --soft: #f8fafc;
  --ring: rgba(14,165,165,.15);
  --border: #e2e8f0;
}

.expect-section { background: var(--bg); padding: clamp(2rem, 3vw, 3rem) 1rem; }
.expect-container { max-width: 1100px; margin: 0 auto; }

.expect-header { text-align: center; margin-bottom: 2rem; }
.expect-header h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.expect-sub { color: var(--muted); margin-top: .5rem; }

.expect-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) {
  .expect-grid { grid-template-columns: 2.2fr 1fr; align-items: start; }
}

.expect-steps { margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1rem; }

.step { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: var(--soft); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; box-shadow: 0 1px 0 var(--ring); }
.step-badge { background: var(--brand); color: white; font-weight: 700; padding: .4rem .7rem; border-radius: 999px; line-height: 1; font-size: .85rem; white-space: nowrap; }
.step-title { margin: 0 0 .35rem 0; font-size: 1.05rem; color: var(--ink); }
.step-text p { margin: 0; color: var(--muted); }
.step + .step { position: relative; }
.step + .step::before {
  content: ""; position: absolute; left: .9rem; top: -1rem; bottom: calc(100% - 1rem);
  width: 2px; background: linear-gradient(to bottom, var(--ring), var(--brand));
  transform: translateX(-50%);
}
@media (min-width: 900px) {
  .step { padding: 1.25rem; }
  .step-title { font-size: 1.1rem; }
}

.expect-aside { position: sticky; top: 1rem; }
.aside-card { background: #549E4B23; border: 1px solid #549E4B; border-radius: 16px; padding: 1.25rem; }
.aside-title { margin: 0 0 .5rem 0; color: var(--brand-600); font-size: 1.1rem; }
.aside-body p { margin: 0 0 .75rem 0; color: #000; }
.aside-highlights { margin: 0; padding: 0; display: grid; gap: .5rem; }
.aside-highlights .hi { list-style: none; display: grid; grid-template-columns: 1.25rem 1fr; gap: .5rem; align-items: start; color: var(--muted); }
.aside-highlights .hi::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 4px; border: 2px solid var(--brand);
  background: radial-gradient(closest-side, var(--brand) 60%, transparent 0);
  margin-top: .15rem;
}

.expect-section a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 2px; }
/* =========================
   Grab Hub Article (clean)
   ========================= */

/* Palette & tokens */
:root {
  --gh-ink:#0F1A1A;
  --gh-muted:#475569;
  --gh-green:#549E4B;
  --gh-green-700:#3E7A39;
  --gh-sand:#FBF7F1;
  --gh-soft:#F8FAFC;
  --gh-border:rgba(40,48,63,.12);
  --gh-shadow:0 10px 30px rgba(0,0,0,.08);
  --gh-br:16px;
}

/* Base */
body { color:var(--gh-ink); }
.comparison-container{ max-width:1200px; margin:0 auto; }
h1{ font-size:clamp(28px,3vw,38px); line-height:1.2; margin:0 0 .75rem; }
h2{ font-size:clamp(22px,2.2vw,28px); margin:1.5rem 0 .5rem; }
h3{ font-size:clamp(18px,1.6vw,20px); margin:1rem 0 .35rem; }
a{ color:var(--gh-green-700); text-underline-offset:2px; }
.muted{ color:var(--gh-muted); }
.gh-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--gh-green); font-size:.8rem; display:block; margin-bottom:.35rem; }
.lede{ background:var(--gh-sand); border:1px solid var(--gh-border); border-radius:var(--gh-br); padding:1rem 1.1rem; box-shadow:var(--gh-shadow); }

/* In-page nav (pill) */
nav[aria-label="On this page"]{
  position:sticky; top:0; z-index:5; background:#fff; padding:.5rem; margin:1rem 0;
  border:1px solid var(--gh-border); border-radius:999px; box-shadow:var(--gh-shadow);
  display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center;
}
nav[aria-label="On this page"] a{
  text-decoration:none; color:var(--gh-ink); background:#fff;
  padding:.45rem .75rem; border-radius:999px; border:1px solid var(--gh-border);
  font-weight:600; font-size:.92rem; transition:.2s ease;
}
nav[aria-label="On this page"] a:hover{ border-color:var(--gh-green); box-shadow:0 0 0 3px rgba(84,158,75,.15); }
nav[aria-label="On this page"] a.is-active{ border-color:var(--gh-green); background:#F1F7EF; }

/* Anchor offset for sticky nav */
section{ scroll-margin-top:96px; }

/* Notices */
.note{ background:#FFF7ED; border:1px solid #FED7AA; padding:.85rem 1rem; border-radius:12px; }

/* ===== Comparison: desktop table */
.comparison-table-wrapper{ background:#fff; border-radius:var(--gh-br); overflow:hidden; box-shadow:var(--gh-shadow); margin:2rem 0; border:1px solid var(--gh-border); }
.comparison-table table{ width:100%; border-collapse:collapse; min-width:700px; }
.comparison-table th{ background:#0f1a1a; color:#fff; padding:1.1rem; text-align:left; font-weight:800; }
.comparison-table td{ padding:1rem 1.1rem; border-bottom:1px solid #ECEFF3; vertical-align:top; }
.comparison-table tr:nth-child(even){ background:#FBF7F1; }
.comparison-table tr:hover{ background:#FFF2D9; transition:background .25s ease; }
.highlight{ background:#549E4B26; padding:.15rem .45rem; border-radius:6px; font-weight:700; color:#1b3a1b; }

/* ===== Comparison: mobile cards */
.comparison-cards{ display:none; }
.comparison-card{ background:#fff; border-radius:var(--gh-br); margin-bottom:1rem; box-shadow:var(--gh-shadow); overflow:hidden; border:1px solid var(--gh-border); }
.card-header{ background:#EEF5EE; padding:.9rem 1rem; }
.card-header h3{ margin:0; font-weight:800; }
.card-content{ padding:1rem; }
.card-row{ display:flex; justify-content:space-between; gap:.75rem; padding:.65rem 0; border-bottom:1px solid #F1F5F9; }
.card-row:last-child{ border-bottom:0; }
.card-label{ font-weight:700; color:#0f1a1a; flex:0 0 40%; font-size:.95rem; }
.card-value{ flex:1; text-align:right; font-size:.95rem; }

/* ===== Timeline / Costs */
.expect-section{ background:var(--gh-soft); border:1px solid var(--gh-border); border-radius:var(--gh-br); padding:clamp(18px,3vw,24px); box-shadow:var(--gh-shadow); }
.expect-container{ max-width:1100px; margin:0 auto; }
.expect-header{ text-align:center; margin-bottom:1rem; }
.expect-sub{ color:var(--gh-muted); margin-top:.25rem; }
.expect-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:900px){ .expect-grid{ grid-template-columns:2.1fr 1fr; } }
.expect-steps{ margin:0; padding:0; display:grid; gap:.85rem; }
.step{ list-style:none; display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; background:#fff; border:1px solid var(--gh-border); border-radius:14px; padding:1rem; box-shadow:0 1px 0 rgba(0,0,0,.04); }
.step-badge{ background:var(--gh-green); color:#fff; font-weight:800; padding:.35rem .6rem; border-radius:999px; font-size:.8rem; }
.step-title{ margin:0 0 .25rem; font-size:1.05rem; }
.step-text p{ margin:0; color:var(--gh-muted); }
.step + .step{ position:relative; }
.step + .step:before{ content:""; position:absolute; left:.9rem; top:-1rem; bottom:calc(100% - 1rem); width:2px; background:linear-gradient(to bottom,rgba(84,158,75,.15),var(--gh-green)); transform:translateX(-50%); }
.expect-aside{ position:sticky; top:1rem; }
.aside-card{ background:#EAF3E8; border:1px solid var(--gh-green); border-radius:16px; padding:1rem; box-shadow:var(--gh-shadow); }
.aside-title{ margin:0 0 .35rem; color:var(--gh-green-700); font-size:1.05rem; }

/* ===== FAQ */
.gh-faq{ background:var(--gh-soft); color:var(--gh-ink); padding:clamp(18px,3vw,24px); border-radius:16px; border:1px solid var(--gh-border); box-shadow:var(--gh-shadow); }
.gh-faq__list{ margin-top:.5rem; }
.gh-faq__item{ background:#fff; border:1px solid var(--gh-border); border-radius:14px; overflow:hidden; margin-bottom:12px; transition:border-color .25s, box-shadow .25s; }
.gh-faq__item.is-open{ border-color:var(--gh-green); box-shadow:var(--gh-shadow); }
.gh-faq__question{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:1rem; font-size:1rem; background:transparent; border:0; text-align:left; cursor:pointer; }
.gh-faq__icon{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; border:2px solid var(--gh-green); position:relative; }
.gh-faq__icon::before,.gh-faq__icon::after{ content:""; position:absolute; background:var(--gh-green); top:50%; left:50%; transform:translate(-50%,-50%); }
.gh-faq__icon::before{ width:14px; height:2px; } .gh-faq__icon::after{ width:2px; height:14px; }
.gh-faq__item.is-open .gh-faq__icon{ background:var(--gh-green); border-color:var(--gh-green); }
.gh-faq__item.is-open .gh-faq__icon::after{ height:0; }
.gh-faq__answer{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 1rem; background:#fff; }
.gh-faq__item.is-open .gh-faq__answer{ padding:0 1rem 1rem; max-height:1000px; }
.gh-faq__answer p{ margin-top:.75rem; }

/* ===== Responsive */
@media (max-width:768px){
  .comparison-table-wrapper{ display:none; }
  .comparison-cards{ display:block; }
  .card-row{ flex-direction:column; align-items:flex-start; }
  .card-value{ text-align:left; }
  body{ padding:.75rem; }
}
@media (max-width:480px){
  .gh-faq{ padding:16px; border-radius:12px; }
  .gh-faq__question{ padding:12px 14px; }
  .gh-faq__answer{ padding:0 14px 12px; }
}

/* ===== Print */
@media print{
  nav[aria-label="On this page"], .comparison-cards{ display:none !important; }
  .comparison-table-wrapper{ display:block !important; box-shadow:none; border:1px solid #000; }
  .comparison-table tr:nth-child(even){ background:#f2f2f2 !important; }
}