/* Safora's white web flow uses the iOS app's font, blue, and rounded surfaces.
   Separate campaign landings keep their own canvas and typography. */
@font-face {
  font-family:"Safora Sans";
  src:url("/assets/fonts/SourceSansPro-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"Safora Sans";
  src:url("/assets/fonts/SourceSansPro-SemiBold.ttf") format("truetype");
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
@font-face {
  font-family:"Safora Sans";
  src:url("/assets/fonts/SourceSansPro-Bold.ttf") format("truetype");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
html:not([data-landing]) {
  color-scheme:light;
  background:#fff !important;
}
html:not([data-landing]) body {
  --app-blue:#298fff;
  --app-ink:#101828;
  --app-muted:#697586;
  --app-line:#e5e7eb;
  --app-surface:#f8f9fa;
  background:#fff !important;
  color:var(--app-ink);
  font-family:"Safora Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:18px;
  line-height:1.5;
}
html:not([data-landing]) body::before {
  content:none !important;
  display:none !important;
  background:none !important;
}
html:not([data-landing]) #app :is(.button--primary, .payment-success-next) {
  min-height:56px;
  border:0 !important;
  border-radius:999px !important;
  background:var(--app-blue) !important;
  color:#fff !important;
  font-family:inherit;
  font-size:18px !important;
  font-weight:700;
  box-shadow:0 6px 16px rgba(41,143,255,.16) !important;
}
html:not([data-landing]) #app .button--primary:disabled {
  background:#dbeafe !important;
  color:#667b94 !important;
  box-shadow:none !important;
  opacity:1;
}
html:not([data-landing]) #app .site-header {
  background:#fff !important;
  border-bottom:1px solid #f1f2f4;
  box-shadow:none !important;
}
html:not([data-landing]) #app .site-footer {
  margin-top:40px;
  background:#fafbfc !important;
  border-top:1px solid var(--app-line);
}
#app .home-page :is(.home-feature-row, .home-steps li) {
  padding:20px !important;
  border:1px solid var(--app-line) !important;
  border-radius:24px !important;
  background:#fff !important;
  box-shadow:0 4px 16px rgba(16,24,40,.035) !important;
}
#app .home-page :is(.hero-copy, .home-section__lead, .home-showcase__description) {
  color:var(--app-muted) !important;
  font-size:18px !important;
  line-height:1.55 !important;
}
#app .home-page :is(.home-feature-row strong, .home-steps strong) { font-size:20px !important; }
#app .home-page :is(.home-feature-row p, .home-steps p) { font-size:17px !important; line-height:1.5; }

