/* Shared light presentation for ManageSubs marketing homepages. */
:root {
  color-scheme: light;
  --bg: #fbfcfe;
  --bg-2: #f1f5fb;
  --bg-3: #e6edf7;
  --border: #dfe6f0;
  --border2: #c5d2e5;
  --text: #243047;
  --text-2: #56647a;
  --text-3: #69788d;
  --accent: #2864c5;
  --accent2: #2864c5;
  --grad: #2864c5;
  --green: #237749;
  --red: #c34237;
  --yellow: #a76d16;
}
html { scroll-padding-top: 90px; }
body { font-size: 17px; overflow-x: clip; }
a { text-underline-offset: 4px; }
.container { max-width: 1200px; padding-inline: 36px; }
.skip-link { position: absolute; top: -80px; left: 16px; z-index: 1000; padding: 12px; background: white; color: var(--accent); }
.skip-link:focus { top: 12px; }
#mainNav, #mainNav.scrolled { position: relative; background: var(--bg); border-bottom: 1px solid var(--border); backdrop-filter: none; padding-block: 22px; }
.nav-logo { font-size: 21px; letter-spacing: -.6px; }
.btn-nav, .btn-nav:hover { background: var(--accent); box-shadow: none; transform: none; border-radius: 7px; padding: 11px 20px; font-size: 14px; }
.lang-btn { color: var(--text-2); border-color: var(--border2); }
.lang-drop { background: white; border-color: var(--border); box-shadow: 0 8px 24px #24304712; }
.lang-drop a { color: var(--text-2); }
.lang-drop a:hover, .lang-drop a.active { background: #eaf1fc; color: var(--accent); }
.hero { padding: 65px 0 75px; min-height: auto; }
.hero-grid { grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.hero h1 { font-size: clamp(44px, 4.7vw, 66px); line-height: 1.08; letter-spacing: -.055em; font-weight: 550; min-height: 0; margin: 22px 0; }
.grad-text { background: none; -webkit-text-fill-color: currentColor; color: var(--accent); font-family: Georgia, serif; font-style: italic; font-weight: 400; }
.hero-sub { font-size: 19px; line-height: 1.7; max-width: 500px; margin-bottom: 28px; }
.eyebrow { background: none; border: 0; border-radius: 0; padding: 0; color: var(--accent); font-size: 11px; letter-spacing: .12em; font-weight: 650; }
.hero .eyebrow svg { display: none; }
.orb, .phone-glow, .cta-section::before, .ai-card::before { display: none; }
.fade-up { opacity: 1; transform: none; transition: none; }
.hero-ctas { gap: 16px; align-items: center; }
.btn-store, .btn-store:hover { background: var(--accent); color: white; border-radius: 8px; padding: 14px 24px; box-shadow: none; transform: none; }
.btn-store-sub { font-size: 11px; opacity: 1; }
.btn-store-main { font-size: 20px; font-weight: 600; }
.btn-soon { padding: 8px 0; border: 0; background: none; color: var(--text-2); }
.btn-soon:hover { background: none; transform: none; }
.btn-soon .btn-store-main { font-size: 15px; }
.btn-soon .btn-store-sub { font-size: 11px; }
.hero-note { width: 100%; font-size: 12px; font-weight: 400; }
.qr-block { flex-direction: row; gap: 12px; margin: 4px 0 0; }
.qr-block img { width: 66px; height: 66px; border: 1px solid var(--border); border-radius: 4px; }
.qr-label { text-align: left; font-size: 11px; }
.product-hero { background: transparent; border-radius: 120px 120px 12px 12px; padding: 28px 30px 15px; gap: 22px; align-items: center; }
.product-shot { margin: 0; width: 240px; flex-shrink: 0; }
.product-shot img { display: block; width: 100%; height: auto; border: 1px solid #cbd7e8; border-radius: 26px; box-shadow: 0 12px 32px #294f8514; }
.product-shot figcaption { text-align: center; color: var(--text-3); font-size: 11px; margin-top: 12px; }
.hero-side-note { max-width: 100px; }
.hero-side-note span { font-size: 9px; letter-spacing: .1em; color: var(--accent); }
.hero-side-note p { font: italic 24px/1.35 Georgia, serif; margin-top: 12px; }
.proof-bar { background: transparent; border-block: 1px solid var(--border); padding: 23px 0; }
.proof-tag { font-size: 13px; color: var(--text); }
.proof-label { font-size: 11px; color: var(--text-3); }
.proof-tag .ic { color: var(--accent); width: 17px; }
.section, .section-alt { padding: 78px 0; }
.section-alt { background: #f1f5fb; }
.section-title { font-size: clamp(32px, 3.4vw, 46px); font-weight: 550; letter-spacing: -.045em; line-height: 1.13; }
.section-eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .12em; font-weight: 650; }
.section-sub { font-size: 17px; line-height: 1.7; }
.feat-card { border: 0; border-top: 1px solid var(--border2); background: transparent; box-shadow: none; padding: 24px 0 8px; border-radius: 0; }
.feat-card:hover { transform: none; background: transparent; border-color: var(--border2); }
.feat-icon { background: transparent !important; border-radius: 0; justify-content: flex-start; width: auto; height: auto; color: var(--accent) !important; margin-bottom: 20px; }
.feat-card h3 { font-size: 21px; font-weight: 600; }
.feat-card p { font-size: 16px; }
.tabs-row { margin-bottom: 20px; gap: 8px; }
.tab-btn { border-radius: 6px; font-size: 14px; padding: 10px 19px; }
.tab-btn.active { background: var(--accent); }
.preview-caption { text-align: center; color: var(--text-3); font-size: 12px; margin: 0 20px 35px; }
.showcase-stage { gap: 90px; }
.showcase-desc h3 { font-size: 34px; font-weight: 550; }
.showcase-desc p { font-size: 17px; line-height: 1.75; }
.showcase-detail { font-size: 14px; }
.sc-icon { background: #e6eefb; color: var(--accent); border-radius: 6px; }
.showcase-phone, .phone { --text: #fff; --text-2: #c2c5ca; --text-3: #989da6; --bg: #080c14; --bg-2: #0d1120; --bg-3: #131728; --border: #ffffff20; --green: #30d158; --red: #ff6b60; --accent: #a89af7; --accent2: #82aafa; --grad: #8874ea; box-shadow: 0 12px 35px #24304720; }
.showcase-phone:has(.real-panel.active) { height: auto; border-radius: 24px; background: white; border: 1px solid #cbd7e8; }
.showcase-phone:has(.real-panel.active)>.phone-pill { display: none; }
.showcase-phone:has(.real-panel.active) .phone-screen { background: white; height: auto; padding: 0; }
.real-panel img { width: 100%; height: auto; display: block; }
.ai-card { background: #eaf1fb; border: 0; box-shadow: none; padding: 48px; border-radius: 12px; }
.ai-card .ai-badge { background: transparent; color: var(--accent); border: 0; }
.ai-card h2 { font-weight: 550; letter-spacing: -.035em; }
.faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--border2); border-radius: 0; }
.faq-q { font-size: 17px; font-weight: 550; }
.faq-a { font-size: 16px; }
.home-guide { color: var(--text) !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; padding: 20px 0 !important; }
.home-guide strong { font-weight: 550; }
.cta-section { background: #eaf1fb; padding: 70px 0; }
.cta-title { font-size: clamp(38px, 4.4vw, 58px); font-weight: 550; letter-spacing: -.045em; }
.cta-sub { font-size: 18px; }
.cta-btn, .cta-btn:hover { background: var(--accent); color: white; box-shadow: none; border-radius: 8px; transform: none; }
footer { background: var(--bg); border-top: 1px solid var(--border); padding-top: 45px; }
footer a { color: var(--text-2); }
@media(max-width:1000px) {
 .hero-grid { gap: 32px; }
 .hero-side-note { display: none; }
 .product-hero { padding: 24px; }
 .product-shot { width: 230px; }
 .hero h1 { font-size: 48px; }
}
@media(max-width:920px) {
 .hero-grid { grid-template-columns: 1fr; text-align: left; }
 .hero { padding: 40px 0 50px; }
 .hero h1 { max-width: 650px; margin-inline: 0; min-height: 0; }
 .hero-sub { margin-inline: 0; }
 .hero-ctas { justify-content: flex-start; }
 .phone-wrap { order: 0; }
 .product-hero { width: min(100%,480px); margin: 12px auto 0; }
 .product-shot { width: 240px; }
 .hero-side-note { display: block; }
 .showcase-stage { gap: 35px; }
 .section, .section-alt { padding-block: 55px; }
 .proof-row { flex-wrap: wrap; gap: 20px; justify-content: center; }
 .proof-sep { display: none; }
}
@media(max-width:600px) {
 .container { padding-inline: 24px; }
 .hero h1 { font-size: 43px; }
 .hero-sub { font-size: 17px; }
 .hero-ctas { gap: 15px; }
 .hero-note { font-size: 11px; }
 .btn-soon { padding: 5px 0; }
 .btn-soon .btn-store-main { font-size: 14px; }
 .btn-store { padding: 14px 20px; }
 .product-hero { border-radius: 90px 90px 12px 12px; }
 .product-shot { width: 210px; }
 .hero-side-note { display: none; }
 .ai-card { padding: 28px 22px; }
 .showcase-desc h3 { font-size: 29px; }
 .proof-item { min-width: 120px; }
 .nav-logo { font-size: 18px; }
 .btn-nav { padding: 9px 12px; font-size: 13px; }
 .lang-picker { margin-right: 9px; }
 .lang-btn { padding: 6px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }

.secondary-shot { width: 150px; flex-shrink: 0; margin: 75px -15px 0 -25px; z-index: 2; }
.secondary-shot img { display: block; width: 100%; height: auto; border: 1px solid #cbd7e8; border-radius: 18px; box-shadow: 0 12px 28px #294f8518; }
@media(max-width:1000px) and (min-width:921px) { .secondary-shot { display: none; } }
@media(max-width:600px) { .secondary-shot { width: 120px; margin-left: -65px; margin-top: 130px; } .product-hero { padding-inline: 15px; gap: 5px; } }

/* Consistent section grid and restrained product presentation. */
.container { max-width: 1160px; }
.section, .section-alt { padding-block: 72px; }
.section-alt { background: transparent; border-top: 1px solid var(--border); }
.feat-header, .showcase-header { text-align: left; max-width: none; margin: 0 0 36px; }
.section-title { max-width: 740px; font-size: clamp(30px, 3.3vw, 44px); }
.section-eyebrow { margin-bottom: 14px; }
.feat-grid { gap: 32px 48px; }
.feat-ico { display: none; }
.feat-card { padding-top: 22px; }
.feat-card h3 { margin-bottom: 12px; font-size: 20px; }
.feat-card p { line-height: 1.7; }
.tabs-row { justify-content: flex-start; margin: 0 0 18px; }
.preview-caption { text-align: left; margin: 0 0 40px; }
.showcase-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.showcase-phone { justify-self: center; }
.showcase-phone:has(.real-panel.active) { width: 264px; height: 574px; }
.showcase-phone:has(.real-panel.active) .phone-screen { position: relative; inset: auto; display: block; border-radius: 23px; height: 100%; }
.real-panel.active { display: block; height: auto; }
.real-panel img { height: auto; aspect-ratio: 1320 / 2868; }
.showcase-desc { max-width: 440px; }
.sc-icon { background: none; width: 20px; height: 24px; border-radius: 0; color: var(--text-3); }
.showcase-detail { gap: 12px; }
.ai-card { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 64px; align-items: start; }
.ai-title { font-size: clamp(30px, 3.3vw, 44px); font-weight: 550; }
.ai-eyebrow { color: var(--accent); font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.ai-eyebrow svg, .ai-feat-ico { display: none; }
.ai-sub { font-size: 17px; line-height: 1.7; }
.ai-feats { gap: 0; }
.ai-feat { padding: 22px 0; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.ai-feat:first-child { padding-top: 0; border: 0; }
.ai-feat-body { font-size: 16px; line-height: 1.7; }
.ai-feat-body strong { font-size: 18px; font-weight: 550; margin-bottom: 8px; }
#guides .container { display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 64px; align-items: start; }
#guides .section-eyebrow { grid-column: 1; justify-content: flex-start !important; }
#guides .section-title { grid-column: 1; font-size: 36px; }
#guides .section-sub { grid-column: 1; margin: 20px 0 0 !important; }
#guides .home-guides { grid-column: 2; grid-row: 1 / span 4; max-width: none; width: 100%; margin: 0; gap: 0; }
#guides .home-guide { padding: 22px 0 !important; }
#guides .home-guide:first-child { padding-top: 0 !important; }
#guides .home-guide span { font-size: 14px; line-height: 1.6; }
#guides .home-guides-all { grid-column: 2; text-align: left; margin-top: 22px; }
#faq .container { max-width: 900px; }
#faq .section-title { text-align: left; }
.faq-q { padding-inline: 0; }
.faq-a { padding-inline: 0; }
.product-hero { border-radius: 0; padding: 0; }
.proof-label { display: none; }
.proof-row { justify-content: space-between; }
.proof-tag { font-weight: 500; }
@media(max-width:760px) {
 .showcase-stage, .ai-card, #guides .container { grid-template-columns: 1fr; gap: 32px; }
 #guides .section-eyebrow, #guides .section-title, #guides .section-sub, #guides .home-guides, #guides .home-guides-all { grid-column: 1; grid-row: auto; }
 #guides .section-sub { margin: 0 !important; }
 .showcase-desc { max-width: none; text-align: left; }
 .showcase-detail { justify-content: flex-start; }
 .feat-grid { grid-template-columns: 1fr; gap: 24px; }
 .section, .section-alt { padding-block: 48px; }
 .proof-row { justify-content: flex-start; }
 .showcase-phone { max-width: 100%; }
 .hero h1 { font-size: clamp(36px, 9vw, 46px); }
}
.btn-store .apple-svg, .cta-btn .apple-svg { fill: currentColor; color: inherit; }
.btn-store .apple-svg path, .cta-btn .apple-svg path { fill: currentColor; }

#download .qr-block { justify-content: center; margin: 26px 0 32px; }
.showcase-phone, .phone { color: #f4f4f7; }

/* Light-mode illustrative previews match the real dashboard capture. */
.showcase-phone {
  color: #24262d; background: #f2f2f7; border: 1px solid #cbd7e8;
  border-radius: 24px; height: 574px;
  --text: #24262d; --text-2: #5e626d; --text-3: #717580;
  --bg: #f2f2f7; --bg-2: #fff; --bg-3: #e9e9ef;
  --border: #dcdce4; --accent: #246bce; --accent2: #246bce;
  --grad: #246bce; --green: #237749; --red: #bf3931; --yellow: #996000;
}
.showcase-phone .phone-screen { background: #f2f2f7; border-radius: 23px; }
.showcase-phone > .phone-pill { display: none; }
.showcase-phone .app-statusbar { color: #24262d; }
.showcase-phone .app-tabs { background: #fff; border-color: #dcdce4; }
.showcase-phone .tab-it { color: #717580; }
.showcase-phone .tab-it.on { color: #246bce; }

/* Both download buttons inherit their white label colour. */
.cta-btn > svg, .cta-btn > svg path { fill: currentColor; }

/* Transparent fox brand mark. */
.nav-logo img, .brand img { object-fit: contain; border-radius: 0; }