/* mycontactbase v1.8.0 */
/* ==========================================================================
   My Contact Base — shared marketing styles  v1.2.0
   Loaded by landing.html, personal.html, business.html, pricing.html.
   Edit here once; every page picks it up.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{font-family:Georgia,serif;background:#080e18;color:#e5e7eb;overflow-x:hidden}
a{text-decoration:none;color:inherit}
:focus-visible{outline:2px solid #c8a96e;outline-offset:3px}
img{max-width:100%}

/* ---------------------------------------------------------------- nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,14,24,.93);
    border-bottom:1px solid #1f2937;backdrop-filter:blur(8px);padding:0 28px;height:64px;
    display:flex;align-items:center;gap:10px}
.nav-sp{flex:1}
.nav-a{color:#9ca3af;font-size:.87em;padding:6px 11px;transition:color .2s}
.nav-a:hover{color:#e5e7eb}
.nav-a.on{color:#c8a96e}
.nav-in{color:#c8a96e;border:1px solid #c8a96e55;border-radius:6px;padding:7px 17px;
        font-size:.87em;transition:background .2s;white-space:nowrap}
.nav-in:hover{background:#c8a96e18}
.nav-go{background:#c8a96e;color:#080e18;border-radius:6px;padding:7px 17px;font-size:.87em;
        font-weight:700;transition:opacity .2s;white-space:nowrap}
.nav-go:hover{opacity:.88}
/* ------------------------------------------------------- mobile nav menu */
/* Base rules MUST come before the media queries that switch the button on.
   Same specificity means the last rule wins, so a base display:none placed
   after the breakpoint rule hides the button at every width. */
.nav-burger{display:none;flex-direction:column;align-items:center;justify-content:center;
            gap:4px;width:38px;height:34px;padding:0;flex-shrink:0;cursor:pointer;
            background:transparent;border:1px solid #374151;border-radius:6px;
            transition:border-color .2s}
