:root {
  --ink:#162039;
  --ink-2:#29324b;
  --muted:#63718a;
  --primary:#6356f4;
  --primary-dark:#4d43d4;
  --purple:#8b5cf6;
  --line:#e7eaf2;
  --surface:#fff;
  --soft:#f7f8fc;
  --radius:18px;
  --shadow:0 16px 45px rgba(35,45,90,.08)
}


*,*::before,*::after {
  box-sizing:border-box
}


html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}

body {
  margin:0;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
  background:#fff;
  -webkit-font-smoothing:antialiased
}

body,button,a {
  font-synthesis:none
}


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

a:hover {
  color:var(--primary)
}

button {
  font:inherit
}

img,svg {
  max-width:100%
}

.icon {
  width:19px;
  height:19px;
  display:inline-block;
  vertical-align:middle;
  flex:none
}

p {
  margin:0 0 1em;
  color:var(--muted)
}

h1,h2,h3 {
  line-height:1.18;
  letter-spacing:-.04em;
  margin:0;
  font-weight:760
}

h1 {
  font-size:clamp(2.65rem,5.5vw,4.5rem)
}

h2 {
  font-size:clamp(2rem,3.5vw,3rem)
}

h3 {
  font-size:1.18rem;
  letter-spacing:-.02em
}

h1+p,h2+p,h3+p {
  margin-top:16px
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #a5a0ff;
  outline-offset:4px;
  border-radius:4px
}


.container {
  width:min(1180px,calc(100% - 48px));
  margin-inline:auto
}

.section {
  padding:100px 0
}

.section-kicker {
  display:inline-block;
  color:var(--primary);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  margin-bottom:16px
}

