/* Shared static landing page styles.
   Extracted from existing landing pages as part of issue #1123.
   Keep this file conservative: shared structure, no redesign. */

:root{
      /* Light, enterprise palette (NO purple) */
      --bg:#ffffff;
      --bg-soft:#f7f9fc;
      --text:#0b1220;
      --muted:#52607a;
      --line:rgba(10, 23, 48, .12);

      --brand:#0b3a6e;      /* navy */
      --brand-2:#0f4c8a;    /* slightly brighter navy */

      --card:#ffffff;
      --shadow:0 10px 30px rgba(10, 23, 48, .10);

      /* Plan accents (keep distinct) */
      --essential-accent:#0f4c8a;
      --advanced-accent:#1683d6;    /* azure */
      --indepth-accent:#0b3a6e;    /* deep navy */

      --radius:18px;
      --radius-sm:14px;
      --max:1120px;
      --pad:24px;
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background: var(--bg-soft);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

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

    .wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}

    /* Top bar */
    header{
      position:sticky;
      top:0;
      background:rgba(255,255,255,.85);
      backdrop-filter:saturate(160%) blur(10px);
      border-bottom:1px solid var(--line);
      z-index:10;
    }
    .top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      height:76px;
      gap:16px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:240px;
    }    .logo{
      height:56px;
      width:auto;
      display:block;
    }
    .brand-name{
      font-weight:700;
      letter-spacing:.2px;
      font-size:22px;
      line-height:1;
    }
    .nav{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .nav a{
      font-size:14px;
      color:var(--muted);
      padding:10px 12px;
      border-radius:10px;
    }
    .nav a:hover{background:rgba(11, 58, 110, .06); color:var(--text)}

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius:12px;
      font-weight:600;
      font-size:14px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      cursor:pointer;
    }
    .btn:hover{transform:translateY(-1px)}

    .btn-primary{
      background:linear-gradient(180deg, var(--brand-2), var(--brand));
      color:#fff;
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 10px 20px rgba(11, 58, 110, .20);
    }
    .btn-primary:hover{filter:brightness(1.03)}

    /* Hero */
    .hero{
      background:var(--bg-soft);
    }
    .hero-inner{
      padding:54px 0 44px;
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:30px;
      align-items:start;
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 12px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      color:var(--muted);
      font-size:13px;
      width:fit-content;
    }
    h1{
      margin:14px 0 12px;
      font-size:44px;
            font-weight:600;          /* refined (less bold) */
      letter-spacing:-.8px;
      line-height:1.04;
    }
    .sub{
      margin:0;
      color:var(--muted);
      font-size:16px;
      line-height:1.6;
      max-width:58ch;
    }
    .bullets{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px}
    .bullets li{display:flex; gap:10px; color:var(--text)}
    .dot{
      width:10px; height:10px; border-radius:50%;
      background:var(--brand);
      margin-top:6px;
      flex:0 0 auto;
    }

    .hero-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:18px;
    }
    .hero-card h3{margin:0 0 6px; font-size:14px; color:var(--muted); font-weight:700; letter-spacing:.2px}
    .hero-card p{margin:0 0 14px; font-size:14px; color:var(--text); line-height:1.5}
    .hero-actions{display:flex; gap:10px; flex-wrap:wrap}