.nav-burger:hover{border-color:#9ca3af}
.nav-burger span{display:block;width:16px;height:1.5px;background:#9ca3af;
                 transition:transform .2s,opacity .2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-panel{display:none;position:fixed;top:64px;left:0;right:0;z-index:99;
           background:rgba(8,14,24,.98);backdrop-filter:blur(8px);
           border-bottom:1px solid #1f2937;padding:6px 14px 14px;
           max-height:calc(100vh - 64px);overflow-y:auto}
.nav-panel a{display:block;color:#9ca3af;font-size:.95em;padding:14px 8px;
             border-bottom:1px solid #111827;transition:color .2s}
.nav-panel a:last-child{border-bottom:none}
.nav-panel a:hover{color:#e5e7eb}
.nav-panel a.on{color:#c8a96e}

/* Now the breakpoints, after the base rules so these win. */
@media(max-width:900px){.nav-a{display:none}nav{padding:0 14px;gap:7px}
                        .nav-burger{display:flex}}
/* Below 560px the bar runs out of room, so Sign in moves into the panel. */
@media(max-width:560px){.nav-in{display:none}}
@media(min-width:901px){.nav-panel{display:none!important}}
/* .open must come after the min-width rule above or it cannot win on mobile. */
.nav-panel.open{display:block}
@media(min-width:901px){.nav-panel.open{display:none}}
@media(prefers-reduced-motion:reduce){
  .nav-burger span{transition:none}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------------------- heroes */
.hero{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
      text-align:center;padding:120px 22px 64px;position:relative;overflow:hidden}
.hero.short{min-height:auto;padding:132px 22px 60px}
.hero::before{content:'';position:absolute;inset:0;
              background:radial-gradient(ellipse 80% 60% at 50% 0%,#c8a96e08 0%,transparent 70%);
              pointer-events:none}
.hero>*{position:relative}
.eyebrow{display:inline-block;background:#c8a96e18;color:#c8a96e;border:1px solid #c8a96e33;
         border-radius:20px;padding:5px 16px;font-size:.74em;letter-spacing:.11em;
         text-transform:uppercase;margin-bottom:24px}
.eyebrow.blue{background:#3b82f618;color:#3b82f6;border-color:#3b82f633}
h1{font-size:clamp(2.2em,5.2vw,3.9em);font-weight:400;line-height:1.12;margin-bottom:24px;max-width:900px}
h1 em{font-style:normal;color:#c8a96e}
h1 em.blue{color:#3b82f6}
.lede{color:#9ca3af;font-size:1.03em;line-height:1.75;max-width:650px;margin:0 auto 42px}
.cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.btn-g{background:#c8a96e;color:#080e18;border:none;border-radius:8px;padding:14px 30px;
       font-size:1em;font-family:Georgia,serif;cursor:pointer;font-weight:700;
       transition:opacity .2s;display:inline-block}
.btn-g:hover{opacity:.88}
.btn-b{background:#3b82f6;color:#fff;border:none;border-radius:8px;padding:14px 30px;
       font-size:1em;font-family:Georgia,serif;cursor:pointer;font-weight:700;
       transition:opacity .2s;display:inline-block}
.btn-b:hover{opacity:.88}
.btn-o{background:transparent;color:#e5e7eb;border:1px solid #374151;border-radius:8px;
       padding:14px 30px;font-size:1em;font-family:Georgia,serif;cursor:pointer;
       transition:all .2s;display:inline-block}
.btn-o:hover{border-color:#9ca3af;background:#0f1723}
.fineprint{color:#4b5563;font-size:.77em}

/* -------------------------------------------------------------- strip */
.strip{background:#0a1220;border-top:1px solid #1f2937;border-bottom:1px solid #1f2937;
       padding:15px 28px;display:flex;gap:34px;justify-content:center;flex-wrap:wrap}
.strip div{color:#6b7280;font-size:.81em}
.strip b{color:#c8a96e;font-weight:700}

/* ----------------------------------------------------------- sections */
section.s{padding:88px 28px;max-width:1140px;margin:0 auto}
section.s.tight{padding:60px 28px}
.tag{font-size:.71em;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;
     margin-bottom:11px;font-weight:700}
.tag.gold{color:#c8a96e}
.tag.blue{color:#3b82f6}
h2{font-size:clamp(1.8em,3.3vw,2.6em);font-weight:400;line-height:1.2;margin-bottom:16px}
h2 em{font-style:normal;color:#c8a96e}
h2 em.blue{font-style:normal;color:#3b82f6}
h3{font-size:1.25em;font-weight:400;line-height:1.3;margin-bottom:11px}
.sub{color:#9ca3af;font-size:.93em;line-height:1.75;max-width:640px}
.mid{text-align:center}
.mid .sub{margin:0 auto}
.hr{height:1px;background:#1f2937;margin:0 28px}

/* -------------------------------------------------------------- cards */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:42px;text-align:left}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px;text-align:left}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:42px;text-align:left}
@media(max-width:960px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.c{background:#0a1220;border:1px solid #1f2937;border-radius:12px;padding:23px}
.c.hl{border-color:#c8a96e33;background:#0d1520}
.c-n{font-size:.7em;letter-spacing:.12em;text-transform:uppercase;color:#c8a96e;
     font-weight:700;margin-bottom:9px}
.c-n.blue{color:#3b82f6}
.c-t{font-size:1.02em;color:#e5e7eb;margin-bottom:8px}
.c-b{font-size:.83em;color:#6b7280;line-height:1.7}
.c-eg{margin-top:13px;padding-top:11px;border-top:1px solid #111827;font-size:.75em;
      color:#4b5563;line-height:1.7}
.c-eg b{color:#9ca3af;font-weight:400}
.f-i{font-size:1.55em;margin-bottom:13px}

/* --------------------------------------------------------- app window */
.win{background:#0a1220;border:1px solid #1f2937;border-radius:14px;overflow:hidden;
     box-shadow:0 30px 60px rgba(0,0,0,.35);margin-top:42px}
.win.flush{margin-top:0}
.win-bar{background:#0f1723;border-bottom:1px solid #1f2937;padding:10px 15px;
         display:flex;align-items:center;gap:7px}
.dot{width:10px;height:10px;border-radius:50%;opacity:.7}
.win-tabs{display:flex;margin-left:11px;overflow:hidden}
.win-tab{font-size:.69em;padding:4px 11px;color:#6b7280;border-bottom:2px solid transparent;
         white-space:nowrap}
.win-tab.on{color:#c8a96e;border-bottom-color:#c8a96e}
.win-b{padding:18px}
.r{display:flex;align-items:center;gap:11px;padding:10px 11px;border-bottom:1px solid #111827}
.r:last-child{border:none}
.r-av{width:29px;height:29px;border-radius:50%;display:flex;align-items:center;
      justify-content:center;font-size:.61em;font-weight:700;flex-shrink:0}
.r-n{font-size:.81em;color:#e5e7eb}
.r-s{font-size:.69em;color:#6b7280}
.r-t{font-size:.63em;padding:2px 9px;border-radius:5px;white-space:nowrap}

/* ---------------------------------------------------------- two-up cta */
.aud{background:#0a1220;border:1px solid #1f2937;border-radius:16px;padding:29px 27px}
.aud-l{font-size:.7em;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.aud-t{font-size:1.3em;font-weight:400;margin-bottom:12px}
.aud-b{color:#9ca3af;font-size:.86em;line-height:1.75;margin-bottom:19px}

/* --------------------------------------------------------------- list */
.ul{list-style:none}
.ul li{display:flex;gap:10px;color:#9ca3af;font-size:.83em;padding:8px 0;
       border-bottom:1px solid #0f1723;align-items:flex-start;line-height:1.65}
.ul li:last-child{border:none}
.ar{flex-shrink:0;font-weight:700;color:#c8a96e}
.ar.blue{color:#3b82f6}

/* -------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:62px}
.split.rev>div:first-child{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}.split.rev>div:first-child{order:0}}
.sp-t{font-size:.7em;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
      margin-bottom:11px;color:#c8a96e}
.sp-t.blue{color:#3b82f6}
.sp-h{font-size:clamp(1.4em,2.3vw,1.9em);font-weight:400;line-height:1.25;margin-bottom:15px}
.sp-b{color:#9ca3af;font-size:.88em;line-height:1.75;margin-bottom:20px}

/* ------------------------------------------------------------ pricing */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:44px;text-align:left}
@media(max-width:1000px){.prices{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.prices{grid-template-columns:1fr;max-width:400px;margin:44px auto 0}}
.p{background:#0a1220;border:1px solid #1f2937;border-radius:12px;padding:25px 21px;
   display:flex;flex-direction:column}
.p.hot{border-color:#c8a96e44;background:#0d1520}
.p-badge{font-size:.62em;letter-spacing:.08em;text-transform:uppercase;background:#c8a96e;
         color:#080e18;padding:3px 9px;border-radius:5px;font-weight:700;
         align-self:flex-start;margin-bottom:9px}
.p-n{font-size:.76em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
     margin-bottom:11px;color:#6b7280}
.p-n.gold{color:#c8a96e}
.p-n.blue{color:#3b82f6}
.p-a{font-size:2em;font-weight:400;margin-bottom:3px;line-height:1}
.p-a span{font-size:.5em;vertical-align:top;margin-top:6px;display:inline-block}
.p-p{color:#6b7280;font-size:.71em;margin-bottom:20px;line-height:1.5}
.p-l{list-style:none;margin-bottom:22px;flex:1}
.p-l li{font-size:.79em;color:#9ca3af;padding:6px 0;border-bottom:1px solid #111827;
        display:flex;gap:8px;line-height:1.5}
.p-l li:last-child{border:none}
.ck{color:#7a9e7e;flex-shrink:0}
.no{color:#374151;flex-shrink:0}
.p-btn{width:100%;padding:10px 0;border-radius:6px;font-family:Georgia,serif;font-size:.84em;
       cursor:pointer;transition:all .2s;font-weight:700;display:block;text-align:center}
.pb-o{background:transparent;color:#9ca3af;border:1px solid #374151}
.pb-o:hover{border-color:#9ca3af;color:#e5e7eb}
.pb-g{background:#c8a96e;color:#080e18;border:none}
.pb-g:hover{opacity:.88}
.pb-b{background:#3b82f6;color:#fff;border:none}
.pb-b:hover{opacity:.88}
.pb-d{background:#1f2937;color:#e5e7eb;border:1px solid #374151}
.pb-d:hover{background:#374151}

/* ---------------------------------------------------- comparison table */
.cmp{width:100%;border-collapse:collapse;margin-top:38px;font-size:.83em}
.cmp th{text-align:left;padding:12px 10px;border-bottom:1px solid #1f2937;font-weight:400;
        color:#6b7280;font-size:.9em}
.cmp th.n{text-align:center;color:#e5e7eb}
.cmp th.n.gold{color:#c8a96e}
.cmp td{padding:11px 10px;border-bottom:1px solid #111827;color:#9ca3af}
.cmp td.n{text-align:center}
.cmp tr.grp td{color:#c8a96e;font-size:.85em;letter-spacing:.08em;text-transform:uppercase;
               padding-top:22px;border-bottom:1px solid #1f2937}
.cmp-wrap{overflow-x:auto}
@media(max-width:700px){.cmp{min-width:640px}}

/* --------------------------------------------------------------- misc */
.bundle{margin-top:24px;background:#0d1520;border:1px solid #c8a96e33;border-radius:12px;
        padding:21px 25px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-align:left}
.bd-t{font-size:1.03em;color:#e5e7eb;margin-bottom:5px}
.bd-b{font-size:.82em;color:#6b7280;line-height:1.65}
.quote{background:#0a1220;border-left:2px solid #c8a96e;border-radius:0;padding:20px 24px;
       margin-top:20px}
.quote p{font-size:.92em;line-height:1.75;color:#e5e7eb;margin-bottom:10px}
.quote cite{font-style:normal;font-size:.78em;color:#6b7280}
.faq{margin-top:38px;text-align:left}
.faq-q{border-bottom:1px solid #1f2937;padding:18px 0}
.faq-q:last-child{border:none}
.faq-q h4{font-size:.98em;font-weight:400;color:#e5e7eb;margin-bottom:8px}
.faq-q p{font-size:.84em;color:#6b7280;line-height:1.75}
.steps{counter-reset:st;margin-top:38px}
.step{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid #111827;align-items:flex-start}
.step:last-child{border:none}
.step-n{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#c8a96e18;
        color:#c8a96e;display:flex;align-items:center;justify-content:center;
        font-size:.82em;font-weight:700}
.step-t{font-size:.98em;color:#e5e7eb;margin-bottom:5px}
.step-b{font-size:.83em;color:#6b7280;line-height:1.7}
.final{text-align:center;padding:84px 28px;background:#0a1220;border-top:1px solid #1f2937}

footer{border-top:1px solid #1f2937;padding:42px 28px;text-align:center;color:#4b5563;
       font-size:.79em;line-height:2}
footer a{color:#6b7280}
footer a:hover{color:#9ca3af}
.foot-nav{margin-bottom:12px}