.gradient-text {
  background:linear-gradient(110deg,#4e55db 15%,#9164ed 80%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:11px;
  padding:13px 23px;
  font-weight:720;
  font-size:14px;
  line-height:1.3;
  white-space:nowrap;
  transition:background .18s,transform .18s,border-color .18s,color .18s;
  cursor:pointer
}

.btn:hover {
  transform:translateY(-2px)
}

.btn-primary {
  background:linear-gradient(125deg,#6757f7,#5349dd);
  color:#fff;
  box-shadow:0 9px 19px rgba(99,86,244,.2)
}

.btn-primary:hover {
  color:#fff;
  background:linear-gradient(125deg,#5648e8,#473bc9)
}

.btn-outline {
  border-color:#dbdeea;
  background:#fff;
  color:var(--ink)
}

.btn-outline:hover {
  border-color:#a8a3fa;
  color:var(--primary)
}

.btn-quiet {
  background:transparent;
  color:var(--ink);
  padding-left:7px
}

.btn-quiet:hover {
  color:var(--primary)
}

.btn-small {
  padding:10px 20px
}

.btn-white {
  background:#fff;
  color:var(--primary)
}

.btn-white:hover {
  color:#4338ca
}

.btn-block {
  width:100%
}

.text-link {
  display:inline-flex;
  gap:9px;
  align-items:center;
  color:var(--primary);
  font-weight:750;
  font-size:14px
}

.text-link .icon {
  width:17px
}


.skip-link {
  position:absolute;
  top:-90px;
  left:16px;
  z-index:100;
  background:#fff;
  padding:10px 15px;
  border-radius:8px
}

.skip-link:focus {
  top:10px
}


.site-header {
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid rgba(231,234,242,.85);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px)
}

.header-inner {
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  flex:none
}

.brand-mark {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#6658f5,#925ff0);
  box-shadow:0 8px 14px rgba(99,86,244,.14)
}

.brand-mark .icon {
  width:24px;
  height:24px
}

.brand-text {
  color:var(--ink);
  font-weight:820;
  font-size:20px;
  letter-spacing:-.045em;
  white-space:nowrap
}

.brand-text span {
  color:var(--primary)
}

.desktop-nav {
  display:flex;
  align-items:center;
  gap:33px;
  margin-left:auto
}

.desktop-nav a {
  font-size:14px;
  font-weight:650;
  color:#58637b;
  transition:color .15s
}

.desktop-nav a:hover,.desktop-nav a[aria-current="page"] {
  color:var(--primary)
}

.header-actions {
  display:flex;
  gap:10px;
  align-items:center
}

.menu-toggle {
  display:none;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  width:42px;
  height:42px;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  cursor:pointer
}

.mobile-nav[hidden] {
  display:none!important
}

.mobile-nav {
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 20px 25px rgba(12,24,52,.07)
}

.mobile-nav-inner {
  display:grid;
  gap:2px;
  padding-block:12px 22px
}

.mobile-nav a {
  padding:12px 8px;
  font-weight:650;
  border-radius:7px
}

.mobile-nav a:hover {
  background:var(--soft)
}

.mobile-nav-signin {
  color:var(--primary)
}


.hero {
  position:relative;
  overflow:hidden;
  padding:94px 0 106px;
  background:radial-gradient(ellipse 53% 80% at 98% 38%,rgba(155,154,250,.16),transparent 72%),radial-gradient(ellipse 40% 40% at -12% 100%,rgba(162,222,255,.17),transparent 70%),#fff
}

.hero-grid {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:50px;
  align-items:center
}

.hero-copy {
  max-width:590px
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:#f2f1ff;
  border:1px solid #e6e3ff;
  border-radius:60px;
  padding:6px 14px;
  color:#584bd4;
  font-size:12px;
  font-weight:780;
  margin-bottom:27px
}

.eyebrow-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7669fb;
  box-shadow:0 0 0 4px #e5e1ff
}

.hero h1 {
  max-width:630px;
  font-size:clamp(3rem,5.1vw,4.55rem);
  line-height:1.10
}

.hero-lead {
  font-size:18px;
  line-height:1.8;
  max-width:570px;
  margin-top:25px
}

.hero-actions {
  display:flex;
  gap:15px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:34px
}

.hero-benefits {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:38px
}

.hero-benefits span {
  display:flex;
  align-items:center;
  gap:7px;
  color:#57647d;
  font-size:12px;
  font-weight:680
}

.hero-benefits .icon {
  width:16px;
  height:16px;
  color:#30aa87
}

.hero-visual {
  position:relative;
  padding:37px 0 29px 4px;
  min-width:0
}

.hero-visual:before {
  content:"";
  position:absolute;
  inset:4% -6% -2% 5%;
  background:linear-gradient(145deg,#e5e7ff,#eef4ff);
  border-radius:60px;
  transform:rotate(-5deg);
  filter:blur(.5px)
}

.dashboard-card {
  position:relative;
  z-index:1;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  border:1px solid #e7e9f6;
  box-shadow:0 30px 65px rgba(54,62,140,.18),0 0 0 6px rgba(255,255,255,.6)
}

.dashboard-topbar {
  height:52px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:0 23px;
  border-bottom:1px solid #edf0f6;
  color:#8c93a5;
  font-size:11px;
  font-weight:720
}

.window-dots {
  display:flex;
  gap:5px
}

.window-dots i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e4e6ef
}

.window-dots i:first-child {
  background:#e9b3b0
}

.window-dots i:nth-child(2) {
  background:#f4d499
}

.window-dots i:nth-child(3) {
  background:#a7d9c0
}

.dash-avatar {
  margin-left:auto;
  background:#eae8ff;
  border-radius:50%;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#6557de
}

.dashboard-body {
  padding:24px 24px 27px
}

.dashboard-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

.dash-overline {
  font-size:10px;
  font-weight:850;
  letter-spacing:.14em;
  color:#9fa6b9
}

.dashboard-heading h2 {
  font-size:24px;
  letter-spacing:-.035em;
  margin-top:4px
}

.dashboard-heading p {
  font-size:12px;
  margin:7px 0 0
}

.wave {
  font-size:21px;
  color:#f6b64a
}

.dashboard-pill {
  font-size:11px;
  font-weight:700;
  background:#f2f0ff;
  border:1px solid #e7e3ff;
  color:#7460dd;
  padding:5px 10px;
  border-radius:50px
}

.dashboard-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:25px
}

.stat {
  padding:15px 13px;
  background:#f8f9fd;
  border:1px solid #edf0f7;
  border-radius:12px;
  display:grid;
  gap:4px
}

.stat span {
  font-size:11px;
  color:#7d869b;
  font-weight:650
}

.stat strong {
  font-size:25px;
  line-height:1.2;
  letter-spacing:-.04em
}

.stat-detail {
  font-size:10px;
  color:#9aa4b5
}

.dash-section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:24px 0 10px
}

.dash-section-heading strong {
  font-size:13px
}

.dash-section-heading span {
  font-size:10px;
  color:#a6adc0
}

.draft-row {
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 0;
  border-bottom:1px solid #eef0f6
}