/* Email step: one clear task, like the app's account screens. */
#app .app-mail .mail-main--redesign {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100% !important;
  max-width:488px !important;
  min-height:100svh !important;
  height:auto !important;
  max-height:none !important;
  padding:clamp(40px,8vh,88px) 24px 40px !important;
  margin:0 auto !important;
  overflow:visible !important;
}
#app .app-mail .mail-view {
  display:flex;
  flex-direction:column;
  gap:0;
  height:auto;
  min-height:0;
  padding:0 !important;
}
#app .app-mail .mail-view__copy { gap:0; }
#app .app-mail .mail-app-icon {
  display:block;
  width:80px;
  height:80px;
  margin:0 auto 20px;
  border-radius:24px;
  box-shadow:0 6px 24px rgba(16,24,40,.08);
}
#app .app-mail .mail-trust-options { margin:0 auto 16px; }
#app .app-mail .mail-trust-badge {
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--app-blue) !important;
  font-size:16px !important;
  font-weight:600;
  gap:6px;
}
#app .app-mail .mail-view__copy h1 {
  max-width:100%;
  margin:0 0 16px !important;
  color:var(--app-ink) !important;
  font-size:clamp(32px,6vw,40px) !important;
  font-weight:700;
  line-height:1.1 !important;
  letter-spacing:-.7px;
}
#app .app-mail .mail-view__copy h1 span { color:var(--app-blue); }
#app .app-mail .mail-view__copy > p {
  max-width:360px;
  margin:0 auto !important;
  color:var(--app-muted) !important;
  font-size:18px !important;
  line-height:1.5 !important;
}
#app .app-mail .mail-form--redesign { margin:32px 0 0 !important; }
#app .app-mail .mail-field-wrap > label {
  display:block;
  margin:0 0 8px;
  color:#475467;
  font-size:16px;
  font-weight:600;
  text-align:left;
}
#app .app-mail .mail-input-shell { position:relative; }
#app .app-mail .mail-input-shell > svg {
  position:absolute;
  top:50%;
  left:18px;
  transform:translateY(-50%);
  color:#98a2af;
  pointer-events:none;
}
#app .app-mail #lead-email {
  width:100%;
  height:60px !important;
  padding:16px 18px 16px 54px !important;
  border:1px solid var(--app-line) !important;
  border-radius:16px !important;
  background:#fff !important;
  color:var(--app-ink) !important;
  font:400 18px/1.4 "Safora Sans",sans-serif !important;
  box-shadow:0 4px 16px rgba(16,24,40,.035) !important;
}
#app .app-mail #lead-email::placeholder { color:#98a2af; }
#app .app-mail #lead-email:focus {
  outline:0;
  border-color:var(--app-blue) !important;
  box-shadow:0 0 0 3px rgba(41,143,255,.12) !important;
}
#app .app-mail .mail-domain-picks {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 0 !important;
}
#app .app-mail .mail-domain-picks button {
  flex:1 0 auto;
  width:auto;
  height:auto !important;
  min-height:44px;
  padding:10px 8px;
  border:1px solid #edf0f3;
  border-radius:12px;
  background:var(--app-surface);
  color:#475467;
  font:600 16px/1.25 "Safora Sans",sans-serif !important;
  white-space:nowrap;
}
#app .app-mail .mail-domain-picks button:is(:hover,:focus-visible) {
  border-color:var(--app-blue);
  background:#eef6ff;
  color:#1876ce;
  transform:none;
}
#app .app-mail .mail-submit-area { margin:28px 0 0 !important; }
#app .app-mail .mail-submit-area .button { min-height:56px !important; }
#app .app-mail .security-pill {
  margin:16px auto 0 !important;
  color:var(--app-muted) !important;
  font-size:15px !important;
}
#app .app-mail .form-error { font-size:15px; }

