:root {
      --asken-blue: var(--brand-mint, #00C9A7);
      --asken-blue-soft: var(--brand-mint-tint, #D6FBF3);
      --asken-ink: var(--brand-midnight, #0B1628);
      --asken-muted: var(--brand-slate-teal, #5C7A72);
      --asken-line: var(--brand-border, #E2EBE9);
      --asken-card: #ffffff;
      --asken-bg: #ffffff;
      --asken-bg-soft: var(--brand-surface, #F4F7F6);
      --asken-shadow: 0 24px 70px color-mix(in srgb, var(--brand-midnight, #0B1628) 8%, transparent);
      --asken-radius-xl: 32px;
      --asken-radius-lg: 24px;
      --asken-radius-md: 18px;
      --max: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--asken-ink);
      background:
        radial-gradient(circle at 76% 4%, color-mix(in srgb, var(--brand-mint) 10%, transparent), transparent 28rem),
        radial-gradient(circle at 4% 18%, color-mix(in srgb, var(--brand-mint) 10%, transparent), transparent 24rem),
        linear-gradient(180deg, #ffffff 0%, var(--brand-surface) 58%, #ffffff 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

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

    .page {
      overflow: hidden;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(18px);
      background: rgba(255, 255, 255, 0.78);
      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    .nav-inner {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0;
      gap: 22px;
    }

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

    .nav-login{
      font-size: 13px;
      font-weight: 600;
      color: var(--brand-slate-teal);
    }

    .nav-login:hover{
      color: var(--asken-ink);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 760;
      letter-spacing: -0.03em;
      font-size: 18px;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #fff;
      background:
        linear-gradient(135deg, var(--brand-midnight) 0%, var(--brand-teal-deep) 50%, var(--asken-blue) 100%);
      box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-mint) 18%, transparent);
      font-size: 14px;
      font-weight: 800;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
      color: var(--brand-slate-teal);
      font-size: 14px;
      font-weight: 560;
    }

    .nav-links a:hover {
      color: var(--asken-ink);
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 17px;
      border: 1px solid color-mix(in srgb, var(--brand-mint) 18%, transparent);
      border-radius: 999px;
      color: var(--brand-teal-deep);
      background: rgba(239, 246, 255, 0.70);
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-mint) 8%, transparent);
    }

    .section {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    .hero {
      padding: 96px 0 66px;
      position: relative;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.8fr);
      gap: 58px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid color-mix(in srgb, var(--brand-mint) 13%, transparent);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.72);
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
      color: var(--brand-teal-deep);
      font-size: 13px;
      font-weight: 760;
      letter-spacing: 0.01em;
    }

    .eyebrow-dot {
      width: 8px;
      height: 8px;
      border-radius: 99px;
      background: var(--asken-blue);
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-mint) 10%, transparent);
    }

    h1 {
      margin: 24px 0 0;
      max-width: 780px;
      font-size: clamp(48px, 7vw, 88px);
      line-height: 0.93;
      letter-spacing: -0.075em;
      font-weight: 810;
    }

    .hero-copy {
      margin: 26px 0 0;
      max-width: 660px;
      color: var(--brand-slate-teal);
      font-size: clamp(18px, 2vw, 21px);
      line-height: 1.62;
      letter-spacing: -0.015em;
    }

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

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 780;
      font-family: inherit;
      cursor: pointer;
      border: none;
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .button:hover {
      transform: translateY(-1px);
    }

    .button-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--brand-midnight) 0%, var(--brand-teal-deep) 58%, var(--asken-blue) 100%);
      box-shadow: 0 18px 44px color-mix(in srgb, var(--brand-mint) 21%, transparent);
    }

    .button-secondary {
      color: var(--brand-midnight);
      background: #fff;
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
      border: 1px solid var(--asken-line);
    }

    .hero-note {
      margin-top: 18px;
      color: var(--brand-slate-teal);
      font-size: 14px;
    }

    .hero-panel {
      position: relative;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-mint) 13%, transparent), transparent 18rem);
      border-radius: 38px;
      box-shadow: var(--asken-shadow);
      padding: 22px;
    }

    .panel-top {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: center;
      padding: 6px 6px 20px;
    }

    .panel-title {
      font-weight: 800;
      letter-spacing: -0.03em;
      font-size: 16px;
    }

    .panel-pill {
      padding: 7px 10px;
      border-radius: 999px;
      background: #ecfdf3;
      color: #027a48;
      font-size: 12px;
      font-weight: 800;
    }

    .moat-card {
      border-radius: 28px;
      background: #fff;
      border: 1px solid rgba(15, 23, 42, 0.08);
      padding: 22px;
      box-shadow: 0 16px 44px rgba(15, 23, 42, 0.05);
    }

    .moat-row {
      display: grid;
      grid-template-columns: 42px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    }

    .moat-row:last-child {
      border-bottom: 0;
    }

    .moat-icon {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: var(--asken-bg-soft);
      color: var(--asken-blue);
      font-weight: 900;
    }

    .moat-label {
      font-size: 14px;
      color: var(--brand-slate-teal);
      margin: 0;
    }

    .moat-strong {
      font-size: 15px;
      font-weight: 800;
      margin: 1px 0 0;
      letter-spacing: -0.02em;
    }

    .moat-score {
      font-size: 13px;
      color: var(--brand-teal-deep);
      font-weight: 850;
    }

    .mini-chart {
      margin-top: 18px;
      height: 138px;
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(239, 246, 255, 0.8), rgba(255, 255, 255, 0.95)),
        repeating-linear-gradient(90deg, transparent 0 48px, color-mix(in srgb, var(--brand-mint) 5%, transparent) 48px 49px);
      border: 1px solid color-mix(in srgb, var(--brand-mint) 9%, transparent);
      position: relative;
      overflow: hidden;
    }

    .mini-chart svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

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

    .metric {
      border-radius: 20px;
      border: 1px solid rgba(15, 23, 42, 0.07);
      background: rgba(255, 255, 255, 0.74);
      padding: 14px;
    }

    .metric b {
      display: block;
      font-size: 22px;
      letter-spacing: -0.05em;
    }

    .metric span {
      display: block;
      margin-top: 3px;
      color: var(--brand-slate-teal);
      font-size: 12px;
      line-height: 1.35;
    }

    .logos {
      padding: 20px 0 72px;
    }

    .logos-inner {
      border: 1px solid rgba(15, 23, 42, 0.07);
      border-radius: var(--asken-radius-xl);
      background: rgba(255, 255, 255, 0.72);
      padding: 22px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      color: var(--brand-slate-teal);
      box-shadow: 0 18px 54px rgba(15, 23, 42, 0.04);
    }

    .logos-title {
      font-size: 13px;
      font-weight: 760;
      color: var(--brand-slate-teal);
      white-space: nowrap;
    }

    .logo-list {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: flex-end;
    }

    .logo-chip {
      padding: 8px 12px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(15, 23, 42, 0.07);
      font-size: 13px;
      font-weight: 700;
      color: var(--brand-slate-teal);
    }

    .section-head {
      max-width: 760px;
      margin: 0 auto 36px;
      text-align: center;
    }

    .kicker {
      color: var(--brand-teal-deep);
      font-size: 13px;
      font-weight: 850;
      letter-spacing: 0.10em;
      text-transform: uppercase;
    }

    h2 {
      margin: 12px 0 0;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.02;
      letter-spacing: -0.06em;
      font-weight: 810;
    }

    .section-copy {
      margin: 18px auto 0;
      max-width: 680px;
      color: var(--brand-slate-teal);
      font-size: 18px;
      line-height: 1.7;
      letter-spacing: -0.01em;
    }

    .promise {
      padding: 76px 0;
    }

    .promise-card {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 44px;
      align-items: center;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 42px;
      background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-mint) 8%, transparent), transparent 26rem),
        #fff;
      box-shadow: var(--asken-shadow);
      padding: clamp(28px, 5vw, 56px);
    }

    .promise h2 {
      margin-top: 0;
    }

    .check-list {
      display: grid;
      gap: 14px;
    }

    .check-item {
      display: flex;
      gap: 13px;
      padding: 18px;
      border: 1px solid rgba(15, 23, 42, 0.07);
      border-radius: 22px;
      background: rgba(248, 250, 252, 0.70);
    }

    .check {
      flex: 0 0 auto;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--brand-mint-tint);
      color: var(--brand-teal-deep);
      font-weight: 900;
      font-size: 13px;
      margin-top: 2px;
    }

    .check-item b {
      display: block;
      font-size: 16px;
      letter-spacing: -0.025em;
    }

    .check-item > div span {
      display: block;
      margin-top: 4px;
      color: var(--brand-slate-teal);
      font-size: 14px;
    }

    .pains {
      padding: 74px 0;
      background: linear-gradient(180deg, rgba(247, 251, 255, 0.48), rgba(255, 255, 255, 0));
    }

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

    .pain-card {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 28px;
      background: #fff;
      padding: 26px;
      box-shadow: 0 16px 46px rgba(15, 23, 42, 0.045);
    }

    .pain-label {
      color: var(--brand-slate-teal);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.10em;
      text-transform: uppercase;
    }

    .pain-card h3 {
      margin: 14px 0 10px;
      font-size: 22px;
      line-height: 1.16;
      letter-spacing: -0.045em;
    }

    .pain-card p {
      margin: 0;
      color: var(--brand-slate-teal);
      font-size: 15px;
    }

    .outcome {
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid rgba(15, 23, 42, 0.07);
      color: var(--brand-teal-deep);
      font-weight: 780;
      font-size: 14px;
    }

    .features {
      padding: 78px 0;
    }

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

    .feature-card {
      min-height: 260px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86)),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-mint) 8%, transparent), transparent 16rem);
      padding: 28px;
      box-shadow: 0 18px 52px rgba(15, 23, 42, 0.045);
    }

    .feature-number {
      width: 42px;
      height: 42px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: var(--brand-mint-tint);
      color: var(--brand-teal-deep);
      font-weight: 900;
    }

    .feature-card h3 {
      margin: 24px 0 10px;
      font-size: 23px;
      line-height: 1.12;
      letter-spacing: -0.05em;
    }

    .feature-card p {
      margin: 0;
      color: var(--brand-slate-teal);
      font-size: 15px;
    }

    .workflow {
      padding: 76px 0;
    }

    .workflow-strip {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 36px;
      background: #fff;
      box-shadow: var(--asken-shadow);
      padding: 24px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .step {
      position: relative;
      padding: 28px;
      border-radius: 28px;
      background: linear-gradient(180deg, var(--brand-surface), #ffffff);
      border: 1px solid rgba(15, 23, 42, 0.06);
    }

    .step small {
      color: var(--brand-teal-deep);
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .step h3 {
      margin: 16px 0 10px;
      font-size: 24px;
      letter-spacing: -0.05em;
    }

    .step p {
      margin: 0;
      color: var(--brand-slate-teal);
      font-size: 15px;
    }

    .trust {
      padding: 72px 0;
    }

    .trust-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 18px;
      align-items: stretch;
    }

    .quote-card,
    .trust-signals {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 34px;
      background: #fff;
      box-shadow: 0 18px 52px rgba(15, 23, 42, 0.045);
      padding: clamp(26px, 4vw, 40px);
    }

    .quote {
      font-size: clamp(24px, 3vw, 36px);
      line-height: 1.12;
      letter-spacing: -0.055em;
      font-weight: 760;
      margin: 0;
    }

    .quote-author {
      margin-top: 24px;
      color: var(--brand-slate-teal);
      font-size: 15px;
    }

    .signal-list {
      display: grid;
      gap: 14px;
    }

    .signal {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    }

    .signal:last-child {
      border-bottom: 0;
    }

    .signal b {
      letter-spacing: -0.02em;
    }

    .signal span {
      color: var(--brand-teal-deep);
      font-weight: 850;
      white-space: nowrap;
    }

    .plan {
      padding: 78px 0;
    }

    .plan-card {
      display: grid;
      grid-template-columns: 1fr 0.86fr;
      gap: 24px;
      border-radius: 42px;
      background:
        linear-gradient(135deg, var(--brand-midnight) 0%, var(--brand-midnight) 52%, var(--brand-midnight) 100%);
      color: #fff;
      padding: clamp(28px, 5vw, 54px);
      box-shadow: 0 28px 80px rgba(15, 23, 42, 0.20);
      overflow: hidden;
      position: relative;
    }

    .plan-card:after {
      content: "";
      position: absolute;
      right: -120px;
      top: -160px;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--brand-mint) 28%, transparent);
      filter: blur(4px);
    }

    .plan-card>* {
      position: relative;
      z-index: 1;
    }

    .plan h2 {
      margin-top: 0;
      color: #fff;
    }

    .plan p {
      color: rgba(255, 255, 255, 0.72);
    }

    .plan-list {
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .plan-item {
      padding: 16px 18px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .plan-item b {
      display: block;
      font-size: 15px;
      letter-spacing: -0.02em;
    }

    .plan-item span {
      display: block;
      margin-top: 4px;
      color: rgba(255, 255, 255, 0.66);
      font-size: 13px;
    }

    .faq {
      padding: 76px 0;
    }

    .faq-grid {
      max-width: 900px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
    }

    details {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 22px;
      background: #fff;
      padding: 20px 22px;
      box-shadow: 0 12px 34px rgba(15, 23, 42, 0.035);
    }

    summary {
      cursor: pointer;
      font-weight: 800;
      letter-spacing: -0.025em;
      list-style: none;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    details p {
      margin: 12px 0 0;
      color: var(--brand-slate-teal);
      font-size: 15px;
    }

    .final-cta {
      padding: 72px 0 100px;
    }

    .cta-card {
      text-align: center;
      border: 1px solid color-mix(in srgb, var(--brand-mint) 12%, transparent);
      border-radius: 42px;
      background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-mint) 13%, transparent), transparent 27rem),
        #fff;
      box-shadow: var(--asken-shadow);
      padding: clamp(36px, 7vw, 72px);
    }

    .cta-card h2 {
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-card p {
      margin-left: auto;
      margin-right: auto;
    }

    .contact {
      padding: 96px 0;
      text-align: center;
    }

    .contact h2 {
      text-align: center;
      font-size: clamp(28px, 4vw, 40px);
      letter-spacing: -0.03em;
      color: var(--brand-midnight);
    }

    #contact-form {
      max-width: 560px;
      margin: 36px auto 0;
      background: var(--asken-card);
      border: 1px solid var(--brand-border);
      border-radius: var(--asken-radius-xl);
      box-shadow: var(--asken-shadow);
      padding: clamp(24px, 4vw, 40px);
    }

    .form-row {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 18px;
    }

    .form-row label {
      text-align: left;
      font-size: 14px;
      font-weight: 600;
      color: var(--brand-slate-teal);
    }

    #contact-form input,
    #contact-form textarea {
      width: 100%;
      padding: 12px 14px;
      font-size: 16px;
      font-family: inherit;
      color: var(--brand-midnight);
      background: #fff;
      border: 1px solid var(--brand-border);
      border-radius: var(--asken-radius-md);
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    #contact-form textarea {
      min-height: 130px;
      resize: vertical;
    }

    #contact-form input::placeholder,
    #contact-form textarea::placeholder {
      color: color-mix(in srgb, var(--brand-slate-teal) 60%, transparent);
    }

    #contact-form input:focus,
    #contact-form textarea:focus {
      outline: none;
      border-color: var(--brand-mint);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-mint) 16%, transparent);
    }

    #contact-form button {
      width: 100%;
      margin-top: 6px;
    }

    .contact-success {
      margin-top: 12px;
      color: var(--brand-mint);
      font-size: 15px;
      display: none;
    }

    .danger-zone {
      margin-top: 42px;
      padding: 24px;
      text-align: left;
      border: 1px solid #dc2626;
      border-radius: var(--asken-radius-md);
      background: #fff7f7;
    }

    .danger-zone h3 {
      margin-top: 0;
      color: #991b1b;
    }

    .danger-zone input {
      width: 100%;
      padding: 12px 14px;
      font: inherit;
      border: 1px solid #f0b4b4;
      border-radius: 12px;
      background: #fff;
    }

    .button-danger {
      color: #fff;
      background: #b91c1c;
      box-shadow: 0 14px 32px rgba(185, 28, 28, 0.18);
    }

    .button-danger:disabled {
      cursor: wait;
      opacity: 0.7;
    }

    .deletion-result {
      min-height: 65vh;
      display: grid;
      place-items: center;
    }

    footer {
      border-top: 1px solid rgba(15, 23, 42, 0.07);
      padding: 28px 0;
      color: var(--brand-slate-teal);
      font-size: 14px;
    }

    .footer-inner {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }

    @media (max-width: 920px) {
      .nav-links {
        display: none;
      }

      .hero-grid,
      .promise-card,
      .trust-grid,
      .plan-card {
        grid-template-columns: 1fr;
      }

      .hero {
        padding-top: 70px;
      }

      .pain-grid,
      .feature-grid,
      .workflow-strip {
        grid-template-columns: 1fr;
      }

      .logos-inner {
        align-items: flex-start;
        flex-direction: column;
      }

      .logo-list {
        justify-content: flex-start;
      }
    }

    @media (max-width: 560px) {

      .section,
      .nav-inner,
      .footer-inner {
        width: min(100% - 28px, var(--max));
      }

      .hero {
        padding-top: 54px;
      }

      h1 {
        font-size: 47px;
      }

      .hero-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .button {
        width: 100%;
      }

      .metric-strip {
        grid-template-columns: 1fr;
      }

      .hero-panel,
      .promise-card,
      .cta-card,
      .plan-card {
        border-radius: 28px;
      }
    }

    .auth-flow {
      min-height: calc(100vh - 190px);
      display: grid;
      place-items: center;
      padding: 64px 0;
    }

    .auth-flow-card {
      width: min(100%, 520px);
      padding: clamp(26px, 5vw, 44px);
      border: 1px solid var(--brand-border);
      border-radius: var(--asken-radius-xl);
      background: #fff;
      box-shadow: var(--asken-shadow);
      text-align: center;
    }

    .auth-flow-card h1 {
      margin: 0 0 14px;
      font-size: clamp(28px, 5vw, 40px);
      letter-spacing: -0.03em;
    }

    .auth-flow-card > p {
      margin: 0 0 24px;
      color: var(--brand-slate-teal);
    }

    .auth-flow-card .form-errors {
      text-align: left;
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin: 20px 0;
      text-align: left;
    }

    .auth-field label {
      font-size: 14px;
      font-weight: 650;
      color: var(--brand-slate-teal);
    }

    .auth-field input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--brand-border);
      border-radius: var(--asken-radius-md);
      font: inherit;
    }

    .auth-field input:focus {
      outline: none;
      border-color: var(--brand-mint);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-mint) 16%, transparent);
    }

    .auth-field small {
      color: var(--brand-slate-teal);
    }