.draft-icon {
  width:36px;
  height:36px;
  border-radius:11px;
  display:grid;
  place-items:center
}

.draft-icon .icon {
  width:17px
}

.lavender {
  background:#f0ebff;
  color:#7157d9
}

.mint {
  background:#e7f8ef;
  color:#219a71
}

.draft-details {
  display:grid;
  gap:2px;
  min-width:0
}

.draft-details strong {
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.draft-details span {
  font-size:10px;
  color:#97a0b0
}

.draft-tag {
  margin-left:auto;
  background:#f4f5fa;
  color:#8b93a7;
  font-size:9px;
  font-weight:750;
  border-radius:20px;
  padding:3px 9px
}

.dash-compose {
  margin-top:18px;
  border:1px dashed #bab4f8;
  background:#faf9ff;
  color:#7162e3;
  border-radius:9px;
  padding:9px;
  text-align:center;
  font-size:11px;
  font-weight:700
}

.dash-compose .icon {
  width:14px;
  height:14px
}

.floating-chip {
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  color:#4b5073;
  box-shadow:0 15px 34px rgba(41,52,114,.16);
  border:1px solid #edf0f9;
  padding:10px 13px;
  border-radius:12px;
  font-size:11px;
  font-weight:750
}

.chip-top {
  top:8px;
  right:-21px
}

.chip-top .icon {
  width:16px;
  color:#8a62e7
}

.chip-bottom {
  bottom:0;
  left:-30px
}

.mini-check {
  background:#e9fbf3;
  color:#20a477;
  width:25px;
  height:25px;
  border-radius:8px;
  display:grid;
  place-items:center
}

.mini-check .icon {
  width:15px
}


.strip-section {
  border-top:1px solid #f2f3f7;
  border-bottom:1px solid #edf0f6;
  background:#fbfcff
}

.trust-strip {
  min-height:88px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}

.trust-strip span {
  font-weight:750;
  color:#9099ac;
  font-size:14px
}

.trust-strip .strip-label {
  font-size:10px;
  font-weight:820;
  letter-spacing:.13em;
  color:#b3bac7
}


.section-heading {
  max-width:740px;
  margin-bottom:45px
}

.section-heading.centered {
  margin:0 auto 47px;
  text-align:center
}

.section-heading h2 em,.workflow-intro h2 em,.faq-grid h2 em {
  font-style:normal;
  color:var(--primary)
}

.section-heading p {
  font-size:16px;
  margin-top:18px
}

.features-section {
  background:#fff
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}

.feature-card {
  padding:31px;
  border-radius:17px;
  border:1px solid var(--line);
  background:#fff;
  transition:box-shadow .2s,transform .2s,border-color .2s
}

.feature-card:hover {
  box-shadow:var(--shadow);
  transform:translateY(-4px);
  border-color:#d7d7ff
}

.feature-icon {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:14px;
  margin-bottom:23px
}

.feature-icon .icon {
  width:24px;
  height:24px
}

.icon-blue {
  background:#e9edff;
  color:#6456e9
}

.icon-purple {
  background:#f1eafe;
  color:#8756d8
}

.icon-teal {
  background:#e4f8f9;
  color:#16a6ac
}

.icon-orange {
  background:#fff1e5;
  color:#e28932
}

.icon-indigo {
  background:#e8efff;
  color:#5077d9
}

.icon-green {
  background:#e6f7ef;
  color:#299d6f
}

.feature-card h3 {
  font-size:19px
}

.feature-card p {
  font-size:14px;
  line-height:1.8;
  margin:13px 0 16px
}

.feature-status {
  color:#8b94a6;
  font-size:11px;
  font-weight:740;
  letter-spacing:.02em
}


.workflow-section {
  background:#f7f8fd
}

.workflow-grid {
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:100px;
  align-items:center
}

.workflow-intro h2 {
  max-width:445px
}

.workflow-intro p {
  margin:20px 0 25px;
  max-width:450px
}

.steps {
  display:grid;
  gap:13px
}

.step {
  display:flex;
  align-items:flex-start;
  gap:20px;
  background:#fff;
  border:1px solid #ecedf6;
  border-radius:14px;
  padding:23px;
  box-shadow:0 5px 16px rgba(30,40,70,.025)
}

.step-number {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:none;
  background:#efedff;
  border-radius:12px;
  color:var(--primary);
  font-weight:820;
  font-size:13px
}

.step h3 {
  font-size:17px
}

.step p {
  font-size:13px;
  line-height:1.7;
  margin:8px 0 0
}


.faq-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:95px
}