/* Checkout: native-looking plan rows, feature list, and payment fields. */
#app .app-checkout .payment-layout > * { grid-area:auto !important; min-width:0; }
#app .app-checkout .payment-layout {
  display:flex !important;
  grid-template-columns:none !important;
  grid-template-areas:none !important;
  column-gap:0 !important;
  row-gap:0 !important;
  flex-direction:column;
  width:100% !important;
  max-width:528px !important;
  gap:0;
  margin:0 auto !important;
  padding:40px 24px 32px !important;
}
#app .app-checkout .checkout-intro { margin:0 0 24px; text-align:center; }
#app .app-checkout .checkout-shield {
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 14px;
  border-radius:18px;
  background:#eef6ff;
  color:var(--app-blue);
}
#app .app-checkout .checkout-title {
  margin:0 !important;
  color:var(--app-ink) !important;
  font-size:36px !important;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.5px;
}
#app .app-checkout .checkout-title span { color:var(--app-blue) !important; }
#app .app-checkout .checkout-offer-timer {
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px !important;
  margin:0 0 24px !important;
  border:0 !important;
  border-radius:16px !important;
  background:var(--app-surface) !important;
  box-shadow:none !important;
}
#app .app-checkout .checkout-offer-timer > strong {
  max-width:none;
  color:#475467 !important;
  font-size:17px !important;
  font-weight:600;
  line-height:1.3;
}
#app .app-checkout .checkout-offer-timer__readout { gap:3px; flex-shrink:0; }
#app .app-checkout .checkout-offer-timer__unit,
#app .app-checkout .checkout-offer-timer__separator {
  display:block;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0;
  background:none !important;
  color:var(--app-blue) !important;
  box-shadow:none !important;
  font:700 26px/1.2 "Safora Sans",sans-serif !important;
  font-variant-numeric:tabular-nums;
}
#app .app-checkout .checkout-plans { display:grid; gap:12px !important; margin:0 !important; }
#app .app-checkout .checkout-plan {
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  column-gap:14px;
  width:100%;
  min-height:96px !important;
  padding:20px !important;
  border:1px solid var(--app-line) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 4px 16px rgba(16,24,40,.035) !important;
  color:var(--app-ink);
  text-align:left;
}
#app .app-checkout .checkout-plan.is-selected {
  border:2px solid var(--app-blue) !important;
  padding:19px !important;
  background:#f2f8ff !important;
  box-shadow:none !important;
}
#app .app-checkout .checkout-plan__copy { grid-column:2; grid-row:1; min-width:0; }
#app .app-checkout .checkout-plan__copy strong { display:block; color:var(--app-ink); font-size:20px !important; line-height:1.25; }
#app .app-checkout .checkout-plan__copy > span { display:block; margin-top:4px; color:var(--app-muted); font-size:16px !important; line-height:1.3; }
#app .app-checkout .checkout-plan__copy b { color:inherit; font-size:inherit !important; font-weight:400; }
#app .app-checkout .checkout-plan__price { grid-column:3; grid-row:1; gap:0; text-align:right; color:var(--app-ink) !important; }
#app .app-checkout .checkout-plan__amount { display:flex; align-items:baseline; justify-content:flex-end; gap:0 !important; }
#app .app-checkout .checkout-plan__price :is(.currency,b,.cents) { color:var(--app-ink) !important; font-size:28px !important; font-weight:700; line-height:1.15; margin:0; letter-spacing:0; }
#app .app-checkout .checkout-plan__price .cents::before { content:"."; }
#app .app-checkout .checkout-plan__price .cents { align-self:baseline; }
#app .app-checkout .checkout-plan__price small { color:var(--app-muted); font-size:15px !important; line-height:1.3; }
#app .app-checkout .checkout-radio {
  position:static !important;
  grid-column:1;
  grid-row:1;
  width:24px;
  height:24px;
  border:1.5px solid #cdd3dc;
  background:#fff;
}
#app .app-checkout .checkout-radio i { width:12px; height:12px; background:transparent; }
#app .app-checkout .checkout-plan.is-selected .checkout-radio i { background:var(--app-blue); }
#app .app-checkout .checkout-plan.is-selected .checkout-radio { border-color:var(--app-blue); }
#app .app-checkout .checkout-plan__badge {
  position:absolute;
  top:-9px !important;
  right:18px !important;
  left:auto !important;
  padding:3px 10px !important;
  border:0 !important;
  border-radius:8px !important;
  background:var(--app-blue) !important;
  color:#fff !important;
  font:600 13px/1.3 "Safora Sans",sans-serif !important;
  transform:none !important;
}
#app .app-checkout .checkout-plan-skeleton { min-height:96px; border-radius:20px; background:var(--app-surface); }
#app .app-checkout :is(.checkout-benefits,.checkout-payment) { margin:32px 0 0 !important; }
#app .app-checkout .section-kicker { margin:0 0 6px; color:var(--app-muted); font-size:15px !important; font-weight:400; text-transform:none; letter-spacing:0; padding:0 !important; background:none !important; }
#app .app-checkout :is(.checkout-benefits h2,.checkout-payment-heading) { margin:0 0 20px !important; color:var(--app-ink); font-size:24px !important; line-height:1.2; text-align:left; }
#app .app-checkout .checkout-benefit-list {
  display:flex !important;
  flex-direction:column;
  gap:0 !important;
  padding:0 20px;
  border:1px solid var(--app-line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 4px 16px rgba(16,24,40,.035);
}
#app .app-checkout .checkout-benefit {
  display:flex !important;
  align-items:center;
  gap:14px !important;
  min-height:88px !important;
  padding:16px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  border-bottom:1px solid #edf0f3 !important;
  background:none !important;
  box-shadow:none !important;
}
#app .app-checkout .checkout-benefit:last-child { border-bottom:0 !important; }
#app .app-checkout .checkout-benefit__icon {
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:14px !important;
  background:#f4f7fa !important;
  color:var(--app-blue);
  box-shadow:none !important;
}
#app .app-checkout .checkout-benefit > div { min-width:0; }
#app .app-checkout .checkout-benefit strong { display:block; color:var(--app-ink); font-size:18px !important; line-height:1.25; }
#app .app-checkout .checkout-benefit small { display:block; margin-top:4px; color:var(--app-muted); font-size:16px !important; line-height:1.4; }
#app .app-checkout .checkout-payment {
  display:block !important;
  grid-template-columns:none !important;
  grid-template-areas:none !important;
  padding:24px !important;
  border:1px solid var(--app-line) !important;
  border-radius:24px !important;
  background:#fff !important;
  box-shadow:0 6px 24px rgba(16,24,40,.04) !important;
}
#app .app-checkout .checkout-payment-heading { margin-bottom:8px !important; }
#app .app-checkout .checkout-secure-note { display:flex; align-items:center; gap:6px; margin:0 0 24px; color:var(--app-muted); font-size:15px; }
#app .app-checkout #payment-ui-form { padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; }
#app .app-checkout .checkout-express:not([hidden]) { margin-bottom:20px; }
#app .app-checkout .checkout-confirm { width:100%; margin-top:20px !important; }
#app .app-checkout .checkout-subscription-copy { margin:20px 0 0 !important; color:var(--app-muted) !important; font-size:15px !important; line-height:1.5 !important; text-align:left; }
#app .app-checkout .preview-payment-form label { color:#475467; font-size:16px; font-weight:600; }
#app .app-checkout .preview-payment-form input { height:56px; padding:14px 16px; border:1px solid var(--app-line); border-radius:16px; background:#fff; color:var(--app-ink); font:400 18px/1.4 "Safora Sans",sans-serif; }
#app .app-checkout .preview-payment-form input:focus { border-color:var(--app-blue); box-shadow:0 0 0 3px rgba(41,143,255,.12); }
#app .app-checkout .moneyback-card {
  display:block !important;
  min-height:0 !important;
  align-self:auto !important;
  width:100% !important;
  margin:32px 0 0 !important;
  padding:24px !important;
  border:0 !important;
  border-radius:24px !important;
  background:var(--app-surface) !important;
  box-shadow:none !important;
  text-align:center;
}
#app .app-checkout .moneyback-stamp { position:static !important; display:block; width:72px !important; height:72px !important; margin:0 auto 16px !important; object-fit:contain; transform:none !important; }
#app .app-checkout .moneyback-card h2 { margin:0 0 12px; color:var(--app-ink); font-size:22px; line-height:1.25; }
#app .app-checkout .moneyback-card p { max-width:none !important; margin:0 !important; padding:0 !important; color:var(--app-muted) !important; font-size:16px !important; line-height:1.5; }
#app .app-checkout .form-error { color:#d92d20; font-size:16px; }
#app :is(.app-mail,.app-checkout) :is(button,a,input):focus-visible { outline:3px solid rgba(41,143,255,.35); outline-offset:3px; }

