/* Base styles from the design's helmet block. Component styles are inline in index.html. */
body { margin: 0; background: #101A22; -webkit-font-smoothing: antialiased; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #23282D; }
a { color: #0E7D72; text-decoration: none; }
a:hover { color: #0A5F57; text-decoration: underline; }
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* The design sizes everything in cqi units against this frame. */
.frame { container-type: inline-size; width: 100%; background: #fff; overflow-x: clip; }

.mobile-menu[hidden] { display: none; }

/* Primary nav collapses to the burger below 900px, as in the design. */
.nav-desktop { display: flex; }
.nav-burger { display: none; }
@media (max-width: 899px) {
  .nav-desktop { display: none; }
  .nav-burger { display: flex; }
}
@media (min-width: 900px) {
  .mobile-menu { display: none; }
}

[data-hover-card]:hover .card-arrow { transform: translateX(4px); }

button[type="submit"]:disabled { opacity: .7; cursor: progress; }

/* ---------------------------------------------------------------------------
   Bullet lists (diamond markers)
   ------------------------------------------------------------------------- */
.bullets > li {
    display:flex;
    gap:12px;
}

.bullets > li::before {
    content:"";
    flex:none;
    width:6px;
    height:6px;
    margin-top:9px;
    background:#0E7D72;
    transform:rotate(45deg);
}

/* ---------------------------------------------------------------------------
   Components (from the design)
   ------------------------------------------------------------------------- */
.diamond {
    flex:none;
    width:6px;
    height:6px;
    margin-top:9px;
    background:#0E7D72;
    transform:rotate(45deg);
}

.bullet-row {
    display:flex;
    gap:12px;
}

.accent-bar {
    width:32px;
    height:3px;
    border-radius:2px;
    background:#0E7D72;
    margin:0 0 16px;
}

.bullets {
    list-style:none;
    margin:0;
    padding:0;
    font-size:15px;
    line-height:1.6;
    color:#3D464D;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.card-title {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(21px,2.2cqi,28px);
    line-height:1.2;
    letter-spacing:-.02em;
    margin:0;
    color:#23282D;
    text-wrap:balance;
}

.card {
    background:#fff;
    border:1px solid #E6E3DE;
    border-radius:16px;
    padding:clamp(22px,3cqi,40px);
    scroll-margin-top:72px;
}

.split {
    display:flex;
    flex-wrap:wrap;
    gap:clamp(18px,3cqi,48px);
}

.split-aside {
    flex:1 1 240px;
    min-width:0;
}

.split-main {
    flex:2 1 420px;
    min-width:0;
}

.window-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3A4B59;
}

.mono-note {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    line-height:1.7;
    margin:8px 0 0;
    color:#4A545B;
}

.crumb-sep {
    padding:0 9px;
    color:#4A5B68;
}

.link-more {
    font-size:14px;
    font-weight:600;
    color:#0E7D72;
}

.crumb-link {
    color:#A9B6C0;
    text-decoration:none;
}

.crumb-link:hover {
    color:#fff;
    text-decoration:none;
}

.tile-link {
    background-color:#fff;
    background-image:linear-gradient(90deg,#0E7D72,#30D5C8);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:0% 3px;
    border:1px solid #E6E3DE;
    border-radius:14px;
    transition:transform .25s ease,box-shadow .25s ease,background-size .35s ease;
    padding:clamp(22px,2.4cqi,30px);
    display:flex;
    flex-direction:column;
    gap:12px;
    text-decoration:none;
    color:#23282D;
}

.tile-link:hover {
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(16,26,34,.10);
    background-size:100% 3px;
    text-decoration:none;
    color:#23282D;
}

.tile-num {
    display:inline-grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:11px;
    background:rgba(14,125,114,.10);
    color:#0E7D72;
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    font-weight:500;
}

.tile-title {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(17px,1.6cqi,20px);
    letter-spacing:-.01em;
    margin:0;
}

.tile-text {
    font-size:14px;
    line-height:1.6;
    color:#5F6A72;
    margin:0;
    flex:1;
}

.footer-link {
    color:#C7D1D8;
    text-decoration:none;
}

.footer-link:hover {
    color:#fff;
    text-decoration:none;
}

.page {
    background:#F7F6F4;
}

.container {
    max-width:1180px;
    margin:0 auto;
}

.crumb-current {
    color:#fff;
    font-weight:500;
}

.crumbs {
    background:#101A22;
    border-bottom:1px solid #1E2C37;
    padding:13px clamp(20px,3.4cqi,44px);
}

.crumbs-nav {
    max-width:1180px;
    margin:0 auto;
    font-size:13px;
    color:#A9B6C0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    row-gap:4px;
}

.page-hero {
    background-color:#14202A;
    background-image:radial-gradient(ellipse 55% 75% at 95% 0%,rgba(48,213,200,.18),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:100% 100%,44px 44px,44px 44px;
    color:#fff;
    padding:clamp(36px,5cqi,80px) clamp(20px,3.4cqi,44px);
}

.eyebrow {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#30D5C8;
    margin:0 0 18px;
}

.page-body {
    padding:clamp(28px,4cqi,64px) clamp(20px,3.4cqi,44px) clamp(40px,5cqi,88px);
}

.page-title {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(30px,4cqi,50px);
    line-height:1.07;
    letter-spacing:-.025em;
    margin:0 0 18px;
    color:#fff;
    text-wrap:balance;
    max-width:24ch;
}

.page-lead {
    font-size:clamp(15px,1.35cqi,18px);
    line-height:1.6;
    color:#B8C4CC;
    margin:0;
    max-width:66ch;
}

.tile-item {
    background-color:#fff;
    background-image:linear-gradient(90deg,#0E7D72,#30D5C8);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:0% 3px;
    border:1px solid #E6E3DE;
    border-radius:14px;
    transition:transform .25s ease,box-shadow .25s ease,background-size .35s ease;
    padding:22px 24px;
    font-size:16px;
    font-weight:500;
    color:#23282D;
    display:flex;
    align-items:center;
    gap:14px;
}

.tile-item:hover {
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(16,26,34,.10);
    background-size:100% 3px;
    text-decoration:none;
}

.nav-link {
    font-size:14px;
    font-weight:500;
    color:#C7D1D8;
    text-decoration:none;
    white-space:nowrap;
}

.nav-link:hover {
    color:#fff;
    text-decoration:none;
}

.mobile-nav-link {
    padding:14px 0;
    border-bottom:1px solid #22323E;
    color:#C7D1D8;
    font-weight:500;
    text-decoration:none;
}

.stack {
    max-width:1180px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:clamp(18px,2.4cqi,28px);
}

.cycle-label {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(11px,2.6cqi,17px);
    line-height:1.2;
    color:#fff;
    text-wrap:balance;
}

.btn-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:600;
    font-size:15px;
    padding:14px 24px;
    border-radius:10px;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease;
    background-color:#0E7D72;
    color:#fff;
    box-shadow:0 6px 16px rgba(14,125,114,.24);
}

.btn-primary:hover {
    background-color:#0A5F57;
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(14,125,114,.32);
    text-decoration:none;
}

.subnav-link {
    flex:none;
    padding:15px 0;
    font-size:13px;
    font-weight:500;
    color:#4A545B;
    white-space:nowrap;
    text-decoration:none;
}

.subnav-link:hover {
    color:#0E7D72;
    text-decoration:none;
}

.note-card {
    break-inside:avoid;
    margin:0 0 16px;
    background:#FAF8F5;
    border:1px solid #E6E3DE;
    border-radius:12px;
    padding:clamp(18px,2cqi,24px);
}

.note-title {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:17px;
    letter-spacing:-.01em;
    margin:0 0 14px;
    color:#23282D;
}

.meta-term {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#6B7F8C;
    min-width:84px;
    padding-top:3px;
}

.meta-value {
    margin:0;
    font-size:15px;
    color:#23282D;
}

.field {
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:13px;
    font-weight:500;
    color:#4A545B;
}

.mono-small {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:#6B7F8C;
}

.spec-grid {
    background:#fff;
    padding:18px 20px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
    gap:8px 24px;
}

.mono-accent {
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:#0E7D72;
}

.strong-sm {
    font-weight:600;
    font-size:14px;
}

.muted-sm {
    font-size:13px;
    color:#5F6A72;
    line-height:1.55;
}

.stat {
    background:#14202A;
    padding:22px 24px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.stat-label {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#8FA3B2;
}

.tile-link-lg {
    background-color:#fff;
    background-image:linear-gradient(90deg,#0E7D72,#30D5C8);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:0% 3px;
    border:1px solid #E6E3DE;
    border-radius:14px;
    transition:transform .25s ease,box-shadow .25s ease,background-size .35s ease;
    padding:clamp(22px,2.4cqi,30px);
    display:flex;
    flex-direction:column;
    gap:14px;
    color:#23282D;
    text-decoration:none;
}

.tile-link-lg:hover {
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(16,26,34,.10);
    background-size:100% 3px;
    text-decoration:none;
    color:#23282D;
}

.icon-badge {
    width:46px;
    height:46px;
    border-radius:12px;
    background:rgba(14,125,114,.10);
    color:#0E7D72;
    display:grid;
    place-items:center;
}

.tile-heading {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(19px,1.7cqi,22px);
    letter-spacing:-.01em;
    margin:0;
}

.tile-body {
    font-size:15px;
    line-height:1.6;
    color:#4A545B;
    margin:0;
    flex:1;
}

.link-more-arrow {
    font-weight:600;
    font-size:14px;
    color:#0E7D72;
    display:inline-flex;
    gap:6px;
}

.arrow {
    display:inline-block;
    transition:transform .2s ease;
}

.meta-term-dark {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#8FA3B2;
    min-width:84px;
    padding-top:3px;
}

.meta-value-dark {
    margin:0;
    color:#E6EBEE;
    font-size:15px;
}

.window-bar {
    height:34px;
    background:#101A22;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 14px;
    border-bottom:1px solid #22323E;
}

.window-title {
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    letter-spacing:.08em;
    color:#6E8291;
    margin-left:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}

.tile {
    background-color:#fff;
    background-image:linear-gradient(90deg,#0E7D72,#30D5C8);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:0% 3px;
    border:1px solid #E6E3DE;
    border-radius:14px;
    transition:transform .25s ease,box-shadow .25s ease,background-size .35s ease;
    padding:clamp(22px,2.6cqi,32px);
    display:flex;
    flex-direction:column;
    gap:12px;
}

.tile-title-lg {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(20px,2cqi,24px);
    letter-spacing:-.01em;
    margin:0;
    color:#23282D;
}

.meta-row {
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    padding:16px 0;
    border-bottom:1px solid #E6E3DE;
}

.spec-row {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
    gap:8px;
    align-items:baseline;
    border-bottom:1px solid #EFEDE9;
    padding-bottom:16px;
}

.card-subtitle {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(21px,2.2cqi,28px);
    line-height:1.2;
    letter-spacing:-.02em;
    margin:0;
    color:#23282D;
    text-wrap:balance;
    margin:18px 0 6px;
}

.burger-line {
    display:block;
    width:18px;
    height:1.5px;
    background:#EDEFF1;
}

.meta-row-dark {
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.window {
    border-radius:14px;
    overflow:hidden;
    border:1px solid #2A3B48;
    background:#14202A;
    box-shadow:0 22px 48px rgba(10,18,24,.24);
}

.card-title-tight {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(21px,2.2cqi,28px);
    line-height:1.2;
    letter-spacing:-.02em;
    margin:0;
    color:#23282D;
    text-wrap:balance;
    margin-bottom:10px;
}

.btn-dark {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:600;
    font-size:15px;
    padding:14px 24px;
    border-radius:10px;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease;
    background-color:#14202A;
    color:#fff;
    box-shadow:0 6px 16px rgba(16,26,34,.18);
}

.btn-dark:hover {
    background-color:#22323F;
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(16,26,34,.26);
    text-decoration:none;
}

.tile-link-sm {
    background-color:#fff;
    background-image:linear-gradient(90deg,#0E7D72,#30D5C8);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:0% 3px;
    border:1px solid #E6E3DE;
    border-radius:14px;
    transition:transform .25s ease,box-shadow .25s ease,background-size .35s ease;
    padding:24px;
    text-decoration:none;
    color:#23282D;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.tile-link-sm:hover {
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(16,26,34,.10);
    background-size:100% 3px;
    text-decoration:none;
    color:#23282D;
}

.code-badge {
    display:inline-grid;
    place-items:center;
    align-self:flex-start;
    min-width:40px;
    height:30px;
    padding:0 9px;
    border-radius:9px;
    background:rgba(14,125,114,.10);
    color:#0E7D72;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    font-weight:500;
}

.tile-name {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:17px;
}

.tile-desc {
    font-size:14px;
    color:#5F6A72;
    line-height:1.55;
}

.body-muted {
    font-size:15px;
    line-height:1.6;
    color:#5F6A72;
    margin:0;
}

.input {
    font-family:'IBM Plex Sans',sans-serif;
    font-size:15px;
    padding:13px 14px;
    border:1px solid #D8D3CB;
    border-radius:10px;
    background:#FDFCFB;
    color:#23282D;
    width:100%;
}

.portal-link {
    background-color:#1B2A36;
    background-image:linear-gradient(90deg,#0E7D72,#30D5C8);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:0% 3px;
    border:1px solid #2C3E4D;
    border-radius:14px;
    padding:clamp(24px,3cqi,36px);
    display:flex;
    flex-direction:column;
    gap:12px;
    text-decoration:none;
    transition:transform .25s ease,box-shadow .25s ease,background-size .35s ease;
}

.portal-link:hover {
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    background-size:100% 3px;
    text-decoration:none;
}

.portal-title {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:21px;
    color:#fff;
}

.portal-text {
    font-size:14px;
    line-height:1.6;
    color:#A9B6C0;
}

.portal-more {
    font-size:14px;
    font-weight:600;
    color:#30D5C8;
    margin-top:4px;
}

.eyebrow-sm {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#30D5C8;
    margin:0 0 14px;
}

.btn-ghost {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:600;
    font-size:15px;
    padding:14px 24px;
    border-radius:10px;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease;
    background-color:rgba(255,255,255,.04);
    color:#fff;
    border:1px solid rgba(255,255,255,.28);
    box-shadow:0 6px 16px rgba(0,0,0,.18);
}

.btn-ghost:hover {
    border-color:#30D5C8;
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    text-decoration:none;
}

/* ---------------------------------------------------------------------------
   Module detail page (Pages/Modules/Module.cshtml)
   ------------------------------------------------------------------------- */
.module-hero { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(28px,4cqi,64px); align-items: center; }
.module-hero-text { flex: 1 1 320px; min-width: 0; }
.module-hero-media { flex: 1 1 380px; min-width: 0; }
.module-tagline { font-size: clamp(16px,1.45cqi,19px); line-height: 1.55; color: #B8C4CC; margin: 0 0 28px; max-width: 52ch; font-style: italic; text-wrap: pretty; }
.module-window { border-radius: 14px; overflow: hidden; border: 1px solid #2A3B48; background: #14202A; box-shadow: 0 22px 48px rgba(0,0,0,.35); }
.module-shot { aspect-ratio: 16/10; background-color: #F3F7F6; background-image: radial-gradient(ellipse 55% 60% at 50% 45%,rgba(48,213,200,.20),transparent 70%),linear-gradient(rgba(14,125,114,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(14,125,114,.09) 1px,transparent 1px); background-size: 100% 100%,28px 28px,28px 28px; display: grid; place-items: center; padding: 20px; text-align: center; }
.module-shot img { max-width: 100%; height: auto; display: block; object-fit: cover; width: 1570px; aspect-ratio: 1570 / 1184; }
.module-section-title { font-family: Archivo,sans-serif; font-weight: 600; font-size: clamp(21px,2.2cqi,28px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 10px; color: #23282D; }
.module-section-intro { font-size: 16px; line-height: 1.6; color: #5F6A72; font-style: italic; margin: 0 0 clamp(20px,2.6cqi,28px); max-width: 70ch; }
.module-next { margin-top: clamp(8px,1.6cqi,20px); }
.module-next-title { font-family: Archivo,sans-serif; font-weight: 600; font-size: clamp(20px,2cqi,26px); letter-spacing: -.02em; margin: 0 0 18px; color: #23282D; }
.module-next-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: clamp(14px,1.8cqi,20px); }
.module-pager { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 26px; font-size: 14px; font-weight: 600; }
.module-pager a { color: #0E7D72; }

/* ---------------------------------------------------------------------------
   Shared one-off styles
   ------------------------------------------------------------------------- */
.shared-div-1 {
    aspect-ratio:21/8;
    background-color:#F3F7F6;
    background-image:radial-gradient(ellipse 55% 60% at 50% 45%,rgba(48,213,200,.20),transparent 70%),linear-gradient(rgba(14,125,114,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(14,125,114,.09) 1px,transparent 1px);
    background-size:100% 100%,28px 28px,28px 28px;
    display:grid;
    place-items:center;
    padding:20px;
    text-align:center;
}

.shared-div-2 {
    flex:1 1 300px;
    min-width:0;
}

.shared-div-3 {
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    padding:16px 0;
}

.shared-h1-1 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(30px,4cqi,50px);
    line-height:1.07;
    letter-spacing:-.025em;
    margin:0 0 18px;
    color:#fff;
    text-wrap:balance;
}

.shared-h2-1 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(21px,2.2cqi,28px);
    line-height:1.2;
    letter-spacing:-.02em;
    margin:0;
    color:#23282D;
    text-wrap:balance;
    margin-bottom:clamp(20px,2.6cqi,30px);
}

.shared-p-1 {
    font-size:15px;
    line-height:1.6;
    color:#4A545B;
    margin:0;
}

.shared-p-2 {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#0E7D72;
    margin:0 0 18px;
}

.shared-span-1 {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.1em;
    color:#4F6B6A;
    line-height:1.7;
}

.shared-ul-1 {
    list-style:none;
    margin:0;
    padding:0;
    font-size:15px;
    line-height:1.6;
    color:#3D464D;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
    gap:14px clamp(24px,3cqi,48px);
}

/* ---------------------------------------------------------------------------
   Header and footer
   ------------------------------------------------------------------------- */
.layout-a-1 {
    display:flex;
    align-items:center;
    flex:none;
    text-decoration:none;
}

.layout-a-2 {
    font-size:14px;
    font-weight:600;
    color:#fff;
    background-color:#0E7D72;
    text-decoration:none;
    padding:10px 18px;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(14,125,114,.28);
    transition:transform .2s ease,background-color .2s ease;
}

.layout-a-3 {
    margin-top:16px;
    text-align:center;
    padding:14px 0;
    background:#0E7D72;
    color:#fff;
    font-weight:600;
    border-radius:10px;
    text-decoration:none;
}

.layout-a-4 {
    color:#C7D1D8;
}

.layout-address-1 {
    font-style:normal;
    font-size:14px;
    line-height:1.8;
    color:#C7D1D8;
}

.layout-button-1 {
    flex-direction:column;
    gap:4px;
    background:transparent;
    border:1px solid #33465A;
    border-radius:8px;
    padding:12px 12px;
    cursor:pointer;
}

.layout-div-1 {
    max-width:1180px;
    margin:0 auto;
    padding:clamp(12px,1.4cqi,18px) clamp(20px,3.4cqi,44px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.layout-div-2 {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
    gap:clamp(24px,3cqi,48px);
}

.layout-div-3 {
    margin-top:clamp(24px,3cqi,44px);
    padding-top:20px;
    border-top:1px solid #22323E;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:space-between;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.06em;
    color:#6E8291;
}

.layout-footer-1 {
    background:#14202A;
    color:#A9B6C0;
    padding:clamp(32px,4cqi,64px) clamp(20px,3.4cqi,44px) 32px;
}

.layout-header-1 {
    background:#14202A;
    color:#EDEFF1;
    border-bottom:1px solid rgba(48,213,200,.22);
    position:relative;
    z-index:40;
}

.layout-img-1 {
    display:block;
    height:clamp(40px,4.4cqi,52px);
    width:auto;
}

.layout-img-2 {
    display:block;
    height:48px;
    width:auto;
}

.layout-nav-1 {
    align-items:center;
    gap:clamp(16px,2.2cqi,30px);
}

.layout-nav-2 {
    border-top:1px solid #22323E;
    padding:8px 20px 20px;
    display:flex;
    flex-direction:column;
}

.layout-nav-3 {
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:14px;
}

.layout-p-1 {
    font-size:14px;
    line-height:1.65;
    margin:14px 0 0;
    max-width:34ch;
}

/* ---------------------------------------------------------------------------
   About page
   ------------------------------------------------------------------------- */
.about-a-1 {
    font-size:14px;
    font-weight:600;
    color:#0E7D72;
    margin-top:4px;
}

.about-div-1 {
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap:clamp(14px,1.8cqi,22px);
}

.about-h1-1 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(30px,4cqi,50px);
    line-height:1.07;
    letter-spacing:-.025em;
    margin:0;
    color:#fff;
}

/* ---------------------------------------------------------------------------
   Catalogues page
   ------------------------------------------------------------------------- */
.catalogues-aside-1 {
    background:#fff;
    border:1px solid #E6E3DE;
    border-radius:16px;
    padding:clamp(22px,3cqi,40px);
    display:flex;
    flex-wrap:wrap;
    gap:20px 32px;
    align-items:center;
    justify-content:space-between;
}

.catalogues-div-1 {
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(20px,3.4cqi,44px);
    display:flex;
    gap:24px;
    overflow-x:auto;
    scrollbar-width:none;
}

.catalogues-div-2 {
    height:1px;
    background:#E6E3DE;
    margin:clamp(24px,3cqi,36px) 0;
}

.catalogues-div-3 {
    columns:2 300px;
    column-gap:16px;
}

.catalogues-div-4 {
    padding:0;
}

.catalogues-nav-1 {
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(247,246,244,.96);
    border-bottom:1px solid #E6E3DE;
}

/* ---------------------------------------------------------------------------
   Contact page
   ------------------------------------------------------------------------- */
.contact-button-1 {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:600;
    font-size:15px;
    padding:14px 24px;
    border-radius:10px;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease;
    border:none;
    cursor:pointer;
    font-family:'IBM Plex Sans',sans-serif;
    background-color:#0E7D72;
    color:#fff;
    box-shadow:0 6px 16px rgba(14,125,114,.24);
}

.contact-div-1 {
    max-width:1180px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:clamp(18px,2.4cqi,28px);
    align-items:flex-start;
}

.contact-div-2 {
    flex:1 1 300px;
    min-width:0;
    background:#fff;
    border:1px solid #E6E3DE;
    border-radius:16px;
    padding:clamp(22px,3cqi,40px);
}

.contact-div-3 {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.contact-div-4 {
    min-height:0;
}

.contact-dl-1 {
    margin:0;
}

.contact-form-1 {
    position:relative;
    flex:1.3 1 340px;
    min-width:0;
    background:#fff;
    border:1px solid #E6E3DE;
    border-radius:16px;
    padding:clamp(22px,3cqi,40px);
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact-h2-1 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(21px,2.2cqi,28px);
    line-height:1.2;
    letter-spacing:-.02em;
    margin:0;
    color:#23282D;
    text-wrap:balance;
    margin-bottom:12px;
}

.contact-p-1 {
    margin:0;
    padding:12px 14px;
    border-radius:10px;
    background:#FBEDEA;
    border:1px solid #F0C9C0;
    color:#8A2E1C;
    font-size:14px;
    line-height:1.5;
}

.contact-p-2 {
    margin:0;
    padding:12px 14px;
    border-radius:10px;
    background:#E7F5F3;
    border:1px solid #BFE5E0;
    color:#0A5F57;
    font-size:14px;
    line-height:1.5;
}

.contact-p-3 {
    margin:0;
    font-size:12px;
    line-height:1.5;
    color:#6B7F8C;
}

.contact-select-1 {
    font-family:'IBM Plex Sans',sans-serif;
    font-size:15px;
    padding:13px 14px;
    border:1px solid #D8D3CB;
    border-radius:10px;
    background:#FDFCFB;
    color:#23282D;
    width:100%;
}

.contact-textarea-1 {
    font-family:'IBM Plex Sans',sans-serif;
    font-size:15px;
    padding:13px 14px;
    border:1px solid #D8D3CB;
    border-radius:10px;
    background:#FDFCFB;
    color:#23282D;
    width:100%;
    resize:vertical;
}

/* ---------------------------------------------------------------------------
   Dashboards page
   ------------------------------------------------------------------------- */
.dashboards-img-1 {
    max-width: 100%;
    height: 603px;
    display: block;
    object-fit: cover;
    width: 1148px;
    aspect-ratio: 1477 / 762;
}

/* ---------------------------------------------------------------------------
   Design system page
   ------------------------------------------------------------------------- */
.ds-a-1 {
    background-color:#fff;
    background-image:linear-gradient(90deg,#0E7D72,#30D5C8);
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:0% 3px;
    border:1px solid #E6E3DE;
    border-radius:14px;
    transition:transform .25s ease,box-shadow .25s ease,background-size .35s ease;
    padding:26px;
    display:flex;
    flex-direction:column;
    gap:10px;
    color:#23282D;
    text-decoration:none;
}

.ds-div-1 {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));
    gap:16px;
}

.ds-div-2 {
    height:88px;
    background:#1D2A35;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-3 {
    height:88px;
    background:#14202A;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-4 {
    height:88px;
    background:#0E7D72;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-5 {
    height:88px;
    background:#0A5F57;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-6 {
    height:88px;
    background:#30D5C8;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-7 {
    height:88px;
    background:#3F7A5E;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-8 {
    height:88px;
    background:#B5761F;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-9 {
    height:88px;
    background:#9B3A32;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-10 {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr));
    gap:12px;
    margin-top:20px;
}

.ds-div-11 {
    height:56px;
    background:#F7F6F4;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-12 {
    height:56px;
    background:#E6E3DE;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-13 {
    height:56px;
    background:#B3AEA6;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-14 {
    height:56px;
    background:#6B7F8C;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-15 {
    height:56px;
    background:#5F6A72;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-16 {
    height:56px;
    background:#3D464D;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-17 {
    height:56px;
    background:#23282D;
    border:1px solid #E6E3DE;
    border-radius:10px;
}

.ds-div-18 {
    display:flex;
    flex-direction:column;
    gap:18px;
}

.ds-div-19 {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
    gap:8px;
    align-items:baseline;
}

.ds-div-20 {
    display:flex;
    flex-wrap:wrap;
    gap:clamp(18px,2.4cqi,28px);
}

.ds-div-21 {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.ds-div-22 {
    background:#14202A;
    border-radius:12px;
    padding:18px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.ds-div-23 {
    background:#101A22;
    border-radius:10px;
    padding:13px 16px;
    font-size:13px;
    color:#A9B6C0;
}

.ds-div-24 {
    background:#14202A;
    border-bottom:1px solid rgba(48,213,200,.22);
    border-radius:10px;
    padding:14px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.ds-div-25 {
    aspect-ratio:16/7;
    background-color:#F3F7F6;
    background-image:radial-gradient(ellipse 55% 60% at 50% 45%,rgba(48,213,200,.20),transparent 70%),linear-gradient(rgba(14,125,114,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(14,125,114,.09) 1px,transparent 1px);
    background-size:100% 100%,28px 28px,28px 28px;
    display:grid;
    place-items:center;
    padding:20px;
    text-align:center;
}

.ds-div-26 {
    display:flex;
    flex-direction:column;
    gap:1px;
    background:#E6E3DE;
    border:1px solid #E6E3DE;
    border-radius:12px;
    overflow:hidden;
}

.ds-h2-1 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(21px,2.2cqi,28px);
    line-height:1.2;
    letter-spacing:-.02em;
    margin:0;
    color:#23282D;
    text-wrap:balance;
    margin-bottom:24px;
}

.ds-h2-2 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(21px,2.2cqi,28px);
    line-height:1.2;
    letter-spacing:-.02em;
    margin:0;
    color:#23282D;
    text-wrap:balance;
    margin-bottom:6px;
}

.ds-img-1 {
    display:block;
    height:36px;
    width:auto;
}

.ds-p-1 {
    font-size:14px;
    line-height:1.6;
    color:#5F6A72;
    margin:0 0 24px;
    max-width:72ch;
}

.ds-p-2 {
    font-size:14px;
    color:#5F6A72;
    margin:0 0 24px;
    max-width:70ch;
}

.ds-section-1 {
    flex:1 1 320px;
    min-width:0;
    background:#fff;
    border:1px solid #E6E3DE;
    border-radius:16px;
    padding:clamp(22px,3cqi,40px);
    display:flex;
    flex-direction:column;
    gap:14px;
}

.ds-span-1 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(28px,3.6cqi,46px);
    line-height:1.06;
    letter-spacing:-.025em;
}

.ds-span-2 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(21px,2.2cqi,28px);
    letter-spacing:-.02em;
}

.ds-span-3 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:20px;
    letter-spacing:-.01em;
}

.ds-span-4 {
    font-size:16px;
    line-height:1.6;
    color:#3D464D;
}

.ds-span-5 {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#0E7D72;
}

.ds-span-6 {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:600;
    font-size:15px;
    padding:14px 24px;
    border-radius:10px;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease;
    background:#E9E5DF;
    color:#A29B92;
}

.ds-span-7 {
    color:#0E7D72;
    font-weight:600;
    font-size:14px;
}

.ds-span-8 {
    display:flex;
    gap:16px;
    font-size:13px;
    color:#C7D1D8;
    flex-wrap:wrap;
    align-items:center;
}

.ds-span-9 {
    background:#0E7D72;
    padding:8px 14px;
    color:#fff;
    font-weight:600;
    border-radius:8px;
}

.ds-span-10 {
    display:inline-grid;
    place-items:center;
    min-width:38px;
    height:30px;
    padding:0 9px;
    border-radius:9px;
    background:rgba(14,125,114,.10);
    color:#0E7D72;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    font-weight:500;
}

.ds-span-11 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:20px;
}

.ds-span-12 {
    font-size:15px;
    line-height:1.6;
    color:#4A545B;
}

/* ---------------------------------------------------------------------------
   Home page
   ------------------------------------------------------------------------- */
.home-a-1 {
    color:#30D5C8;
}

.home-div-1 {
    max-width:900px;
    margin:0 auto;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.home-div-2 {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}

.home-div-3 {
    max-width:1120px;
    margin:clamp(36px,4.5cqi,64px) auto 0;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(48,213,200,.22);
    background:#101A22;
    box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 80px rgba(48,213,200,.14);
}

.home-div-4 {
    height:38px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 16px;
    background:#101A22;
    border-bottom:1px solid #22323E;
}

.home-div-5 {
    aspect-ratio:16/9;
    background:#f2f2f3;
}

.home-div-6 {
    max-width:1120px;
    margin:clamp(22px,3cqi,40px) auto 0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
    gap:1px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    overflow:hidden;
}

.home-div-7 {
    display:flex;
    flex-wrap:wrap;
    gap:clamp(24px,4cqi,72px);
}

.home-div-8 {
    flex:1 1 280px;
    min-width:0;
}

.home-div-9 {
    flex:1.4 1 340px;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.home-div-10 {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px 32px;
    margin-bottom:clamp(22px,3cqi,40px);
}

.home-div-11 {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
    gap:18px;
}

.home-div-12 {
    max-width:1180px;
    margin:0 auto;
    border-radius:20px;
    overflow:hidden;
    background-color:#14202A;
    background-image:radial-gradient(ellipse 50% 70% at 100% 0%,rgba(48,213,200,.22),transparent 70%),radial-gradient(ellipse 45% 60% at 0% 100%,rgba(201,138,95,.14),transparent 70%);
    color:#fff;
    padding:clamp(28px,4cqi,60px);
    display:flex;
    flex-wrap:wrap;
    gap:clamp(24px,4cqi,64px);
    align-items:center;
}

.home-dl-1 {
    flex:1 1 300px;
    min-width:0;
    margin:0;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    padding:4px 22px;
    background:rgba(255,255,255,.03);
}

.home-h1-1 {
    font-family: Archivo,sans-serif;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.03em;
    margin: 0 auto 22px;
    color: #fff;
    text-wrap: balance;
    max-width: 1129px;
    font-size: clamp(32px, 5.2cqi, 50px);
}

.home-h2-1 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(26px,3cqi,40px);
    line-height:1.1;
    letter-spacing:-.025em;
    margin:0;
    color:#23282D;
    text-wrap:balance;
}

.home-h2-2 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(24px,2.8cqi,36px);
    line-height:1.15;
    letter-spacing:-.02em;
    margin:0;
    max-width:22ch;
    color:#23282D;
    text-wrap:balance;
}

.home-h2-3 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(26px,3cqi,40px);
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0 0 14px;
    color:#fff;
}

.home-iframe-1 {
    display:block;
    width:100%;
    height:100%;
    border:0;
}

.home-p-1 {
    font-size:clamp(16px,1.5cqi,19px);
    line-height:1.6;
    color:#B8C4CC;
    margin:0 0 32px;
    max-width:60ch;
    text-wrap:pretty;
}

.home-p-2 {
    font-size:clamp(17px,1.5cqi,19px);
    line-height:1.6;
    color:#23282D;
    margin:0;
    text-wrap:pretty;
}

.home-p-3 {
    font-size:16px;
    line-height:1.65;
    color:#5F6A72;
    margin:0;
    text-wrap:pretty;
}

.home-p-4 {
    font-size:15px;
    color:#5F6A72;
    margin:0;
    max-width:40ch;
}

.home-p-5 {
    font-size:clamp(15px,1.4cqi,18px);
    line-height:1.6;
    color:#B8C4CC;
    margin:0 0 26px;
    max-width:46ch;
}

.home-section-1 {
    background-color:#14202A;
    background-image:radial-gradient(ellipse 60% 45% at 50% 0%,rgba(48,213,200,.22),transparent 70%),radial-gradient(ellipse 45% 40% at 100% 100%,rgba(201,138,95,.13),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:100% 100%,100% 100%,44px 44px,44px 44px;
    color:#fff;
    padding:clamp(44px,6.5cqi,100px) clamp(20px,3.4cqi,44px) clamp(36px,4.5cqi,72px);
}

.home-section-2 {
    padding:clamp(44px,6cqi,96px) clamp(20px,3.4cqi,44px);
}

.home-section-3 {
    padding:0 clamp(20px,3.4cqi,44px) clamp(44px,6cqi,96px);
}

.home-span-1 {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(48,213,200,.35);
    background: rgba(48,213,200,.08);
    color: #CFEDEA;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 26px;
}

.home-span-2 {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#30D5C8;
    box-shadow:0 0 10px #30D5C8,0 0 2px #30D5C8;
}

.home-span-3 {
    background-image: linear-gradient(90deg, rgb(48, 213, 200), rgb(159, 233, 226));
    background-clip: text;
    color: transparent;
    font-size: 50px;
}

.home-span-4 {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.06em;
    color:#8FA3B2;
    margin-left:12px;
    white-space:nowrap;
}

.home-span-5 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(28px,3cqi,36px);
    letter-spacing:-.02em;
    color:#30D5C8;
}

.home-span-6 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(28px,3cqi,36px);
    letter-spacing:-.02em;
    color:#fff;
}

/* ---------------------------------------------------------------------------
   Industries page
   ------------------------------------------------------------------------- */
.industries-p-1 {
    font-size:clamp(16px,1.4cqi,19px);
    line-height:1.55;
    color:#3D464D;
    margin:0;
    max-width:62ch;
}

.industries-ul-1 {
    list-style:none;
    margin:0 0 clamp(28px,3.4cqi,48px);
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
    gap:clamp(14px,1.8cqi,20px);
}

/* ---------------------------------------------------------------------------
   Login page
   ------------------------------------------------------------------------- */
.login-div-1 {
    max-width:960px;
    margin:0 auto;
}

.login-div-2 {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
    gap:clamp(14px,1.8cqi,20px);
}

.login-main-1 {
    background:#14202A;
}

.login-p-1 {
    font-size:clamp(15px,1.35cqi,18px);
    line-height:1.6;
    color:#B8C4CC;
    margin:0;
    max-width:66ch;
    margin-bottom:clamp(28px,3.4cqi,48px);
}

.login-p-2 {
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:#7E93A2;
    margin:24px 0 0;
}

.login-section-1 {
    background-color:#14202A;
    background-image:radial-gradient(ellipse 55% 75% at 95% 0%,rgba(48,213,200,.18),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:100% 100%,44px 44px,44px 44px;
    color:#fff;
    padding:clamp(40px,6cqi,104px) clamp(20px,3.4cqi,44px);
}

.login-span-1 {
    width:10px;
    height:10px;
    background:#30D5C8;
    transform:rotate(45deg);
}

.login-span-2 {
    width:10px;
    height:10px;
    background:#30D5C8;
    border-radius:50%;
}

.login-span-3 {
    width:10px;
    height:10px;
    background:#30D5C8;
}

/* ---------------------------------------------------------------------------
   Modules page
   ------------------------------------------------------------------------- */
.modules-div-1 {
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:clamp(14px,1.8cqi,22px);
}

.modules-section-1 {
    padding:clamp(36px,5cqi,80px) clamp(20px,3.4cqi,44px) 0;
}

/* ---------------------------------------------------------------------------
   Summary page
   ------------------------------------------------------------------------- */
.summary-div-1 {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px,4cqi,64px);
    align-items: center;
    width: 1091px;
    height: 427px;
}

.summary-div-2 {
    flex:1 1 260px;
    min-width:0;
}

.summary-div-3 {
    flex: 1.4 1 340px;
    min-width: 0;
    display: flex;
    justify-content: center;
    width: 579px;
    height: 426px;
}

.summary-div-4 {
    position: relative;
    width: 401px;
    max-width: 560px;
    aspect-ratio: 2.65/2.771;
    container-type: inline-size;
    height: 406px;
}

.summary-div-5 {
    position:absolute;
    left:50%;
    top:50%;
    width:78%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1.5px dashed rgba(14,125,114,.35);
}

.summary-div-6 {
    position:absolute;
    left:31.13%;
    top:0%;
    width:37.74%;
    height:31.25%;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    background:linear-gradient(160deg,#13917F 0%,#0E7D72 55%,#0A5F57 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 18%;
    text-align:center;
}

.summary-div-7 {
    position:absolute;
    left:62.26%;
    top:17.19%;
    width:37.74%;
    height:31.25%;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    background:linear-gradient(160deg,#13917F 0%,#0E7D72 55%,#0A5F57 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 18%;
    text-align:center;
}

.summary-div-8 {
    position:absolute;
    left:62.26%;
    top:51.56%;
    width:37.74%;
    height:31.25%;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    background:linear-gradient(160deg,#13917F 0%,#0E7D72 55%,#0A5F57 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 18%;
    text-align:center;
}

.summary-div-9 {
    position:absolute;
    left:31.13%;
    top:68.75%;
    width:37.74%;
    height:31.25%;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    background:linear-gradient(160deg,#13917F 0%,#0E7D72 55%,#0A5F57 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 18%;
    text-align:center;
}

.summary-div-10 {
    position:absolute;
    left:0%;
    top:51.56%;
    width:37.74%;
    height:31.25%;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    background:linear-gradient(160deg,#13917F 0%,#0E7D72 55%,#0A5F57 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 18%;
    text-align:center;
}

.summary-div-11 {
    position:absolute;
    left:0%;
    top:17.19%;
    width:37.74%;
    height:31.25%;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    background:linear-gradient(160deg,#13917F 0%,#0E7D72 55%,#0A5F57 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 18%;
    text-align:center;
}

.summary-div-12 {
    position:absolute;
    left:31.13%;
    top:34.375%;
    width:37.74%;
    height:31.25%;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    background:#30D5C8;
    padding:3px;
}

.summary-div-13 {
    width:100%;
    height:100%;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    background:radial-gradient(circle at 50% 35%,#22323F 0%,#14202A 70%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 16%;
}

.summary-div-14 {
    margin-top:24px;
}

.summary-h2-1 {
    font-family:Archivo,sans-serif;
    font-weight:600;
    font-size:clamp(21px,2.2cqi,28px);
    line-height:1.2;
    letter-spacing:-.02em;
    margin:0 0 12px;
    color:#23282D;
    text-wrap:balance;
}

.summary-img-1 {
    display:block;
    width:100%;
    height:auto;
}

.summary-p-1 {
    font-size:15px;
    line-height:1.6;
    color:#4A545B;
    margin:0;
    max-width:44ch;
}

.summary-p-2 {
    font-size:15px;
    line-height:1.6;
    color:#4A545B;
    margin:0 0 20px;
}

.summary-ul-1 {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #3D464D;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap: 14px clamp(24px,3cqi,48px);
    width: 667px;
    max-width: 100%;
}

/* Hover styles that sit on elements with page classes (they override those classes). */
.hover-1:hover {
    text-decoration:none !important;
}

.hover-3:hover {
    background-color:#0A5F57 !important;
    color:#fff !important;
    transform:translateY(-1px) !important;
    text-decoration:none !important;
}

.hover-6:hover {
    transform:translateY(-3px) !important;
    box-shadow:0 16px 34px rgba(16,26,34,.10) !important;
    background-size:100% 3px !important;
    text-decoration:none !important;
    color:#23282D !important;
}

.hover-10:hover {
    background-color:#0A5F57 !important;
    transform:translateY(-1px) !important;
    box-shadow:0 10px 24px rgba(14,125,114,.32) !important;
}