.faq-grid>div:first-child p {
  margin-top:20px
}

.faq-items {
  border-top:1px solid var(--line)
}

.faq-items details {
  border-bottom:1px solid var(--line);
  padding:19px 0
}

.faq-items summary {
  list-style:none;
  cursor:pointer;
  font-size:16px;
  font-weight:730;
  padding:5px 29px 5px 0;
  position:relative
}

.faq-items summary::-webkit-details-marker {
  display:none
}

.faq-items summary:after {
  content:"+";
  position:absolute;
  right:0;
  top:0;
  font-size:23px;
  font-weight:400;
  color:var(--primary)
}

.faq-items details[open] summary:after {
  content:"−"
}

.faq-items p {
  font-size:14px;
  line-height:1.8;
  padding-right:28px;
  margin:10px 0 3px
}


.cta-section {
  padding-top:0
}

.cta-panel {
  position:relative;
  overflow:hidden;
  border-radius:23px;
  background:linear-gradient(120deg,#3932a7,#6751e8 60%,#845eef);
  color:#fff;
  padding:64px 70px
}

.cta-glow {
  position:absolute;
  right:-5%;
  top:-60%;
  width:420px;
  height:420px;
  border-radius:50%;
  border:75px solid rgba(255,255,255,.08)
}

.cta-content {
  position:relative;
  max-width:660px
}

.cta-label {
  font-size:11px;
  letter-spacing:.17em;
  font-weight:780;
  color:#d3d1ff
}

.cta-panel h2 {
  font-size:clamp(2rem,3.8vw,3rem);
  margin:13px 0
}

.cta-panel p {
  color:#e0ddff;
  max-width:560px
}

.cta-panel .btn {
  margin-top:17px
}


.site-footer {
  background:#10172b;
  color:#d6dbea
}

.footer-top {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:54px;
  padding-top:67px;
  padding-bottom:65px
}

.brand-footer .brand-text {
  color:#fff
}

.footer-intro p {
  max-width:320px;
  color:#9da7bd;
  font-size:13px;
  line-height:1.8;
  margin:20px 0 13px
}

.footer-small {
  color:#858fa7;
  font-size:12px
}

.footer-column {
  display:grid;
  align-content:start;
  gap:13px
}

.footer-column h2 {
  font-size:13px;
  letter-spacing:.01em;
  margin-bottom:8px;
  color:#fff
}

.footer-column a {
  font-size:13px;
  color:#aab3c8
}

.footer-column a:hover {
  color:#fff
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  padding:20px 0;
  border-top:1px solid #293248;
  color:#8994ad;
  font-size:12px
}


.page-hero {
  padding:105px 0 90px;
  background:radial-gradient(ellipse 40% 75% at 83% 20%,rgba(138,117,242,.13),transparent 75%),#f9faff;
  border-bottom:1px solid #f0f2f9
}

.page-hero-inner {
  max-width:780px
}

.page-hero h1 {
  font-size:clamp(2.8rem,5vw,4.3rem)
}

.page-hero p {
  font-size:18px;
  line-height:1.8;
  max-width:690px;
  margin:22px 0 0
}

.two-column-content {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}

.rich-copy p {
  font-size:16px;
  line-height:1.9
}

.rich-copy strong {
  color:var(--ink)
}

.muted-section {
  background:#f8f9fd
}

.principles-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

.principle-card {
  padding:32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px
}

.principle-number {
  color:var(--primary);
  font-size:13px;
  font-weight:800
}

.principle-card h3 {
  margin-top:21px
}

.principle-card p {
  font-size:14px;
  margin:12px 0 0
}

.simple-banner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding:33px 40px;
  background:#f3f1ff;
  border-radius:18px
}

.simple-banner h2 {
  font-size:25px
}

.simple-banner p {
  margin:10px 0 0;
  font-size:14px
}


.pricing-hero {
  text-align:center;
  padding-bottom:77px
}

.pricing-hero .page-hero-inner {
  margin:auto
}

.pricing-hero p {
  margin-inline:auto
}

.notice-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid #e5e4f5;
  border-radius:40px;
  padding:8px 16px;
  margin-top:23px;
  color:#6f6e97;
  font-size:12px;
  font-weight:650
}