/* ===== Apple-style hero CTA layout ===== */
    .hero-actions-apple{display:flex; flex-direction:column; gap:10px;}
    .btn-wide{width:100%; justify-content:center;}
    .hero-actions-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
    @media (max-width: 560px){
      .hero-actions-row{grid-template-columns:1fr;}
    }
    /* 2x2 CTA grid (fix CTA asymmetry) */
    .hero-actions-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
    .hero-actions-grid .btn{width:100%; height:56px; padding:0 14px; justify-content:center; text-align:center; white-space:normal; line-height:1.15;}
    @media (max-width: 560px){
      .hero-actions-grid{grid-template-columns:1fr;}
    }
    /* ===== END Apple hero CTA ===== */
    .cta-inline{display:flex; align-items:center; gap:8px;}
    .cta-inline .btn{flex:1 1 auto;}
    .cta-info{position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:14px; line-height:1; cursor:help; flex:0 0 auto;}
    .cta-info-tip{position:absolute; right:0; bottom:calc(100% + 10px); width:min(280px, 72vw); max-width:90vw; word-wrap:break-word; overflow-wrap:break-word; white-space:normal; overflow-x:auto; padding:6px; max-width:85vw; word-wrap:break-word; overflow-wrap:break-word; white-space:normal; overflow-x:auto; padding:6px; max-width:85vw; word-wrap:break-word; overflow-wrap:break-word; white-space:normal; overflow-x:auto; padding:6px; max-width:85vw; word-wrap:break-word; overflow-wrap:break-word; padding:10px 12px; border-radius:12px; background:#0f172a; color:#fff; font-size:12px; line-height:1.45; box-shadow:0 10px 30px rgba(2,6,23,.24); opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:20; text-align:left;}
    .cta-info:hover .cta-info-tip,
    .cta-info:focus-visible .cta-info-tip{opacity:1; visibility:visible; transform:translateY(0);}
    .cta-info:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
    @media (max-width: 560px){
      .cta-inline{flex-wrap:wrap; align-items:stretch; gap:6px}
      .cta-inline .btn{flex:1 1 100%}
      .cta-info{margin-left:auto}
      .cta-info-tip{right:auto; left:0; width:min(280px, 88vw)}
    }


    /* Pricing */
    main{
      background:var(--bg-soft);
      padding:40px 0 56px;
    }
    .section-title{
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:end;
      margin-bottom:16px;
    }
    .section-title h2{margin:0; font-size:24px; letter-spacing:-.2px}
    .section-title p{margin:0; color:var(--muted); font-size:14px; max-width:70ch}

    .grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:18px;
      margin-top:14px;
    }

    .plan{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:18px;
      display:flex;
      flex-direction:column;
      min-height:520px;
      position:relative;
      overflow:hidden;
    }

    /* subtle, clean “finish” without dirty gradients */
    .plan:before{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius:var(--radius);
      padding:1px;
      background:linear-gradient(180deg, rgba(15,76,138,.22), rgba(11,58,110,.02));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      pointer-events:none;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      width:fit-content;
      border-radius:999px;
      padding:7px 14px;
      font-size:12px;
      font-weight:700;
      letter-spacing:.3px;
      background:#eef4fb; /* keep Essential fill */
      color:#0b3a6e;
      border:1px solid #0b1220; /* thin dark outline for readability */
    }

    .plan-title{
      margin:12px 0 8px;
      font-size:24px; /* make readable */
      line-height:1.15;
      letter-spacing:-.3px;
    }

    .bestfor{
      margin:0 0 14px;
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
    }

    .price{
      margin:0 0 6px;
      font-size:18px;
      font-weight:800;
      letter-spacing:-.2px;
    }
    .price small{
      font-weight:600;
      color:var(--muted);
      font-size:12px;
    }

    .fine{
      margin:0 0 14px;
      color:var(--muted);
      font-size:12px;
      line-height:1.5;
    }

    .features{margin:12px 0 18px; padding:0; list-style:none; display:grid; gap:10px}
    .features li{display:flex; gap:10px; color:var(--text); font-size:14px; line-height:1.45}
    .tick{
      width:18px; height:18px; border-radius:6px;
      border:1px solid var(--line);
      display:grid; place-items:center;
      margin-top:1px;
      flex:0 0 auto;
    }
    .tick svg{width:12px; height:12px}

    .spacer{flex:1 1 auto}

    /* Plan themes — clean, no thick top frames */
    .plan.essential{border-top:none}
    .plan.advanced{border-top:none}
    .plan.indepth{border-top:none}

    .plan.advanced{
      /* lighter blue for Advanced */
      background:linear-gradient(180deg, #1a8fe6 0%, #0f63b8 100%);
      border-color:rgba(255,255,255,.18);
    }
    .plan.indepth{
      /* deep navy for In-Depth */
      background:linear-gradient(180deg, #0b3a6e 0%, #06284b 100%);
      border-color:rgba(255,255,255,.18);
    }

    .plan.advanced .plan-title,
    .plan.indepth .plan-title,
    .plan.advanced .features li,
    .plan.indepth .features li,
    .plan.advanced .price,
    .plan.indepth .price{color:#fff}

    .plan.advanced .bestfor,
    .plan.indepth .bestfor,
    .plan.advanced .fine,
    .plan.indepth .fine{color:rgba(255,255,255,.72)}

    .plan.advanced .tick,
    .plan.indepth .tick{border-color:rgba(255,255,255,.22)}

    .plan.advanced .tick svg,
    .plan.indepth .tick svg{fill:#fff}

    .plan .btn{width:100%}

    /* Footer note */
    .note{
      margin-top:22px;
      padding-top:18px;
      border-top:none;
      display:grid;
      grid-template-columns:1fr;
      gap:8px;
    }
    
    /* Legal disclaimer block (short, visually distinct) */
    .legal-note{
      background: rgba(15,23,42,.04);
      border: 1px solid rgba(15,23,42,.08);
    }
    .legal-note h3{display:flex; align-items:center; gap:10px}
    .legal-note h3::before{content:"⚖️"; font-size:18px}
    .legal-note a{font-weight:600; text-decoration:underline}
.note h3{margin:0; font-size:16px}
    .note p{margin:0; color:var(--muted); font-size:13px; line-height:1.6}

    /* Responsive */
    @media (max-width: 980px){
      .hero-inner{grid-template-columns:1fr;}
      h1{font-size:38px}
      .grid{grid-template-columns:1fr;}
      .plan{min-height:auto}
    }

    @media (max-width: 560px){
      .top{height:auto; padding:12px 0; flex-direction:column; align-items:stretch; gap:10px}
      .brand{min-width:0; justify-content:center}
      .nav{flex-wrap:wrap; justify-content:center; gap:8px}
      .nav a{flex:0 1 auto; padding:8px 10px}
      .logo{height:38px}
      h1{font-size:32px}
    }
  
    /* ===== BADGE OVERRIDES (final) ===== */
    .plan .badge{ box-shadow:0 1px 2px rgba(0,0,0,.12); }

    /* Essential: keep soft blue fill + dark outline */
    .plan.essential .badge{
      background:#eef4fb !important;
      border:1px solid #0b1220 !important;
      color:#0b3a6e !important;
    }

    /* Advanced: ice-blue pill (clearly distinct from the blue card) */
    .plan.advanced .badge{
      /* Advanced: mid-tone blue-grey with dark GREY outline */
      background:#d4e4f3 !important;
      border:1px solid #3b4650 !important; /* dark grey, not black */
      color:#0b3a6e !important;
    }

    /* In-Depth: cool light grey pill (stricter than Advanced) */
    .plan.indepth .badge{
      background:#f2f4f7 !important;
      border:1px solid #98a2b3 !important;
      color:#0b1220 !important;
    }
    /* ===== END BADGE OVERRIDES ===== */
  

/* ===== Steps strip (tech) — no pricing-card reuse ===== */
    .how{
      background:var(--bg-soft);
    }
    .steps{
      margin-top:10px;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:16px;
      align-items:stretch;
      position:relative;
      padding-bottom:18px; /* space for divider */
    }

    /* connecting line */
    .steps:before{
      content:"";
      position:absolute;
      left:20px;
      right:20px;
      top:18px;
      height:2px;
      background: rgba(11,58,110,.18);
      border-radius:999px;
      z-index:0;
    }

    .step{
      background: rgba(255,255,255,.75);
      border:1px solid rgba(15,23,42,.10);
      border-radius:16px;
      padding:16px 16px 18px;
      box-shadow: 0 10px 25px rgba(15,23,42,.08);
      position:relative;
      z-index:1;
      backdrop-filter: blur(8px);
    }

    .step-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }

    .step-badge{
      display:inline-flex;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.25px;
      color: var(--brand);
      background: rgba(11,58,110,.08);
      border:1px solid rgba(11,58,110,.16);
    }

    .step-dot{
      width:12px;
      height:12px;
      border-radius:50%;
      background: var(--brand);
      box-shadow: 0 0 0 6px rgba(11,58,110,.10);
      flex:0 0 auto;
    }

    .step h3{
      margin:0 0 8px;
      font-size:16px;
      letter-spacing:-.2px;
      line-height:1.25;
    }

    .step p{
      margin:0;
      color: var(--muted);
      font-size:13px;
      line-height:1.55;
    }

    @media (max-width: 980px){
      .steps{ grid-template-columns:1fr; }
      .steps:before{ display:none; }
      .step-dot{ box-shadow: 0 0 0 5px rgba(11,58,110,.10); }
    }
    /* ===== END steps ===== */

/* ===== Apple-like section divider ===== */
    /* ===== END divider ===== */

/* ===== Legal band (full-width, Apple-like) ===== */
    .legal-band{
      margin-top:0;
      background:var(--bg-soft);
padding:26px 0;
      }

    .legal-card{
      background:rgba(255,255,255,.72);
      border:1px solid rgba(15,23,42,.10);
      border-radius:16px;
      padding:22px 22px 18px;
      box-shadow:0 10px 25px rgba(15,23,42,.08);
      backdrop-filter:blur(8px);
    }

    .legal-card h3{
      margin:0 0 14px;
      font-size:16px;
      font-weight:650;
      letter-spacing:-.2px;
      color:var(--text);
    }

    .legal-card .features{
      margin:0;
      gap:12px;
    }

    .legal-card .features li{
      font-size:14px;
      line-height:1.55;
      color:var(--text);
    }

    .legal-card .tick{
      width:22px;
      height:22px;
      border-radius:999px;
      background:rgba(255,255,255,.9);
      border:1px solid rgba(15,23,42,.14);
      display:grid;
      place-items:center;
      margin-top:2px;
      flex:0 0 auto;
    }

    .legal-card a{
      font-weight:600;
      text-decoration:underline;
    }
    /* ===== END Legal band ===== */


    footer{background:#fff;}

    /* Payment note (Stripe + card badges) */
    .pay-note{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
    .pay-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
    .pay-badge{border:1px solid rgba(10,23,48,.14);border-radius:999px;padding:2px 8px;font-size:12px;line-height:1.4;color:var(--text);background:#fff;white-space:nowrap}


    .footer{background:#fff;}
    .divider{height:1px; width:100%; background:var(--line); margin:28px 0;}

/* Contact block: suppress the extra horizontal divider line in Talk to us.
   This line is generated by layout styling (background / inset shadows / pseudo-elements),
   so we hard-disable all of those for the Contact steps container and its children. */
.contact-steps{
  border:0 !important;
  border-top:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
.contact-steps::before,
.contact-steps::after,
.contact-steps *::before,
.contact-steps *::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* Keep the divider ABOVE Talk to us visible (between Legal Disclaimer and Talk to us). */
.divider.divider-before-contact{display:block !important; opacity:1 !important; visibility:visible !important;}


/* === Site footer (payments strip) === */
.site-footer{background:#fff; padding:26px 0; margin-top:0;}
.footer-inner{display:flex; gap:24px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;}
.footer-left,.footer-right{flex:1 1 260px;}
.footer-mid{flex:2 1 420px; text-align:center; display:flex; flex-direction:column; align-items:center;}
.footer-copy{margin:0; white-space:nowrap;}
.payment-logos{display:flex;justify-content:center;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(10,23,48,.04);border:1px solid rgba(10,23,48,.10);}
.pay-logos-strip{height:44px;width:auto;max-width:100%;display:block;opacity:.98;}
.footer-payments-title{margin:10px 0 0 0;opacity:.75;font-size:13px;line-height:1.4;}
.footer-right{display:flex; justify-content:flex-end; flex-wrap:wrap; align-items:center;}
.footer-right a{color:var(--text); text-decoration:none;}
.footer-right a:hover{text-decoration:underline;}
.footer-sep{margin:0 10px; opacity:.7;}
@media (max-width: 860px){
  .footer-inner{justify-content:center; gap:16px}
  .footer-left{order:3; text-align:center; flex:1 1 100%}
  .footer-mid{order:1; flex:1 1 100%}
  .footer-right{order:2; justify-content:center; flex:1 1 100%; text-align:center}
  .footer-right.fine{gap:6px 10px}
  .footer-sep{display:none}
  .footer-copy{white-space:normal; text-align:center}
}

/* ===== DORA / compact footer variant =====
   Existing DORA landing pages had a slightly different footer/payment layout.
   Keep that behavior scoped instead of duplicating the full CSS block. */
body.landing-footer-compact .footer-left,
body.landing-footer-compact .footer-right{flex:1 1 220px;}

body.landing-footer-compact .footer-mid{
  flex:2 1 420px;
  text-align:center;
  display:block;
  flex-direction:initial;
  align-items:initial;
}

body.landing-footer-compact .footer-payments-note{
  margin-top:14px;
  font-size:13px;
  opacity:.75;
}

body.landing-footer-compact .footer-right{
  display:flex;
  justify-content:flex-end;
  gap:0;
  flex-wrap:wrap;
  align-items:stretch;
}

@media (max-width: 860px){
  body.landing-footer-compact .footer-inner{
    align-items:center;
    justify-content:center;
    gap:16px;
  }
}