:root{
    --bg:#f5f5fb;
    --panel:#ffffff;
    --panel-2:#fbfaf9;
    --text:#000000;
    --muted:#63594b;
    --muted-2:#807b6b;
    --brand:#48a146;
    --brand-2:#39803c;
    --ok:#16a34a;
    --warn:#c29d08;
    --border:rgba(118, 54, 6, 0.08);
    --shadow: 0 18px 7px rgba(116, 66, 21, 0.08);
    --radius: 6px;
    --radius-lg: 12px;
    --max: 1100px;
  }

:root :where(.is-layout-constrained) > * {
margin-block-start: 0;
}

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    /*background:
      radial-gradient(900px 600px at 0% 0%, rgba(14,165,233,.08), transparent 55%),
      radial-gradient(700px 500px at 100% 0%, rgba(168,85,247,.06), transparent 55%),
      linear-gradient(180deg, var(--bg), #ffffff 70%); */
    background: #48a1460f;
    line-height:1.6;
  }

  a{ color:inherit; text-decoration:none; }
  a:hover{ text-decoration:underline; }

  .skip{
    position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
  }
  .skip:focus{
    left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
    background:#000; border:1px solid var(--border); border-radius:10px; z-index:99;
  }

  header{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.86);
    border-bottom:1px solid var(--border);
  }
  .nav{
    max-width:var(--max);
    margin:0 auto;
    padding:14px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-weight:700; letter-spacing:.2px;
  }
  .logo{
    width:34px; height:34px;
    border-radius:12px;
    background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(167,139,250,.95));
    box-shadow: 0 10px 25px rgba(110,231,255,.15);
    position:relative;
  }
  .logo:after{
    content:"";
    position:absolute; inset:10px;
    border-radius:8px;
    border:2px solid rgba(255,255,255,.7);
    opacity:.6;
  }
  .navlinks{
    display:flex; align-items:center; gap:18px;
    color:var(--muted);
    font-weight:600;
    font-size:14px;
  }
  .navlinks a{
    padding:8px 10px;
    border-radius:12px;
  }
  .navlinks a:hover{
    background: rgba(255,255,255,.06);
    text-decoration:none;
  }
  .navcta{
    display:flex; align-items:center; gap:10px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#ffffff;
    color:var(--text);
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    box-shadow: 0 8px 16px rgba(15,23,42,.08);
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    white-space:nowrap;
  }
  .btn:hover{
    background: #f3f4ff;
    border-color: rgba(15,23,42,.18);
    box-shadow: 0 10px 22px rgba(15,23,42,.12);
    text-decoration:none;
  }
  .btn.primary{
    border: 0;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color:#f9fafb;
    box-shadow: 0 12px 30px rgba(37,99,235,.25);
  }
  .btn.primary:hover{
    background: linear-gradient(135deg, #0284c7, #9333ea);
  }
  .btn.wh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    background: #ffffff;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
    background-color: hsl(120deg 92% 29.41% / 55%);
    color: #fff;
    transition: .3s;
    transform: translateY(0);
    line-height: 1;
    height: 53px;
    border: unset;
  }
  .btn.wh:hover {
    background: #d69f18;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
    text-decoration: none;
  }
  .download-button {
        margin-right: 1em;
    }
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    padding:6px 11px;
    border-radius:999px;
    background:#eef2ff;
    border:1px solid rgba(129,140,248,.35);
    color:#4338ca;


    background-color: #65d473;
    color: #000;
    padding: 0.5em 0.9em;
    border-radius: 9px;
    border: unset;
  }
  .dot{
    width:8px; height:8px; border-radius:50%;
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(52,211,153,.12);
  }

  main{
    max-width:var(--max);
    margin:0 auto;
    padding:32px 20px 72px;
    padding-top: 0.5em !important;
  }

  .hero{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:28px;
    padding:28px;
    border: 2px dashed #ff9a27;
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow);
    overflow:hidden;
    position:relative;

    padding-bottom: 0;
  }
  .hero:before{
    content:"";
    position:absolute;
    inset:-2px;
    background: radial-gradient(520px 220px at 0% 0%, rgb(233 179 14 / 12%), transparent 60%), radial-gradient(520px 220px at 100% 0%, rgb(212 154 41 / 10%), transparent 60%);
    pointer-events:none;
    opacity:.8;
  }
  .hero > *{ position:relative; }
  .hero-screen {
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
  }
  .hero-screen img {
    max-height: 440px !important;
  }
  .kicker{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  h1{
    font-size: clamp(28px, 3vw, 44px);
    line-height:1.1;
    margin:0 0 12px;
    letter-spacing:-.6px;
  }
  h1.wp-block-heading, h1.wp-block-post-title {
    text-align: center;
    background: unset !important;
    background: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    line-height: normal;
    font-size: 2.5rem;
    margin-bottom: 0.5em;
    color: #000;
    padding-top: 0.5em !important;
}
  .sub{
    margin:0 0 18px;
    color:var(--muted);
    font-size:16px;
    max-width: 60ch;
  }
  .ctaRow{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin: 18px 0 0;


    justify-content: center;
    width: 100%;
    
  }
  .ctaRow.foot{
    display:block;
    flex-wrap:unset;
    justify-content: center;
    width: 100%;
    margin: 2em 0 0 0;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }
  .trust{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    color:var(--muted-2);
    font-size:13px;
  }
  .trust b{ color:var(--text); }

  .mock{
    height:100%;
    border-radius: 24px;
    border:1px solid rgba(15,23,42,.06);
    background: linear-gradient(180deg, #f9fafb, #eef2ff);
    box-shadow: 0 16px 40px rgba(15,23,42,.10);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height: 320px;
  }
  .mockTop{
    padding:14px 16px;
    border-bottom:1px solid rgba(15,23,42,.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--muted-2);
    font-weight:600;
    font-size:13px;
    background:#e5e7eb;
  }
  .mockDots{
    display:flex; gap:6px;
  }
  .mockDots span{
    width:10px; height:10px; border-radius:50%;
    background: rgba(148,163,184,.8);
  }
  .mockBody{
    padding:16px;
    display:grid;
    gap:10px;
  }
  .card{
    border-radius: 18px;
    border:1px solid rgba(15,23,42,.06);
    background:#ffffff;
    padding:12px 12px 12px;
  }
  .row{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  }
  .tag{
    display:inline-flex;
    gap:6px;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:#e0f2fe;
    border:1px solid rgba(14,165,233,.35);
    font-size:12px;
    color:#075985;
    font-weight:600;
    white-space:nowrap;

    background-color: #ffce51;
    color: #000;
    padding: 0.5em 0.9em;
    border-radius: 9px;
    border: unset;
    font-size: 0.5em;
  }
  .tag.purple{
    background-color: #764dd1;
    color: #ffffff;
    border: unset;
  }
  .tag.green{
    background-color: #65d473;
    color: #000;
    padding: 0.5em 0.9em;
    border-radius: 9px;
    border: unset;
  }
  .photo{
    height:86px;
    border-radius:14px;
    border:1px solid rgba(148,163,184,.35);
    background:
      radial-gradient(70px 50px at 30% 20%, rgba(14,165,233,.15), transparent 60%),
      radial-gradient(80px 60px at 80% 40%, rgba(168,85,247,.12), transparent 60%),
      linear-gradient(180deg, #e5f2ff, #eef2ff);
    margin-top:10px;
  }
  .card h3{
    margin:0;
    font-size:14px;
    letter-spacing:-.2px;
  }
  .card p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:13px;
  }

  section{
    margin-top:26px;
    padding:26px;
    border-radius: var(--radius-lg);
    border:1px solid var(--border);
    background: var(--panel);
    box-shadow: var(--shadow);
  }
  .grid2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:18px;
    align-items:start;
  }
  h2{
    margin:0 0 10px;
    font-size: clamp(20px, 2.2vw, 30px);
    letter-spacing:-.35px;
    line-height:1.2;
  }
  .grid2 h2 {
    margin-top: 0.5em;
  }
  .grid2 p.lead {
    margin-top: 1em;
  }
  section.btfCTA{
    border: unset !important;
    box-shadow: unset !important;
    background: transparent !important;
    text-align: center;
    padding: 1.3em 0 0.8em 0 !important;
  }
  section.btfCTA h2 {
    margin-top: 0 !important;
  }
  .lead{
    color:var(--muted);
    margin:0;
    max-width: 70ch;
  }
  .bullets{
    margin:0.5em;
    padding:0;
    list-style:none;
    display:grid;
    gap:10px;

    margin-left: auto;
    margin-right: auto;
  }
  .bullets li{
    display:flex;
    gap:10px;
    padding:10px 12px;
    border-radius: 16px;
    border:1px solid rgba(148,163,184,.35);
    background:#f9fafb;
    color:var(--muted);
    font-size: 0.8em;
    
    border-radius: 10px;
    padding: 18px;
    border: 0;
    background: radial-gradient(420px 180px at 0% 0%, rgb(233 172 14 / 12%), transparent 60%), linear-gradient(180deg, #fef2e0, #ffecc5);
    margin-top: 14px;
    font-size: 0.8em;
  }
  .bullets li b{ color:var(--text); }
  .icon{
    width: 26px;
    height: 26px;
    border-radius: 14px;
    flex: 0 0 auto;
    background: #ffffff;
    display: grid;
    place-items: center;
    border: unset;
    margin-top: 1px;
    font-size: 16px;
    color: var(--text);
  }

  .steps{
    display:grid;
    gap:12px;
    margin-top:12px;
  }
  .step{
    padding:12px 14px;
    border-radius:18px;
    border:1px solid rgba(148,163,184,.35);
    background:#f9fafb;
    display:flex;
    gap:12px;
  }
  .num{
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #e2fee0;
    border: 1px solid rgb(14 233 60 / 45%);
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #075985;
    flex: 0 0 auto;
    line-height: 1;
    color: #554b3b;
  }
  .step h3{ margin:0 !important; font-size:15px; }
  .step p{ margin:4px 0 0; color:var(--muted); font-size:13px; }

  .examples{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
    margin-top:14px;
  }
  .ex{
    padding: 14px;
    border-radius: 18px;
    border: 0;
    background: #fffaf3;
    text-align: center;
  }
  .ex h3{
    margin: 0 !important;
    font-size:15px; 
  }
  .ex p{ margin:0 0 10px; color:var(--muted); font-size:13px; }
  .chips{
    display:flex; 
    flex-wrap:wrap; 
    gap:8px;
    justify-content: center;
  }

  .benefits{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:12px;
    margin-top:14px;
  }
  .benefit{
    padding:14px;
    border-radius: 18px;
    border:1px solid rgba(148,163,184,.35);
    background:#f9fafb;
    text-align: center;
  }
  .benefit h3{ 
    margin: 1.3em 0 0.6em 0 !important;
    font-size:14px;
  }
  .benefit p{ margin:0; color:var(--muted); font-size:13px; }
  .feature-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.6);
    background:#eef2ff;
    color:#4338ca;
    
    background-color: #65d473;
    color: #000;
    padding: 0.5em 0.9em;
    border-radius: 9px;
    border: unset;
  }

  .callout{
    /*border-radius: 10px;
    padding: 18px;
    border: 0;
    background: radial-gradient(420px 180px at 0% 0%, rgb(233 172 14 / 12%), transparent 60%), linear-gradient(180deg, #fef2e0, #ffecc5);
    margin-top: 14px;
    font-size: 0.8em;*/

    border-radius: 10px;
    padding: 18px;
    border: 0;
    background: #97ff97;
    margin-top: 1em;
    font-size: 0.8em;
    color: #000;
  }
  .callout p{ 
    margin:0; 
    color: #000;
 }
  .callout strong{ color:var(--text); }

  .related{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
    justify-content: center;
  }
  .related a{
    padding:10px 12px;
    border-radius: 14px;
    border:1px solid rgba(148,163,184,.5);
    background:#f9fafb;
    color:var(--text);
    font-weight:600;
    font-size:13px;
    text-decoration:none;

    background-color: transparent;
    color: #ae80d6;
    padding: 0.5em 0.9em;
    border-radius: 9px;
    text-decoration: underline;
    border: unset;
  }
  .related a:hover{
    background:#eef2ff;
  }

  .finalCta{
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:flex-start;
    border-radius: var(--radius-lg);
    padding:26px;
    border: 2px solid rgb(91 197 24 / 31%);
    box-shadow: var(--shadow);
  }
  .finalCta h2{ margin:0; }
  .finalCta p{ margin:0; color:var(--muted); max-width: 70ch; }
  .download-button img {
    max-width: 180px;
}

.afterthought {
    text-align: center;
    margin-top: 2em;
}

footer h2.wp-block-site-title.has-large-font-size {
    margin-top: 1em;
}
footer h3.wp-block-heading.has-medium-font-size {
    margin-bottom: 0.5em;
}

  /* Responsive */
  @media (max-width: 980px){
    .hero{ grid-template-columns: 1fr; }
    .mock{ min-height: 300px; }
    .grid2{ grid-template-columns: 1fr; }
    .examples{ grid-template-columns: 1fr; }
    .benefits{ grid-template-columns: 1fr 1fr; }
    .navlinks{ display:none; }
    .hero-screen img {
        max-height: 240px !important;
    }
  }
  @media (max-width: 520px){
    section{ padding:18px; }
    .hero{ padding:18px; }
    .benefits{ grid-template-columns: 1fr; }
    .download-prompt {
      display: none;
    }
  }