.notice-pill .icon {
  width:16px;
  color:var(--primary)
}

.pricing-section {
  padding-top:20px
}

.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:23px;
  align-items:stretch
}

.price-card {
  position:relative;
  padding:34px 29px;
  border:1px solid var(--line);
  border-radius:19px;
  background:#fff;
  min-width:0
}

.price-featured {
  border:2px solid #776bf0;
  box-shadow:0 19px 44px rgba(92,81,220,.1);
  padding:33px 28px
}

.popular-tag {
  position:absolute;
  top:-15px;
  left:50%;
  transform:translateX(-50%);
  padding:5px 16px;
  border-radius:20px;
  background:var(--primary);
  color:#fff;
  font-size:11px;
  font-weight:750;
  white-space:nowrap
}

.plan-label {
  font-size:12px;
  color:#796ee0;
  font-weight:740
}

.price-card h2 {
  font-size:28px;
  margin-top:7px
}

.plan-description {
  font-size:13px;
  min-height:53px;
  margin:12px 0 22px
}

.plan-price {
  font-size:28px;
  letter-spacing:-.035em;
  font-weight:800;
  min-height:43px
}

.plan-helper {
  font-size:11px;
  margin:6px 0 26px
}

.price-card .btn {
  font-size:13px
}

.price-card .btn .icon {
  width:15px
}

.plan-divider {
  height:1px;
  background:var(--line);
  margin:28px 0
}

.price-card h3 {
  font-size:13px;
  letter-spacing:0;
  margin-bottom:16px
}

.check-list {
  padding:0;
  margin:0;
  list-style:none;
  display:grid;
  gap:15px
}

.check-list li {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:#66738a
}

.check-list .icon {
  color:#25ac7f;
  width:16px;
  height:16px;
  margin-top:2px
}

.pricing-faq {
  padding-top:30px
}


.contact-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px;
  align-items:center
}

.contact-card {
  border-radius:18px;
  border:1px solid var(--line);
  padding:37px;
  box-shadow:var(--shadow)
}

.contact-card h2 {
  font-size:27px
}

.contact-card p {
  margin-top:14px;
  font-size:15px
}

.contact-email {
  display:inline-block;
  color:var(--primary);
  font-weight:760;
  font-size:19px;
  margin:7px 0
}

.contact-card .contact-note {
  font-size:12px;
  background:#f8f9fc;
  padding:12px;
  border-radius:10px
}

.contact-aside h2 {
  font-size:36px
}

.contact-aside p {
  margin:19px 0 24px
}

.contact-aside-note {
  display:flex;
  align-items:start;
  gap:13px;
  padding:17px;
  background:#f3f1ff;
  color:#6560a6;
  border-radius:12px;
  font-size:13px
}

.contact-aside-note .icon {
  width:20px
}


.auth-section {
  padding:90px 0 110px;
  background:radial-gradient(circle at 85% 10%,rgba(128,110,240,.13),transparent 38%),#fbfbff
}

.auth-grid {
  display:grid;
  grid-template-columns:1fr .86fr;
  gap:110px;
  align-items:center
}

.auth-intro h1 {
  font-size:clamp(2.8rem,4.5vw,4rem)
}

.auth-intro p {
  font-size:17px;
  max-width:520px;
  margin:24px 0 28px
}

.auth-feature {
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0;
  font-weight:650;
  color:#59667e;
  font-size:14px
}

.auth-feature span {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  color:#27a977;
  background:#e7f9f0;
  border-radius:50%
}

.auth-feature .icon {
  width:14px
}

.auth-card {
  background:#fff;
  border:1px solid #e8eaf3;
  box-shadow:0 20px 65px rgba(32,41,85,.095);
  padding:43px 43px 38px;
  border-radius:21px;
  text-align:center
}

.auth-card-logo {
  display:flex;
  justify-content:center
}

.auth-card-logo .brand-mark {
  width:54px;
  height:54px
}

.auth-card-logo .icon {
  width:28px;
  height:28px
}

.auth-card h2 {
  font-size:24px;
  margin:25px 0 8px
}

.auth-card>p {
  font-size:13px
}

.btn-google {
  border-color:#dce0ea;
  background:#fff;
  color:#344059;
  box-shadow:0 4px 12px rgba(20,29,61,.035);
  margin-top:24px
}

.btn-google:hover {
  border-color:#aaa5fa;
  color:#544bba
}

