/* Lifana visual identity. Layout foundations remain in styles.css. */
:root {
  --ink: #14263d;
  --muted: #586e84;
  --lime: #0d9488;
  --line: #dae9ed;
  --paper: #f8fafc;
  --lavender: #5eead4;
  --mint: #ccfbf1;
}
body { background:var(--paper); }
.header {background:#f8fafced; border-color:#e1edf0;height:84px;}
.nav-wrap {max-width:1360px;}
.brand {font-size:30px;letter-spacing:-1.6px;gap:10px;}
.lifana-mark {display:block;width:34px;height:34px;flex-shrink:0;}
.button {border-radius:100px;padding:15px 24px;font-size:13px;}
.button-small {font-size:12px;min-height:43px;padding:11px 19px;}
.button-dark:hover {background:#2d5078;}
.button-outline {border-color:#bde1e0;}
.button-outline:hover {background:#e5f0f3;}
.text-button {color:var(--ink);}
.desktop-nav a:hover,.footer a:hover,.text-link:hover {color:#586e84;}
.hero {display:flex;flex-direction:column;max-width:1440px;padding:63px 48px 68px;gap:42px;overflow:hidden;}
.hero-content {padding:0;text-align:center;max-width:1200px;width:100%;}
.hero-label {display:inline-flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.25px;font-weight:650;border:1px solid #d4e5eb;background:#ecf2f8;padding:9px 13px;border-radius:30px;}
.status-dot {background:#586e84;width:6px;height:6px;}
.label-tail {border-left:1px solid #cbe0e6;margin-left:6px;padding-left:13px;letter-spacing:0;color:#586e84;font-size:9px;}
.hero h1 {font-size:clamp(48px,5.1vw,73px);letter-spacing:-3.9px;line-height:1.16;margin:23px 0 22px;font-weight:650;}
.underlined {white-space:nowrap;}
.underlined:after {background:#5eead4;height:18px;bottom:4px;border-radius:2px;transform:rotate(-1.1deg);left:-4px;right:-7px;}
.hero-description {margin:0 auto;max-width:680px;font-size:16px;line-height:1.9;color:#586e84;}
.hero-buttons {justify-content:center;margin:25px 0 18px;gap:12px;}
.hero-facts {justify-content:center;font-size:10px;gap:24px;color:#586e84;}
.hero-facts svg {color:#586e84;}
.development-note {justify-content:center;margin-top:16px;font-size:9px;color:#586e84;}
.development-note>span {background:#95cfcd;}
.hero-visual {transform:none;width:100%;max-width:1050px;padding:18px 18px 35px;border-radius:20px;background:#e6f2f5;border:1px solid #dae9ed;box-shadow:0 28px 75px #2642630b;}
.visual-top {font-size:8px;color:#586e84;letter-spacing:1.1px;padding-right:0;margin-bottom:13px;}
.visual-top i {background:#586e84;}
.dashboard {border-radius:12px;border:1px solid #d2e4ea;min-height:530px;box-shadow:0 12px 25px #2f537d0a;}
.dash-sidebar {width:146px;background:#f6f8fb;align-items:stretch;padding:20px 12px;gap:7px;border-right:1px solid #e7f0f3;}
.dash-sidebar>span {width:auto;justify-content:flex-start;padding:10px;height:36px;gap:10px;color:#586e84;}
.dash-sidebar>span em {font-size:9px;font-style:normal;}
.dash-sidebar .mini-brand {height:38px;margin-bottom:16px;padding:0 9px;}
.mini-brand .lifana-mark {width:29px;height:29px;}
.mini-brand:after {content:'lifana';font-family:'Manrope',sans-serif;letter-spacing:-.6px;font-size:18px;font-weight:750;color:#14263d;}
.dash-sidebar .side-active {background:#e3eef2;color:#586e84;}
.dash-sidebar .side-bottom {width:28px;height:28px;justify-content:center;padding:0;background:#dfecf0;color:#586e84;}
.dash-main {padding:0 26px 18px;}
.dash-top {height:45px;font-size:8px;color:#586e84;border-color:#eaf2f5;}
.dash-top b {color:#576c82;}
.dash-avatar {background:#e8f1f4;color:#586e84;}
.dash-heading {margin:19px 0;}
.dash-overline {font-size:7px;color:#586e84;}
.dash-heading h2 {font-size:23px;letter-spacing:-.7px;margin:7px 0;font-weight:700;}
.dash-heading h2 span {color:#586e84;font-size:22px;}
.dash-heading p {font-size:9px;color:#586e84;}
.dash-period {font-size:8px;padding:7px 10px;border-color:#dfebef;}
.company-filter {padding:9px 10px;border-color:#deebef;gap:8px;margin-bottom:13px;}
.company-filter svg {width:14px;height:14px;color:#586e84;}
.company-filter select {font-size:10px;}
.company-counter {font-size:8px;background:#ecf2f8;color:#586e84;padding:4px 8px;}
.dash-metrics {gap:12px;grid-template-columns:1.15fr 1fr 1fr;}
.dash-metrics>div {padding:13px 14px;border-color:#e0ecf0;border-radius:7px;}
.dash-metrics>div>span {font-size:9px;color:#586e84;}
.dash-metrics strong {font-size:25px;margin:9px 0 7px;font-weight:650;letter-spacing:-.8px;}
.dash-metrics small {font-size:7px;color:#586e84;}
.dash-metrics strong i {color:#586e84;}
.dash-chart-row {grid-template-columns:1fr 178px;margin-top:14px;gap:12px;}
.dash-chart {border-color:#e1edf0;border-radius:7px;padding:15px;}
.chart-title {font-size:10px;}
.chart-title>span {font-size:7px;color:#586e84;}
.chart-title i {background:#99d1cf;}
.chart-plot {height:130px;padding-top:20px;gap:12px;}
.chart-labels {font-size:7px;color:#586e84;}
.bars {gap:18px;background:repeating-linear-gradient(to top,transparent 0,transparent 33px,#eaf0f7 33px,#eaf0f7 34px);}
.bars i {background:#d4e5eb;width:55%;border-radius:4px 4px 0 0;}
.bars i.current {background:#586e84;}
.bars span {font-size:7px;color:#586e84;}
.dash-task {border-radius:7px;background:#e9f2f5;padding:15px;gap:9px;}
.dash-task>b {font-size:17px;letter-spacing:-.5px;font-weight:650;}
.dash-task p {font-size:8px;color:#586e84;}
.dash-task>span:last-child {font-size:7px;color:#586e84;}
.table-heading {font-size:10px;margin:17px 0 10px;}
.table-heading>span {font-size:8px;color:#586e84;}
.table-header,.company-row {grid-template-columns:1fr 110px 70px;}
.table-header {font-size:6px;background:#f3f6fa;color:#586e84;}
.company-row {padding:9px 6px;font-size:9px;border-color:#eaf0f7;}
.company-row b {font-size:8px;}
.company-row small {font-size:6px;color:#586e84;}
.company-avatar {background:#e7f0f3;color:#586e84;}
.company-avatar.purple {background:#e6f0f3;color:#586e84;}
.company-avatar.yellow {background:#ddebef;color:#586e84;}
.badge {background:#e9f2f5;color:#586e84;font-size:7px;padding:4px 9px;}
.security-float {left:auto;right:35px;bottom:10px;transform:none;border-color:#d7e7ec;box-shadow:0 6px 24px #2846680d;border-radius:9px;padding:12px 17px;}
.security-float>span:first-child {background:#eaf0f7;}
.security-float svg {color:#586e84;}
.security-float small {color:#586e84;}
.float-check {color:#586e84;}
.audience-strip {background:#f8fafc;border-color:#deebef;}
.audience-strip>.section-wrap>span {color:#586e84;}
.audience-strip .section-wrap>div {color:#586e84;font-weight:500;}
.audience-strip svg {color:#586e84;}
.section-heading h2 {font-weight:650;}
.eyebrow {color:#586e84;}
.benefits {padding-top:87px;}
.benefit-grid {border-color:#deebef;}
.benefit-grid article+article {border-color:#deebef;}
.benefit-grid h3 {font-weight:650;}
.feature-icon {background:#e7f0f3;color:#586e84;border-radius:11px;}
.feature-number {color:#92cecc;}
.feature-featured {background:#e9f2f4;border-color:#d9e8ed;border-radius:18px;}
.mini-doc {box-shadow:0 16px 35px #2744660c;border-color:#e1edf0;transform:rotate(-4deg);}
.doc-brand {color:#586e84;}
.doc-brand span {color:#586e84;}
.doc-lines i {background:#eaf0f7;}
.doc-footer {background:#e7f1f4;color:#586e84;}
.doc-total {border-color:#e7f1f4;}
.doc-item b {color:#54687d;}
.pill {border-color:#d4e5eb;color:#586e84;}
.feature-list .feature-icon {border-color:#dbe9ed;background:#f8fafc;}
.feature-list h3 {font-weight:650;}
.multi-section {background:#14263d;}
.eyebrow.light {color:#b8dfde;}
.multi-grid h2 {font-weight:600;}
.multi-grid>div>p {color:#a1d5d3;}
.check-list {color:#c6dce3;}
.check-list svg {color:#b5dedc;}
.security-rule {border-color:#f8fafc18;}
.security-rule svg {color:#b7dfdd;}
.security-rule p {color:#90cdcb;}
.security-rule b {color:#d9e8ec;}
.workspace-node {background:#203951;border-color:#366090;}
.workspace-node .feature-icon {background:#30547d;color:#c4dbe2;}
.workspace-node small {color:#93cfcd;}
.node-tag {background:#2c4e75;color:#acd9d8;}
.branches,.branches i {border-color:#586e844d;}
.branches:before {background:#586e844d;}
.rut-nodes>div {background:#203951;border-color:#386292;}
.rut-nodes small {color:#586e84;}
.rut-nodes>div>span:not(.company-avatar) {color:#9ad1d0;}
.rut-nodes .cert {background:#2c4e75;color:#c6dce3!important;}
.diagram-caption {color:#a6d7d5;}
.api-copy h2 {font-weight:650;}
.api-copy h2 span {color:#90cdcb;}
.api-tags span {background:#eaf0f7;border-color:#deebef;color:#586e84;}
.code-window {background:#14263d;box-shadow:0 20px 40px #1f375213;}
.code-header {color:#586e84;}
.code-header i {background:#586e84;}
.code-header i:first-child {background:#586e84;}
.code-header i:last-child {background:#586e84;}
.code-green {color:#c8dee4;}
.code-purple {color:#aad9d7;}
.code-muted {color:#586e84;}
.code-bottom {background:#203951;color:#586e84;}
.code-bottom i {background:#a6d7d5;}
.pricing-section {background:#edf4f8;border-color:#dfebef;}
.pricing-heading h2 {font-weight:650;}
.billing-control {background:#dbe9ee;border-radius:100px;}
.billing-control button {border-radius:100px;color:#586e84;}
.billing-control span {background:#e4eff2;color:#586e84;}
.pricing-heading .billing-note {color:#586e84;}
.plan {border-color:#d9e8ec;background:#ffffff;border-radius:14px;}
.plan-index {color:#586e84;letter-spacing:.8px;}
.plan h3 {font-weight:650;}
.plan>p,.price>span {color:#586e84;}
.plan .price strong {font-weight:650;}
.plan>.button {border-radius:100px;}
.plan ul {border-color:#e0ecf0;color:#586e84;}
.plan li:before {color:#586e84;}
.plan li b {color:#586e84;}
.plan-featured {border-color:#0f766e;background:#f0fdfa;border-radius:0 0 14px 14px;}
.plan-ribbon {background:#99f6e4;border-color:#0f766e;border-radius:13px 13px 0 0;color:#54697f;}
.annual-total {color:#586e84;}
.pricing-details {color:#586e84;}
.pricing-details b {color:#586e84;}
.studio-plan {border-color:#d2e4e9;border-radius:16px;background:#f9fbfd;}
.studio-intro>.eyebrow,.studio-spec>span {color:#586e84;}
.studio-intro h3 {font-weight:650;}
.studio-intro p,.studio-spec>p {color:#586e84;}
.studio-spec {border-color:#dbe9ed;}
.studio-limits {color:#586e84;}
.studio-limits b {color:#586e84;}
.faq-list summary>span {color:#586e84;}
.faq-list summary {font-weight:550;}
.closing {background:#dceef0;border-radius:22px;padding-top:55px;padding-bottom:55px;}
.closing .eyebrow {color:#586e84;}
.closing h2 {font-weight:600;}
.closing p {color:#586e84;}
.closing-art {width:265px;display:flex;align-items:center;justify-content:center;}
.orbit {position:absolute;width:230px;height:230px;border:1px solid #95d0ce80;border-radius:50%;transform:rotate(-25deg);}
.orbit-two {width:170px;height:170px;border-color:#95d0ce60;}
.orbit-one:before {content:'';width:17px;height:17px;border:4px solid #dceef0;border-radius:50%;background:#586e84;position:absolute;left:20px;top:23px;}
.orbit-two:after {content:'';position:absolute;width:13px;height:13px;border-radius:50%;background:#b2dcdb;bottom:20px;right:7px;}
.orbit-center {width:108px;height:108px;border-radius:30px;background:#e7f0f3;box-shadow:0 15px 30px #335b880b;display:flex;align-items:center;justify-content:center;transform:rotate(-9deg);}
.orbit-center img {width:70px;height:70px;}
.closing-art b {font-size:45px;top:13px;right:2px;color:#586e84;}
.footer {padding-top:55px;}
.footer p,.footer nav {color:#586e84;}
.footer-bottom {color:#586e84;border-color:#d9e8ec;}
.dialog-body input,.dialog-body select {background:#f8fbfd;border-color:#d0e3e9;}
dialog {background:#fbfcfe;border-color:#d7e7ec;border-radius:20px;}
dialog::backdrop {background:#1a2f46aa;}
.dialog-close {color:#586e84;}
.result-icon {background:#d3e5ea;}
@media(max-width:1100px) {
  .hero {padding-left:32px;padding-right:32px;}
  .hero h1 {font-size:57px;letter-spacing:-3.1px;}
  .dash-sidebar {width:125px;}
  .dash-main {padding-left:20px;padding-right:20px;}
  .dash-heading h2 {font-size:21px;}
  .dash-metrics strong {font-size:22px;}
  .dash-metrics>div>span {font-size:8px;}
  .dash-chart-row {grid-template-columns:1fr 150px;}
  .dash-task>b {font-size:15px;}
  .bars {gap:13px;}
  .table-header,.company-row {grid-template-columns:1fr 90px 60px;}
}
@media(max-width:800px) {
  .hero {max-width:none;padding-top:42px;gap:30px;padding-bottom:45px;}
  .hero h1 {font-size:47px;letter-spacing:-2.6px;}
  .hero-description {font-size:14px;max-width:540px;}
  .hero-label {font-size:8px;letter-spacing:.8px;}
  .label-tail {font-size:8px;}
  .hero-visual {padding:15px 12px 32px;}
  .dash-sidebar {width:44px;padding:15px 7px;align-items:center;}
  .dash-sidebar>span {width:29px;height:29px;justify-content:center;padding:5px;}
  .dash-sidebar>span em,.mini-brand:after {display:none;}
  .dash-sidebar .mini-brand {padding:0;}
  .dash-main {padding:0 15px 15px;}
  .dash-heading h2 {font-size:19px;}
  .dash-metrics>div {padding:10px;}
  .dash-metrics strong {font-size:19px;}
  .dash-chart-row {grid-template-columns:1fr 130px;}
  .dash-task>b {font-size:14px;}
  .chart-plot {height:120px;}
  .security-float {right:23px;padding:10px 13px;}
  .closing-art {width:170px;}
  .orbit {width:190px;height:190px;}
  .orbit-two {width:140px;height:140px;}
  .orbit-center {width:85px;height:85px;}
  .orbit-center img {width:57px;height:57px;}
  .closing-art b {font-size:35px;right:-15px;}
}
@media(max-width:520px) {
  .header {height:72px;}
  .brand {font-size:27px;gap:8px;}
  .brand .lifana-mark {width:29px;height:29px;}
  .hero {padding:32px 20px 35px;gap:25px;}
  .hero-label {font-size:7px;padding:8px 10px;letter-spacing:.7px;}
  .label-tail {display:none;}
  .hero h1 {font-size:39px;line-height:1.17;letter-spacing:-2px;margin:22px 0 20px;}
  .hero h1 .underlined {white-space:normal;}
  .underlined:after {display:none;}
  .hero-description {font-size:13px;line-height:1.85;max-width:335px;}
  .desktop-break {display:none;}
  .hero-buttons {margin-top:24px;gap:8px;}
  .hero-buttons .button {font-size:10px;min-height:44px;padding:13px 16px;gap:12px;}
  .hero-facts {gap:10px;font-size:8px;}
  .development-note {font-size:8px;margin-top:15px;}
  .hero-visual {margin:0;padding:12px 8px 34px;border-radius:12px;}
  .visual-top {font-size:5px;letter-spacing:.6px;margin-bottom:9px;}
  .dashboard {min-height:0;border-radius:7px;}
  .dash-sidebar {width:29px;padding:12px 3px;gap:8px;}
  .dash-sidebar>span {width:22px;height:22px;}
  .dash-sidebar svg {width:11px;height:11px;}
  .mini-brand .lifana-mark {width:19px;height:19px;}
  .dash-sidebar .mini-brand {height:23px;margin-bottom:5px;}
  .dash-sidebar .side-bottom {width:20px;height:20px;font-size:6px;}
  .dash-main {padding:0 8px 9px;}
  .dash-top {height:29px;font-size:5px;}
  .dash-heading {margin:10px 0;}
  .dash-overline {font-size:4px;}
  .dash-heading h2 {font-size:12px;letter-spacing:-.45px;margin:4px 0;}
  .dash-heading h2 span {font-size:12px;margin-left:3px;}
  .dash-heading p {font-size:5px;}
  .dash-period {font-size:5px;padding:4px;}
  .company-filter {padding:5px;margin-bottom:7px;gap:5px;}
  .company-filter select {font-size:9px;min-height:26px;}
  .company-filter svg {width:10px;height:10px;}
  .company-counter {font-size:5px;padding:3px 5px;}
  .dash-metrics {gap:5px;}
  .dash-metrics>div {padding:7px 5px;}
  .dash-metrics>div>span {font-size:4.5px;}
  .dash-metrics strong {font-size:12px;letter-spacing:-.4px;margin:7px 0 4px;}
  .dash-metrics small {font-size:4px;}
  .dash-chart-row {grid-template-columns:1fr 81px;gap:5px;margin-top:7px;}
  .dash-chart {padding:7px;}
  .chart-title {font-size:5.5px;}
  .chart-title>span {font-size:4px;}
  .chart-plot {height:89px;padding-top:15px;gap:5px;}
  .chart-labels,.bars span {font-size:4px;}
  .bars {gap:6px;}
  .bars i {width:75%;}
  .dash-task {padding:8px;gap:5px;}
  .dash-task>b {font-size:9px;letter-spacing:-.1px;}
  .dash-task p {font-size:5px;}
  .dash-task>span:last-child {font-size:4px;}
  .table-heading {font-size:7px;margin:10px 0 7px;}
  .table-heading>span {font-size:5px;}
  .table-header,.company-row {grid-template-columns:1fr 42px 30px;gap:4px;}
  .table-header {font-size:3.5px;padding:5px;}
  .company-row {font-size:5px;padding:6px 2px;}
  .company-row b {font-size:5.5px;}
  .company-row small {font-size:4px;}
  .company-avatar {width:18px;height:18px;font-size:7px;}
  .badge {font-size:4px;padding:3px 5px;}
  .security-float {right:15px;bottom:9px;padding:8px 11px;border-radius:7px;gap:7px;}
  .security-float b {font-size:8px;}
  .security-float small {font-size:5.5px;margin-top:3px;}
  .security-float svg {width:13px;height:13px;}
  .security-float>span:first-child {padding:4px;}
  .float-check {font-size:8px;margin-left:10px;}
  .audience-strip .section-wrap {padding-top:20px;padding-bottom:20px;}
  .benefits {padding-top:45px;}
  .closing {padding-top:35px;padding-bottom:35px;}
  .closing-art {opacity:.18;right:0;}
  .closing-art b {top:30px;right:8px;font-size:60px;}
  .footer .brand .lifana-mark {width:29px;height:29px;}
}

/* Equal-height plan cards with aligned calls to action. */
.pricing-grid > .plan {display:flex;flex-direction:column;}
.pricing-grid > .plan > ul {order:1;margin-bottom:24px;}
.pricing-grid > .plan > .button {order:2;margin-top:auto;min-height:50px;}

/* Palette trial: deep blue, teal and cool whites. */
:root {--ink:#14263d;--muted:#526477;--lime:#0d9488;--line:#d5e2eb;--paper:#f8fafc;--lavender:#5eead4;--mint:#ccfbf1;}
.button-dark {background:#14263d;color:#ffffff;}
.button-dark:hover {background:#234966;}
.status-dot,.development-note>span,.visual-top i {background:#0d9488;}
.hero-description,.hero-facts,.development-note,.visual-top,.eyebrow,.plan-index,.annual-total,.pricing-details,.footer-bottom {color:#526477;}
.underlined:after {background:#99f6e4;}
.side-active,.badge {background:#ccfbf1!important;color:#115e59!important;}
.feature-icon {color:#0f766e;background:#e0f2f1;}
.bars i {background:#b5d9e2;}.bars i.current {background:#0d9488;}
.api-copy h2 span {color:#0f766e;}
.plan-featured {border-color:#0f766e;}.plan-ribbon {background:#99f6e4;color:#134e4a;border-color:#0f766e;}
.plan-ribbon,.plan-ribbon * {color:#134e4a;}
.multi-section .eyebrow,.multi-grid>div>p,.check-list,.security-rule p,.workspace-node small,.rut-nodes small,.rut-nodes>div>span:not(.company-avatar),.diagram-caption {color:#b8d9df;}
.multi-section h2,.security-rule b,.workspace-node,.rut-nodes {color:#f1f5f9;}
.workspace-node .feature-icon,.node-tag,.rut-nodes .cert {background:#23495b;color:#99f6e4!important;}
.code-window {color:#e2e8f0;}.code-header,.code-muted,.code-bottom {color:#b6cbd9;}
.code-green {color:#5eead4;}.code-purple {color:#93c5fd;}

.simulation-entry {padding-top:48px;padding-bottom:48px;}
.simulation-entry h2 {font-size:30px;}
.simulation-entry p {max-width:760px;margin:18px 0 24px;color:#526477;}