@media (min-width:960px) {
  #app .app-checkout .payment-layout {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:"intro intro" "offer payment" "plans payment" "benefits payment" "guarantee guarantee" !important;
    align-items:start;
    column-gap:40px !important;
    max-width:1040px !important;
    padding-top:56px !important;
  }
  #app .app-checkout .checkout-intro { grid-area:intro !important; margin-bottom:36px; }
  #app .app-checkout .checkout-offer-timer { grid-area:offer !important; }
  #app .app-checkout .checkout-plans { grid-area:plans !important; }
  #app .app-checkout .checkout-benefits { grid-area:benefits !important; }
  #app .app-checkout .checkout-payment { grid-area:payment !important; position:sticky; top:24px; margin-top:0 !important; padding:28px !important; }
  #app .app-checkout .moneyback-card { grid-area:guarantee !important; margin-top:40px !important; padding:32px 48px !important; }
}
@media (max-width:359px) {
  #app .app-mail .mail-main--redesign,
  #app .app-checkout .payment-layout { padding-left:16px !important; padding-right:16px !important; }
  #app .app-checkout .checkout-plan { padding:16px !important; column-gap:10px; }
  #app .app-checkout .checkout-plan.is-selected { padding:15px !important; }
  #app .app-checkout .checkout-plan__price :is(.currency,b,.cents) { font-size:24px !important; }
  #app .app-checkout .checkout-payment { padding:20px !important; }
}
@media (prefers-reduced-motion:reduce) {
  #app :is(.app-mail,.app-checkout) * { animation:none !important; transition:none !important; }
}

/* Keep the adjacent account and download steps in the same visual family. */
#app .login-page--redesign .login-view h1 { color:var(--app-ink) !important; font-size:36px !important; line-height:1.15; }
#app .login-page--redesign .login-view > p { color:var(--app-muted) !important; font-size:18px !important; }
#app .login-page--redesign .login-page-form input {
  min-height:58px;
  border:1px solid var(--app-line) !important;
  border-radius:16px !important;
  background:#fff !important;
  color:var(--app-ink) !important;
  font:400 18px/1.4 "Safora Sans",sans-serif !important;
  box-shadow:0 4px 16px rgba(16,24,40,.035) !important;
}
#app .download-page--redesign .subscription-status-card--redesign {
  padding:24px !important;
  border:1px solid var(--app-line) !important;
  border-radius:24px !important;
  background:#fff !important;
  box-shadow:0 4px 16px rgba(16,24,40,.035) !important;
}