.google-g {
  font-size:21px;
  font-weight:800;
  font-family:Arial,sans-serif;
  color:#4285f4
}

.auth-card .auth-notice {
  display:flex;
  gap:8px;
  text-align:left;
  background:#f9f8ff;
  color:#777399;
  border-radius:9px;
  padding:12px;
  margin:16px 0 0;
  font-size:11px;
  line-height:1.6
}

.auth-notice .icon {
  width:16px;
  height:16px;
  flex:none;
  margin-top:1px
}

.auth-divider {
  position:relative;
  margin:25px 0;
  color:#a0a7b7;
  font-size:11px
}

.auth-divider:before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:var(--line)
}

.auth-divider span {
  position:relative;
  background:#fff;
  padding:0 14px
}

.auth-card .auth-legal {
  font-size:11px;
  line-height:1.7;
  margin:21px 0 0
}

.auth-legal a {
  color:var(--primary);
  text-decoration:underline
}


.status-section {
  padding:105px 0 140px;
  background:#fafbff
}

.status-card {
  max-width:570px;
  text-align:center;
  margin-inline:auto;
  padding:20px
}

.status-code {
  color:#d4d2ff;
  font-size:100px;
  line-height:1;
  letter-spacing:-.08em;
  font-weight:850;
  margin-bottom:12px
}

.status-icon {
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border-radius:22px;
  background:#efedff;
  color:var(--primary);
  margin:0 auto 22px
}

.status-icon .icon {
  width:38px;
  height:38px
}

.status-card h1 {
  font-size:clamp(2rem,4vw,3.2rem)
}

.status-card p {
  margin:20px 0 28px
}


.legal-hero {
  padding:78px 0 70px
}

.legal-hero h1 {
  font-size:clamp(2.6rem,4vw,3.8rem)
}

.legal-hero p {
  font-size:16px
}

.legal-date {
  display:inline-block;
  margin-top:20px;
  color:#929cb1;
  font-size:12px;
  font-weight:720
}

.legal-section {
  padding-top:62px
}

.legal-layout {
  display:grid;
  grid-template-columns:225px minmax(0,1fr);
  gap:78px;
  align-items:start
}

.legal-sidebar {
  position:sticky;
  top:113px;
  display:grid;
  align-content:start;
  gap:11px;
  border-left:2px solid #e5e4f5;
  padding-left:19px
}

.legal-sidebar strong {
  font-size:13px;
  margin-bottom:10px
}

.legal-sidebar a {
  color:#77829b;
  font-size:13px
}

.legal-sidebar a:hover {
  color:var(--primary)
}

.legal-content {
  max-width:770px;
  min-width:0
}

.legal-notice {
  padding:20px 23px;
  background:#f8f6ff;
  border:1px solid #e8e2ff;
  border-radius:12px;
  color:#635d84;
  font-size:13px;
  line-height:1.8;
  margin-bottom:33px
}

.legal-content section {
  scroll-margin-top:110px;
  margin-bottom:32px
}

.legal-content h2 {
  font-size:22px;
  margin-bottom:13px;
  letter-spacing:-.025em
}

.legal-content p {
  font-size:14px;
  line-height:1.9;
  margin-bottom:12px
}

.legal-content a {
  color:var(--primary);
  text-decoration:underline
}


@media(max-width:1100px) {
  .desktop-nav {
    gap:18px
  }

  .hero-grid {
    gap:26px
  }

  .hero h1 {
    font-size:3.5rem
  }

  .hero-benefits {
    gap:12px
  }

  .workflow-grid {
    gap:60px
  }

  .faq-grid {
    gap:50px
  }

  .footer-top {
    gap:30px
  }

  
}


@media(max-width:900px) {
  .desktop-nav {
    display:none
  }

  .menu-toggle {
    display:inline-flex
  }

  .hero-grid {
    grid-template-columns:1fr;
    gap:48px
  }

  .hero-copy {
    max-width:700px
  }

  .hero h1 {
    font-size:clamp(3rem,7.5vw,4.2rem)
  }

  .hero-visual {
    max-width:585px;
    width:100%;
    margin:0 auto
  }

  .chip-top {
    right:-2px
  }

  .chip-bottom {
    left:-10px
  }

  .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .workflow-grid,.faq-grid {
    grid-template-columns:1fr;
    gap:42px
  }

  .workflow-intro h2 {
    max-width:650px
  }

  .footer-top {
    grid-template-columns:1.4fr 1fr 1fr;
    gap:35px
  }

  .footer-intro {
    grid-column:1/-1
  }

  .pricing-grid {
    grid-template-columns:1fr 1fr
  }

  .price-card:last-child {
    grid-column:1/-1
  }

  .two-column-content,.contact-layout,.auth-grid {
    gap:38px
  }

  .auth-card {
    padding:30px
  }

  .legal-layout {
    gap:35px;
    grid-template-columns:185px 1fr
  }

  
}


