.wrap{max-width:var(--maxw-marketing);margin:0 auto;padding:0 32px}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(246,241,228,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.header-in{max-width:var(--maxw-marketing);margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:4px;text-decoration:none}
/*.brand .jack{width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(227,166,58,.22);display:inline-block}*/
.brand .jack{width:24px;height:24px;background-image: url("/../images/logo-mark-gold-deep.png");   background-repeat: no-repeat;
  background-size: cover;
  background-position: center;}
.brand .word{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink); padding-top: 2px;}
.brand .word em{font-style:normal;color:var(--gold-deep)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{text-decoration:none;color:#3a5049;font-weight:500;font-size:15px}
.header-actions{display:flex;align-items:center;gap:18px}
.link-btn{background:none;border:none;color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;font-family:inherit;text-decoration:none;padding:0;display:inline-flex;align-items:center;gap:8px}
.cta-btn{background:var(--gold);color:var(--ink);font-weight:700;font-size:15px;padding:11px 20px;border-radius:9px;border:none;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
/* Short mobile-only label for the CTA (see the 760px query) - hidden on
   desktop, where the full .btn-text already fits fine. */
.btn-text-mobile{display:none}

/* hero */
.hero{background:var(--green);background-image:radial-gradient(120% 90% at 85% 0%,#1a4a3d 0%,var(--green) 55%,var(--green-deep) 100%);color:var(--ink-on-dark)}
.hero-grid{max-width:var(--maxw-marketing);margin:0 auto;padding:84px 32px 0;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin-bottom:26px}
.eyebrow .led{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:kd-pulse 2s ease-in-out infinite}
.hero h1{font-size:66px;line-height:.98;letter-spacing:-.025em;margin:0 0 22px}
.hero h1 em{font-style:normal;color:var(--gold)}
/* Arabic script needs taller lines than the Latin display face's .98 */
html[dir="rtl"] .hero h1{line-height:1.35}
.hero .lede{font-size:19px;line-height:1.55;color:var(--body-on-dark);max-width:460px;margin:0 0 30px}
.hero .lede em{font-style:normal;color:var(--gold)}
.claim-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.claim-field{direction:ltr;display:flex;align-items:stretch;background:var(--green-deep);border:1px solid rgba(227,166,58,.3);border-radius:11px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.claim-field input{border:none;background:transparent;color:var(--ink-on-dark);font-family:var(--font-mono);font-size:16px;padding:0 6px 0 18px;width:150px;min-width:0;outline:none}
.claim-field .suffix{display:flex;align-items:center;font-family:var(--font-mono);font-size:16px;color:var(--muted-on-dark);padding-right:14px}
.claim-field button{display:flex;align-items:center;background:var(--gold);color:var(--ink);font-weight:700;font-size:15px;padding:0 22px;border:none;cursor:pointer;font-family:inherit;text-decoration:none}

/* inbox preview mock */
.inbox-mock{background:var(--green-deep);border:1px solid rgba(227,166,58,.16);border-radius:20px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.inbox-mock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--muted-on-dark);text-transform:uppercase}
.inbox-mock-head .live{display:inline-flex;align-items:center;gap:7px;color:var(--gold)}
.inbox-mock-head .live .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:kd-pulse 2s ease-in-out infinite}
.mail-row{display:flex;gap:14px;align-items:flex-start;padding:14px 12px;border-radius:12px}
.mail-avatar{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:15px}
.mail-body{flex:1;min-width:0}
.mail-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mail-name{font-weight:700;font-size:14.5px;color:var(--ink-on-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-time{font-family:var(--font-mono);font-size:11px;color:var(--muted-on-dark-dim);flex:none}
.mail-addr{font-family:var(--font-mono);font-size:11.5px;color:#8aa093;margin:1px 0 3px}
.mail-subject{font-size:13.5px;color:#b9ccbf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-dot{flex:none;margin-top:6px;width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* spec strip (replaces fabricated live-activity stats with real plan facts) */
.spec-strip{background:var(--green-deep);border-top:1px solid rgba(255,255,255,.05)}
.spec-grid{max-width:var(--maxw-marketing);margin:0 auto;padding:34px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.spec-grid .n{font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--gold);line-height:1}
.spec-grid .l{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-dark);margin-top:8px}

/* why */
#why{padding:96px 32px}
.section-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;color:var(--gold-deep);text-transform:uppercase;display:flex;align-items:center;gap:9px;margin-bottom:18px}
.section-eyebrow .led{width:7px;height:7px;border-radius:50%;background:var(--gold)}
h2.section-h{font-size:48px;line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;max-width:720px}
.section-sub{font-size:18px;color:#4a5f57;max-width:560px;margin:0 0 52px;line-height:1.55}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature-card{background:var(--paper);border:1px solid rgba(23,52,44,.09);border-radius:16px;padding:28px}
.feature-card .mark{width:44px;height:44px;border-radius:11px;background:var(--green);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:20px;margin-bottom:20px}
.feature-card h3{font-size:21px;letter-spacing:-.01em;margin:0 0 9px;color:var(--ink)}
.feature-card p{font-size:15px;line-height:1.55;color:var(--body);margin:0}

/* features panel */
#features{padding:0 32px 92px}
.feature-panel{max-width:var(--maxw-marketing);margin:0 auto;background:var(--green);border-radius:24px;padding:56px;color:var(--ink-on-dark);display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.feature-panel h2{font-size:40px;line-height:1.04;letter-spacing:-.02em;margin:0 0 16px}
.feature-panel > div:first-child p{font-size:17px;color:var(--body-on-dark);line-height:1.55;margin:0}
.spec-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.spec-item{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.spec-item::before{font:900 14px/1.3 "Font Awesome 6 Free";content:"\f00c";color:var(--gold);flex:none}
.spec-item span{font-size:15px;color:#dce7df}

/* pricing - a light section with one dark card. A whole dark-green section
   with gold text reads heavy (and, with Kurdish script, ornamental), so green
   is kept for the featured plan only and gold for fills and small marks
   (buttons, checkmarks, ribbon), not for running text. */
#pricing{background:var(--client-bg);color:var(--ink);padding:92px 32px}
.pricing-wrap{max-width:1100px;margin:0 auto;text-align:center}
.pricing-sub{font-size:17px;line-height:1.55;color:var(--body);max-width:560px;margin:0 auto 30px}
.pricing-toggle{display:inline-flex;align-items:center;background:var(--paper);border:1px solid var(--border);border-radius:999px;padding:5px;margin-bottom:40px}
.pricing-toggle button{border:none;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:14px;padding:10px 22px;border-radius:999px;background:transparent;color:var(--body);display:flex;align-items:center;gap:8px}
.pricing-toggle button.active{background:var(--green);color:var(--ink-on-dark)}
.pricing-toggle .badge{background:var(--gold);color:var(--ink);font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.02em}
/* Three plans side by side: the mailbox (featured), the alias add-on and
   teams. align-items:stretch + a column flex inside each card keeps the
   buttons on one line however long each card's text runs. */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.pricing-card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--border-soft);border-radius:20px;padding:40px 30px 30px;text-align:start}
.plan-ribbon{position:absolute;top:-12px;inset-inline-start:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px;white-space:nowrap}
html[dir="rtl"] .plan-ribbon{transform:translateX(50%)}
.plan-ribbon.soon{background:var(--paper);color:var(--body);border:1px solid var(--border)}
.pricing-card .tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);margin-bottom:18px;text-align:center}
.price-row{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:6px;min-height:62px}
.price-main{font-family:var(--font-display);font-weight:800;font-size:62px;line-height:1;color:var(--ink)}
/* "Custom" is a word, not a number - smaller, so it sits on the same baseline
   as the other cards' prices without dwarfing them. */
.price-main.price-word{font-size:44px;align-self:center}
.price-suffix{font-size:17px;color:var(--body)}
.price-subline{font-size:14.5px;color:var(--muted-dim);margin:0 0 10px;text-align:center}
.price-saving{font-size:13px;line-height:1.45;color:var(--body-dim);background:var(--input-fill);border:1px solid var(--border-soft);border-radius:9px;padding:8px 12px;margin:0 0 24px;text-align:center}
.pricing-card .addr,.swap-row .addr{font-family:var(--font-mono);unicode-bidi:isolate}
.plan-points{display:flex;flex-direction:column;gap:11px;max-width:340px;margin:0 auto 30px;flex:1;width:100%}
.plan-points div{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--body-dim)}
.plan-points div::before{font:900 13px/1.4 "Font Awesome 6 Free";content:"\f00c";color:var(--gold-deep);flex:none}

/* The featured plan is the one dark card - the page's green, as a highlight. */
.pricing-card.featured{background:var(--green);border-color:var(--green);color:var(--ink-on-dark);box-shadow:0 24px 60px rgba(15,44,36,.28)}
.pricing-card.featured .tag{color:var(--muted-on-dark)}
.pricing-card.featured .price-main{color:var(--gold)}
.pricing-card.featured .price-suffix{color:var(--body-on-dark)}
.pricing-card.featured .price-subline{color:var(--muted-on-dark)}
.pricing-card.featured .price-saving{color:var(--ink-on-dark);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.pricing-card.featured .plan-points div{color:#dce7df}
.pricing-card.featured .plan-points div::before{color:var(--gold)}
.pricing-card .btn{text-decoration:none}

/* Facts under the cards: the discounts and the "ask us" options. */
.pricing-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px;text-align:start}
.pricing-note{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:16px;background:var(--paper);border:1px solid var(--border-soft)}
.pricing-note .mark{flex:none;width:38px;height:38px;border-radius:10px;background:var(--green);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:15px}
.pricing-note strong{display:block;font-family:var(--font-display);font-size:15.5px;color:var(--ink);margin-bottom:4px}
.pricing-note p{margin:0;font-size:13.5px;line-height:1.5;color:var(--body)}
.pricing-note a{color:var(--green);font-weight:700}

/* sponsors */
#sponsors{padding:92px 32px}
.sponsor-panel{max-width:var(--maxw-marketing);margin:0 auto;background:var(--paper);border:1px solid rgba(23,52,44,.09);border-radius:24px;padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.sponsor-panel h2{font-size:40px;line-height:1.04;letter-spacing:-.02em;margin:0 0 16px;color:var(--ink)}
.sponsor-panel p{font-size:17px;line-height:1.6;color:var(--body);margin:0 0 26px;max-width:520px}
.sponsor-actions .btn{text-decoration:none}
.sponsor-swap{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.swap-row{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px}
.swap-row .addr{font-size:17px;overflow-wrap:anywhere}
.swap-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.swap-row.old{background:var(--client-bg);color:var(--muted)}
.swap-row.old .addr{text-decoration:line-through;text-decoration-color:rgba(192,74,53,.6)}
.swap-row.new{background:var(--green);color:var(--gold);box-shadow:0 18px 40px rgba(15,44,36,.25)}
.swap-row.new .swap-label{color:var(--muted-on-dark)}
.swap-row.new .addr{font-size:22px;font-weight:700}
.swap-arrow{text-align:center;color:var(--gold-deep)}

/* footer */
footer.site{background:var(--green-deepest);color:var(--muted-on-dark);padding:46px 32px}
.footer-row{max-width:var(--maxw-marketing);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:4px}
/*.footer-brand .jack{width:14px;height:14px;border-radius:50%;background:var(--gold);display:inline-block}*/
.footer-brand .jack{width:24px;height:24px;background-image: url("/../images/logo-mark-gold.png");   background-repeat: no-repeat;
  background-size: cover;
  background-position: center;}
.footer-brand .word{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--ink-on-dark);}
.footer-brand .tag{font-family:var(--font-mono);font-size:12px;color:#5f7469;margin-inline-start:6px}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 26px;font-size:14px}
.footer-links a,.footer-links button{color:var(--muted-on-dark);text-decoration:none;background:none;border:none;cursor:pointer;font-family:inherit;font-size:14px;padding:0}
.footer-copy{font-family:var(--font-mono);font-size:12px;color:#5f7469}

@media (max-width:760px){
  .header-in{padding-left:16px;padding-right:16px}
  .nav-links{display:none}
  .header-actions{gap:10px}
  .wrap {padding:0}
  .cta-btn .btn-text{display:none}
  .cta-btn .btn-text-mobile{display:inline}
  .link-btn{font-size:14px}
  .cta-btn{padding:10px 14px;font-size:14px}
  .hero-grid{padding:44px 20px 0;grid-template-columns:minmax(0,1fr);gap:32px}
  .hero h1{font-size:36px}
  .spec-grid{grid-template-columns:repeat(2,1fr);padding-left:20px;padding-right:20px;gap:20px}
  #why{padding:30px 20px}
  h2.section-h{font-size:30px}
  .grid-3{grid-template-columns:1fr}
  #features{padding:0 16px 56px}
  .feature-panel{padding:28px 22px;grid-template-columns:1fr;gap:28px}
  .feature-panel h2{font-size:26px}
  .spec-list{grid-template-columns:1fr}
  #pricing{padding:56px 20px}
  .price-main{font-size:42px}
  .price-main.price-word{font-size:34px}
  .price-row{min-height:0}
  .pricing-grid,.pricing-notes{grid-template-columns:minmax(0,1fr);gap:26px}
  .pricing-notes{gap:12px}
  #sponsors{padding:56px 16px}
  .sponsor-panel{padding:28px 22px;grid-template-columns:minmax(0,1fr);gap:28px}
  .sponsor-panel h2{font-size:26px}
  footer.site{padding:32px 20px}
  .footer-row{flex-direction:column;align-items:flex-start}
}

@media (max-width:390px){
  .link-btn .btn-text{display:none}
}