@media(max-width:650px) {
  .container {
    width:min(100% - 36px,1180px)
  }

  .section {
    padding:68px 0
  }

  .header-inner {
    min-height:70px
  }

  .brand-mark {
    width:38px;
    height:38px
  }

  .brand-text {
    font-size:18px
  }

  .header-signin {
    padding:9px 15px
  }

  .hero {
    padding:62px 0 74px
  }

  .hero h1 {
    font-size:clamp(2.7rem,11vw,3.6rem)
  }

  .hero-lead {
    font-size:16px;
    line-height:1.75
  }

  .hero-actions {
    gap:8px
  }

  .hero-actions .btn {
    padding:12px 15px;
    font-size:13px
  }

  .hero-benefits {
    margin-top:27px;
    gap:10px 17px
  }

  .hero-visual {
    padding-right:4px
  }

  .dashboard-body {
    padding:18px
  }

  .dashboard-heading h2 {
    font-size:21px
  }

  .dashboard-topbar {
    padding-inline:17px
  }

  .stat {
    padding:12px 9px
  }

  .stat strong {
    font-size:22px
  }

  .floating-chip {
    font-size:10px
  }

  .trust-strip {
    justify-content:center;
    text-align:center;
    gap:15px 23px;
    padding:21px 0
  }

  .trust-strip .strip-label {
    flex-basis:100%
  }

  .trust-strip span {
    font-size:12px
  }

  .section-heading {
    margin-bottom:30px
  }

  .section-heading.centered {
    margin-bottom:32px
  }

  .feature-grid,.pricing-grid,.principles-grid,.two-column-content,.contact-layout,.auth-grid {
    grid-template-columns:1fr
  }

  .feature-card {
    padding:25px
  }

  .workflow-grid {
    gap:28px
  }

  .step {
    padding:18px;
    gap:13px
  }

  .faq-grid {
    gap:20px
  }

  .cta-panel {
    padding:45px 26px
  }

  .footer-top {
    grid-template-columns:repeat(2,1fr);
    gap:32px;
    padding-top:46px;
    padding-bottom:45px
  }

  .footer-intro {
    grid-column:1/-1
  }

  .footer-bottom {
    flex-direction:column;
    align-items:flex-start
  }

  .page-hero {
    padding:75px 0 65px
  }

  .page-hero p {
    font-size:16px
  }

  .simple-banner {
    padding:25px;
    align-items:flex-start;
    flex-direction:column
  }

  .simple-banner h2 {
    font-size:23px
  }

  .price-card:last-child {
    grid-column:auto
  }

  .price-card,.price-featured {
    padding:28px 24px
  }

  .pricing-section {
    padding-top:35px
  }

  .contact-card {
    padding:27px
  }

  .contact-aside h2 {
    font-size:30px
  }

  .auth-section {
    padding:70px 0 80px
  }

  .auth-card {
    padding:32px 24px
  }

  .auth-intro h1 {
    font-size:2.8rem
  }

  .legal-layout {
    display:block
  }

  .legal-sidebar {
    display:none
  }

  .legal-content {
    max-width:100%
  }

  .legal-hero {
    padding:68px 0 56px
  }

  
}


@media(max-width:390px) {
  .header-signin {
    display:none
  }

  .dashboard-heading h2 {
    font-size:19px
  }

  .dashboard-body {
    padding:13px
  }

  .stat {
    padding:10px 7px
  }

  .stat span {
    font-size:10px
  }

  .stat strong {
    font-size:20px
  }

  .draft-details strong {
    font-size:11px
  }

  .floating-chip {
    display:none
  }

  
}


@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }

  
}
/* ================= Advanced app ================= */
.em-workspace{padding:48px 0 84px;background:#f7faff;min-height:70vh}
.em-dashboard-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.em-dashboard-heading h1{font-size:clamp(2rem,4vw,2.8rem);margin:8px 0 5px;color:#0f172a}.em-dashboard-heading p{color:#64748b;margin:0}
.em-dashboard-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.em-user{color:#334155;font-size:14px;overflow-wrap:anywhere}
.em-warning{border:1px solid #f5cd89;border-left:5px solid #f59e0b;background:#fffdf5;padding:16px 20px;border-radius:12px;line-height:1.7;color:#92400e;margin-bottom:18px}
.em-warning a{color:#92400e;font-weight:700}.em-status{margin:12px 0;color:#075985;font-size:14px;min-height:22px;white-space:pre-wrap}
.em-muted{font-size:13px;line-height:1.65;color:#64748b}.em-muted code{font-size:12px;background:#f1f5f9;color:#075985;padding:2px 4px;border-radius:4px}
.em-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0 28px}.em-stat,.em-panel,.em-settings-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 6px 22px rgba(15,23,42,.035)}
.em-stat{padding:23px}.em-stat span{display:block;font-size:13px;color:#64748b;margin-bottom:10px}.em-stat strong{font-size:19px;color:#0f172a;overflow-wrap:anywhere}
.em-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 0}.em-tab{background:transparent;border:0;border-bottom:3px solid transparent;color:#64748b;padding:14px 18px;cursor:pointer;font:600 14px inherit}.em-tab.active{color:#2563eb;border-bottom-color:#2563eb;background:#eff6ff;border-radius:8px 8px 0 0}
.em-panel{padding:28px;display:none;border-radius:0 14px 14px 14px}.em-panel.active{display:block}.em-panel h2{font-size:22px;margin:0 0 7px}.em-panel h3{font-size:17px;margin:0 0 10px;color:#0f172a}.em-panel-head{display:flex;gap:15px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:22px}.em-panel-head p{color:#64748b;margin:0}
.em-input{display:block;border:1px solid #cbd5e1;border-radius:10px;width:100%;padding:12px 13px;font:inherit;color:#0f172a;background:#fff;margin-bottom:16px}.em-input:focus{outline:2px solid #93c5fd;outline-offset:1px}.em-textarea{min-height:230px;resize:vertical}.em-label{display:block;font-size:14px;font-weight:650;color:#334155;margin:12px 0 7px}
.em-import-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}.em-info{padding:20px;background:#eff6ff;border:1px solid #dbeafe;border-radius:12px}.em-info p{font-size:14px;color:#475569;line-height:1.7;margin:0}.em-actionbar{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin:18px 0}.em-table-wrap{max-height:520px;overflow:auto;border:1px solid #e2e8f0;border-radius:12px}.em-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}.em-table th{position:sticky;top:0;background:#f8fafc;color:#334155;padding:14px 12px;font-weight:750;white-space:nowrap}.em-table td{border-top:1px solid #f1f5f9;padding:12px;vertical-align:middle;word-break:break-word}.em-table tr:nth-child(even){background:#fcfdff}
.em-link-btn{color:#2563eb;border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;padding:8px;cursor:pointer}.em-link-btn:hover{text-decoration:underline}.em-link-btn:disabled{color:#94a3b8;cursor:not-allowed}
.em-compose-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:32px}.em-preview{padding:22px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;align-self:start}.em-preview small{display:block;color:#64748b;margin-top:14px}.em-preview strong{display:block;overflow-wrap:anywhere;margin:4px 0 12px}.em-preview pre{font:14px/1.6 system-ui;white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:14px;min-height:200px}.em-detail{overflow:auto;margin:20px 0}.em-detail h3{font-size:20px}.em-consent-confirm{display:flex;gap:12px;padding:14px;background:#fffbeb;border-radius:10px;border:1px solid #fde68a;font-weight:600;color:#854d0e;line-height:1.6}.em-consent-confirm input{min-width:18px;align-self:flex-start;margin-top:5px}.em-settings-card{padding:24px;margin:18px 0}.em-settings-card p{color:#475569;line-height:1.6}.em-auth-actions{display:flex;justify-content:space-between;gap:12px;margin:12px 0 16px}
@media(max-width:850px){.em-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.em-compose-grid,.em-import-grid{grid-template-columns:1fr}.em-panel{padding:18px}}
@media(max-width:450px){.em-stats{grid-template-columns:1fr 1fr;gap:8px}.em-stat{padding:14px}.em-stat strong{font-size:15px}.em-tabs{gap:0}.em-tab{padding:12px 10px;font-size:12px}.em-workspace{padding-top:24px}}