/***************************************************
Theme Name:   Truemelytics
Theme URL:    https://www.truemelytics.com/
Description:  2026 Home
Author:       MVN
Version:      1.0
**************************************************/
:root {
  --primary: #101c3d;
  --secondary: #e2603a;
  --secondary-dark: #c24a28;
  --blue: #2a6fa8;
  --blue-dark: #1b4f7c;
  --purple: #6c4fd8;
  --green: #1f9e8d;
  --leaf: #4e8a3e;
  --slate: #4a5a72;
  --text-color: #101c3d;
  --text-gray: #4e5a73;
  --text-light: #6b7690;
  --text-muted: #7c879e;
  --cream: #fdf8f0;
  --cream-dark: #fbf3e7;
  --sand: #f2ebdc;
  --peach: #fff3ec;
  --peach-soft: #fbe0ce;
  --lilac: #efeafd;
  --mint: #e6f6f2;
  --mint-soft: #dcf2ec;
  --sky: #edf4fa;
  --sky-soft: #dcebf7;
  --brdr-color: #f0e4d4;
  --brdr-dark: #e5d6c2;
  --brdr-sand: #ddd0bb;
  --brdr-blue: #c3daec;
  --brdr-peach: #f6d9c8;
  --white: #ffffff;
  --footer-text: #a8b7d4;
  --font-archivo: "Archivo", sans-serif;
  --font-karla: "Karla", system-ui, sans-serif;
}
html{ scroll-behavior: smooth;}
body{ color: var(--text-color); background: var(--cream); font-family: var(--font-karla); font-weight: normal; font-size: 16px; line-height: 1.6; overflow-x: hidden;}
p{ margin: 0; color: var(--text-gray);}
p + p{ margin-top: 0.9375rem;}
img{ max-width: 100%; height: auto;}
ol{ margin: 0; padding: 0;}
ul, li{ margin: 0; padding: 0; list-style: none;}
a, a:hover, a:focus, button, button:hover, button:focus{ transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; text-decoration: none; outline: none; color: inherit; cursor: pointer;}
h1, h2, h3, h4, h5, h6{ margin: 0; font-weight: 700; font-family: var(--font-archivo); line-height: 1.1; letter-spacing: -0.03em;}
h1{ font-size: 3.875em; font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;}
h2{ font-size: 2.75em;}
h3{ font-size: 1.25em; letter-spacing: -0.02em;}
input::placeholder{ overflow: visible;}
::placeholder{ opacity: 1;}
::selection{ background: var(--peach-soft);}
button:focus{ outline: none;}
figure{ margin: 0;}
*, *:before, *:after{ box-sizing: border-box;}
.container{ width: 100%; max-width: 1312px; margin: 0 auto; padding: 0 1.625rem;}
.grid-2, .grid-3, .grid-4{ display: grid; gap: 1.125rem;}
.grid-2{ grid-template-columns: repeat(2, 1fr);}
.grid-3{ grid-template-columns: repeat(3, 1fr);}
.grid-4{ grid-template-columns: repeat(4, 1fr);}
.sec-pad{ padding: 3.875rem 0;}
.sec-brdr{ border-bottom: 1px solid var(--brdr-color);}
.bg-cream{ background: var(--cream-dark);}
.bg-sand{ background: var(--sand);}
.bg-peach{ background: var(--peach);}
.bg-sky{ background: var(--sky-soft);}
.eyebrow{ display: block; font-family: var(--font-archivo); font-size: 0.78em; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secondary); margin: 0 0 0.875rem;}
/* Buttons */
.bttn{ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.0625rem 2rem; text-align: center; font-family: var(--font-archivo); font-weight: 600; font-size: 0.9375em; line-height: 1.2; border-radius: 999px; border: 1px solid transparent; letter-spacing: -0.01em;}
.bttn-navy{ background: var(--primary); border-color: var(--primary); color: var(--white);}
.bttn-navy:hover, .bttn-navy:focus{ background: var(--secondary); border-color: var(--secondary); color: var(--white);}
.bttn-orange{ background: var(--secondary); border-color: var(--secondary); color: var(--white);}
.bttn-orange:hover, .bttn-orange:focus{ background: var(--secondary-dark); border-color: var(--secondary-dark); color: var(--white);}
.bttn-white{ background: var(--white); border-color: var(--brdr-dark); color: var(--primary);}
.bttn-white:hover, .bttn-white:focus{ background: var(--primary); border-color: var(--primary); color: var(--white);}
.bttn-sm{ padding: 0.75rem 1.5rem; font-size: 0.875em;}
.sec-btn{ display: flex; flex-wrap: wrap; gap: 0.875rem;}
/* Title */
.title-sec{ padding-bottom: 2.25rem; max-width: 640px;}
.title-sec span{ display: block; font-family: var(--font-archivo); font-size: 0.78em; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secondary); margin: 0 0 0.875rem;}
.title-sec h2{ margin: 0;}
.title-sec p{ padding: 1rem 0 0; font-size: 1.0625em; line-height: 1.6; color: var(--text-light);}
.title-para-sec{ text-align: center; margin: 0 auto;}
/* Lists */
ul.tick-list li{ position: relative; padding-left: 32px; margin: 0 0 0.75rem; font-size: 1.03em; line-height: 1.5; color: #33405c;}
ul.tick-list li:before{ content: "\2713"; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--mint); color: var(--green); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;}
/* Pills / bars */
.pill{ display: inline-flex; align-items: center; gap: 0.75rem; background: var(--white); border: 1px solid var(--brdr-color); border-radius: 999px; padding: 0.75rem 1.375rem; font-family: var(--font-archivo); font-weight: 600; font-size: 1em;}
.pill .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none;}
.bars{ display: inline-flex; align-items: flex-end; gap: 3px; height: 17px;}
.bars span{ width: 4px; display: block; border-radius: 1px; background: currentColor;}
.bars span:nth-child(1){ height: 45%; opacity: 0.45;}
.bars span:nth-child(2){ height: 72%; opacity: 0.7;}
.bars span:nth-child(3){ height: 100%;}
.bars-lg{ height: 26px; gap: 4px;}
.bars-lg span{ width: 7px; border-radius: 2px;}
/* Cards */
.card{ background: var(--white); border: 1px solid var(--brdr-color); border-radius: 16px; padding: 1.625rem 1.5rem; min-width: 0;}
/* Header */
.main-header{ position: sticky; top: 0; z-index: 60; background: rgba(253,248,240,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--brdr-color);}
.main-header .container{ display: flex; align-items: center; gap: 1.625rem; padding-top: 0.625rem; padding-bottom: 0.625rem;}
.main-header .logo{ margin-right: auto; display: flex; align-items: center;}
.main-header .logo img{ height: 62px; width: auto; display: block;}
.main-nav ul{ display: flex; gap: 1.5rem; align-items: center;}
.main-nav ul li a{ font-size: 0.906em; font-weight: 500; color: #44506b;}
.main-nav ul li a:hover{ color: var(--secondary);}
.head-btn .bttn{ padding: 0.75rem 1.5rem; font-size: 0.906em;}
.menu-toggle{ display: none; width: 44px; height: 44px; border: 1px solid var(--brdr-dark); border-radius: 10px; background: var(--white); align-items: center; justify-content: center; flex-direction: column; gap: 5px;}
.menu-toggle span{ width: 20px; height: 2px; background: var(--primary); display: block; transition: 0.3s all ease;}
/* Hero */
.main-banner{ position: relative; overflow: hidden; border-bottom: 1px solid var(--brdr-color);}
.main-banner .blob{ position: absolute; border-radius: 50%; pointer-events: none;}
.main-banner .blob-1{ top: -150px; left: -140px; width: 430px; height: 430px; background: var(--peach-soft); opacity: 0.7;}
.main-banner .blob-2{ top: 130px; right: -190px; width: 480px; height: 480px; background: #d9efe9; opacity: 0.8;}
.main-banner .container{ position: relative; padding-top: 3.75rem; padding-bottom: 2.875rem;}
.mb-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding-bottom: 2.75rem;}
.mb-cont h1 span{ color: var(--secondary);}
.mb-cont p{ font-size: 1.1875em; line-height: 1.55; max-width: 26em; margin: 1.25rem 0 1.625rem;}
.mb-img{ position: relative; border-radius: 14px; overflow: hidden; height: 390px; box-shadow: 0 26px 60px -34px rgba(16,28,61,0.35);}
.mb-img img{ width: 100%; height: 100%; object-fit: cover; display: block;}
.hero-stats{ position: relative; background: var(--white); border: 1px solid var(--brdr-color); border-radius: 18px; padding: 0.5rem; margin-bottom: -2.375rem; box-shadow: 0 18px 40px -30px rgba(16,28,61,0.25);}
.hero-stats .grid-4{ gap: 0.5rem;}
.stat-card{ border-radius: 13px; padding: 1.25rem 1.25rem 1.125rem; min-width: 0;}
.stat-card .stat-top{ display: flex; align-items: baseline; gap: 0.5625rem; margin-bottom: 0.5rem;}
.stat-card strong{ font-family: var(--font-archivo); font-weight: 800; font-size: 1.875em; line-height: 1; letter-spacing: -0.03em;}
.stat-card em{ display: block; font-style: normal; font-family: var(--font-archivo); font-size: 0.72em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light);}
.stat-orange{ background: var(--peach); color: var(--secondary);}
.stat-purple{ background: #f4f0fe; color: var(--purple);}
.stat-green{ background: var(--mint); color: var(--green);}
.stat-blue{ background: var(--sky); color: var(--blue);}
.stat-card strong, .stat-card em{ color: var(--text-color);}
.stat-card em{ color: var(--text-light);}
/* Science */
.science-sec .container{ padding-top: 4rem; padding-bottom: 4rem;}
.science-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 2.75rem; align-items: center;}
.science-grid .title-sec{ padding-bottom: 1.375rem;}
.science-grid ul.tick-list{ margin-bottom: 1.5rem;}
.metric-card{ border-radius: 16px; padding: 1.5rem 1.375rem; min-width: 0;}
.metric-card .bars{ margin-bottom: 0.875rem;}
.metric-card strong{ display: block; font-family: var(--font-archivo); font-weight: 800; font-size: 2.125em; line-height: 1; letter-spacing: -0.03em; color: var(--text-color); margin: 0 0 0.5rem;}
.metric-card em{ font-style: normal; font-size: 0.9375em; line-height: 1.5; color: #5a6478;}
.metric-purple{ background: var(--lilac); color: var(--purple);}
.metric-green{ background: var(--mint); color: var(--green);}
.metric-orange{ background: var(--peach); color: var(--secondary);}
.metric-blue{ background: var(--sky); color: var(--blue);}
/* Dimensions */
.dim-sec .title-sec{ max-width: 100%; padding-bottom: 1.625rem;}
.dim-sec .title-sec p{ padding-top: 0.75rem;}
.dim-tabs{ display: flex; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 1.5rem;}
.dim-tab{ display: flex; align-items: center; gap: 0.625rem; padding: 0.6875rem 1.25rem 0.6875rem 0.75rem; border-radius: 999px; font-family: var(--font-archivo); font-size: 0.906em; font-weight: 500; border: 1px solid var(--brdr-color); background: var(--white); color: #33405c;}
.dim-tab .badge{ width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125em; background: var(--soft); color: var(--tint);}
.dim-tab.active{ background: var(--tint); border-color: var(--tint); color: var(--white);}
.dim-tab.active .badge{ background: rgba(255,255,255,0.22); color: var(--white);}
.dim-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch;}
.dim-panel{ display: none;}
.dim-panel.active{ display: contents;}
.dim-main{ background: var(--tint); color: var(--white); border-radius: 16px; padding: 1.875rem 1.75rem; min-width: 0; display: flex; flex-direction: column;}
.dim-main h3{ font-size: 2.125em; letter-spacing: -0.03em; margin: 0 0 1rem;}
.dim-main p{ color: var(--white); font-size: 1.09em; line-height: 1.6; margin: 0 0 1.25rem;}
.dim-main .dim-inter{ border-top: 1px solid rgba(255,255,255,0.3); padding-top: 1rem; margin-top: auto;}
.dim-main .dim-inter span{ display: block; font-family: var(--font-archivo); font-size: 0.75em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; margin: 0 0 0.5rem;}
.dim-main .dim-inter p{ font-size: 0.97em; margin: 0;}
.dim-facets h4{ font-size: 1.25em; margin: 0 0 1.125rem;}
.dim-facets ul{ display: flex; flex-direction: column; gap: 0.9375rem;}
.dim-facets li strong{ display: inline-flex; align-items: center; justify-content: center; text-align: center; min-width: 210px; padding: 0.5625rem 1.125rem; border-radius: 999px; background: var(--soft); color: #33405c; font-family: var(--font-archivo); font-size: 0.875em; font-weight: 600;}
.dim-facets li p{ font-size: 0.906em; line-height: 1.55; color: #5a6478; margin: 0.5rem 0 0;}
.dim-legend span.eyebrow{ color: var(--text-light); font-size: 0.78em; margin-bottom: 1.125rem;}
.dim-legend ul{ display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 1.25rem;}
.dim-legend li{ display: flex; align-items: center; gap: 0.875rem; cursor: pointer;}
.dim-legend li i{ width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-archivo); font-weight: 700; font-size: 0.875em; background: var(--tint); color: var(--white);}
.dim-legend li em{ font-style: normal; font-family: var(--font-archivo); font-size: 1.0625em; font-weight: 500;}
.dim-legend li.active em{ font-weight: 700;}
.dim-legend .dim-note{ border-top: 1px solid #f5eadc; padding-top: 1rem; font-size: 0.9375em; color: var(--text-light);}
.dim-legend figure{ margin-top: 1.125rem; border: 1px solid var(--brdr-color); border-radius: 12px; padding: 0.75rem; display: flex; align-items: center; justify-content: center;}
/* How it works */
.how-grid{ display: grid; grid-template-columns: 1fr 2fr; gap: 2.5rem; align-items: center;}
.how-grid .title-sec{ padding-bottom: 1.5rem;}
.how-grid .title-sec p{ font-size: 1.125em; color: var(--text-gray);}
.how-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem;}
.how-card{ background: var(--white); border: 1px solid var(--brdr-color); border-radius: 16px; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 0.875rem;}
.how-card .how-icon{ width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.25rem;}
.how-card .how-icon .bars{ height: 34px; gap: 5px;}
.how-card .how-icon .bars span{ width: 9px; border-radius: 2px;}
.how-card .how-icon .circles{ position: relative; display: block; width: 62px; height: 40px;}
.how-card .how-icon .circles span{ position: absolute; top: 0; width: 40px; height: 40px; border-radius: 50%;}
.how-card .how-icon .circles span:first-child{ left: 0; background: rgba(108,79,216,0.34);}
.how-card .how-icon .circles span:last-child{ right: 0; background: rgba(238,122,43,0.48);}
.how-card .how-icon .bolt{ font-size: 2em; line-height: 1; color: var(--green);}
.how-card h3{ font-size: 1.25em;}
.how-card p{ font-size: 0.97em; color: #5a6478;}
/* Stress revealer */
.stress-sec{ border-top: 1px solid var(--brdr-blue); border-bottom: 1px solid var(--brdr-blue);}
.stress-head{ display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: baseline; border-bottom: 1px solid #b9d3e8; padding-bottom: 1rem; margin-bottom: 1.75rem;}
.stress-head .pill{ background: var(--blue); border-color: var(--blue); color: var(--white); font-size: 0.8125em; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; padding: 0.5625rem 1.125rem; margin-bottom: 1rem;}
.stress-head .pill .bars{ height: 13px; color: var(--white);}
.stress-head .pill .bars span{ width: 3px; border-radius: 0; opacity: 1;}
.stress-head h2{ font-size: 2.5em; line-height: 1.06;}
.stress-grid{ display: grid; grid-template-columns: 1fr 2fr; gap: 1.75rem; align-items: stretch;}
.stress-list{ display: flex; flex-direction: column;}
.stress-list ul{ display: flex; flex-direction: column; gap: 0.375rem;}
.stress-list li{ display: flex; align-items: center; gap: 0.75rem; padding: 0.8125rem 1rem; border-radius: 12px; font-size: 1em; border: 1px solid var(--brdr-blue); color: var(--text-gray); cursor: pointer;}
.stress-list li i{ width: 24px; height: 24px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-archivo); font-size: 0.75em; font-weight: 700; background: #cadeee; color: #5b6b80;}
.stress-list li.active{ background: var(--white); border-color: var(--blue); color: var(--text-color); font-weight: 600;}
.stress-list li.active i{ background: var(--blue); color: var(--white);}
.stress-cta{ margin-top: auto; padding-top: 0.875rem;}
.stress-cta-in{ background: var(--blue); color: var(--white); border-radius: 16px; padding: 2.125rem 1.875rem; display: flex; flex-direction: column;}
.stress-cta-in .bars{ height: 22px; gap: 4px; margin-bottom: 1.375rem; color: var(--white);}
.stress-cta-in .bars span{ width: 6px; border-radius: 2px;}
.stress-cta-in h3{ font-size: 1.4375em; line-height: 1.16; margin: 0 0 1.25rem;}
.stress-cta-in .bttn{ align-self: flex-start; background: var(--white); border-color: var(--white); color: var(--blue-dark); padding: 0.8125rem 1.5rem; font-size: 0.906em;}
.stress-cta-in .bttn:hover{ background: var(--primary); border-color: var(--primary); color: var(--white);}
.stress-detail{ display: none; flex-direction: column; gap: 0.375rem;}
.stress-detail.active{ display: flex;}
.stress-card{ background: var(--white); border: 1px solid var(--brdr-blue); border-radius: 16px; padding: 1.75rem 1.625rem;}
.stress-card .eyebrow{ color: var(--blue); font-size: 0.75em; letter-spacing: 0.16em;}
.stress-card h3{ font-size: 1.75em; letter-spacing: -0.03em; margin: 0 0 0.75rem;}
.stress-card p{ font-size: 1.0625em; line-height: 1.65;}
.stress-table{ background: var(--white); border: 1px solid var(--brdr-blue); border-radius: 16px; overflow: hidden;}
.stress-table h4{ padding: 1rem 1.625rem; border-bottom: 1px solid #e4eef6; font-size: 1.0625em;}
.stress-table dl{ margin: 0;}
.stress-table dl > div{ display: grid; grid-template-columns: minmax(115px, 0.38fr) minmax(0, 1fr); gap: 1.125rem; padding: 1rem 1.625rem; border-bottom: 1px solid #e4eef6;}
.stress-table dl > div:last-child{ border-bottom: none;}
.stress-table dt{ font-family: var(--font-archivo); font-size: 0.75em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);}
.stress-table dd{ margin: 0; font-size: 1em; line-height: 1.6; color: #22304f;}
.stress-table.influence-table dl > div{ grid-template-columns: minmax(115px, 0.34fr) minmax(0, 1fr) auto; align-items: center;}
.stress-table.influence-table .level-cell{ display: flex; justify-content: flex-end;}
.stress-table.influence-table .lvl-chip{ margin-left: 0;}
.stress-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem;}
.stress-two .stress-card{ padding: 1.625rem 1.5rem;}
.stress-two .stress-card:first-child{ background: #eff6fc;}
.stress-two .stress-card .eyebrow{ font-size: 0.75em; letter-spacing: 0.14em; margin-bottom: 0.25rem;}
.stress-two .stress-card small{ display: block; font-size: 0.875em; color: var(--text-muted); margin-bottom: 0.75rem;}
.stress-two .stress-card p{ font-size: 1em; line-height: 1.68;}
/* Report readings */
.report-sec .container{ padding-top: 4.125rem; padding-bottom: 4.125rem;}
.report-sec .title-sec{ max-width: 34em;}
.report-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;}
.report-card{ background: var(--white); border: 1px solid var(--brdr-color); border-left: 4px solid var(--tint); border-radius: 14px; padding: 1.625rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0;}
.report-card .tag{ display: inline-block; align-self: flex-start; padding: 0.375rem 0.875rem; border-radius: 999px; background: var(--soft); color: var(--tint); font-family: var(--font-archivo); font-size: 0.72em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.625rem;}
.report-card h3{ font-size: 1.5em; letter-spacing: -0.028em;}
.report-card p{ font-size: 1.03em; line-height: 1.62;}
.report-card ul{ display: flex; flex-direction: column; gap: 0.5625rem;}
.report-card ul li{ position: relative; padding-left: 16px; font-size: 0.9375em; line-height: 1.5; color: #33405c;}
.report-card ul li:before{ content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--tint);}
/* Try the assessment */
.try-sec{ border-top: 1px solid var(--brdr-peach); border-bottom: 1px solid var(--brdr-peach);}
.try-head{ display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 2.125rem;}
.try-head .pill{ border-color: var(--brdr-peach); font-size: 2em; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; padding: 1rem 2.25rem; margin-bottom: 0.875rem;}
.try-head .pill .dots{ display: flex; gap: 4px;}
.try-head .pill .dots span{ width: 13px; height: 13px; border-radius: 50%; display: block;}
.try-head h2{ font-size: 1.4125em; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-light);}
.try-grid{ display: grid; grid-template-columns: 1fr 2fr; gap: 2.25rem; align-items: start;}
.try-side > p{ font-size: 1.125em; line-height: 1.6; max-width: 26em; margin: 0 0 1.375rem;}
.try-tiles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-bottom: 1.375rem;}
.try-tile{ background: var(--white); border: 1px solid var(--brdr-peach); border-radius: 13px; padding: 1.125rem 1rem; min-width: 0;}
.try-tile strong{ display: block; font-family: var(--font-archivo); font-weight: 800; font-size: 1.4375em; line-height: 1; letter-spacing: -0.03em; margin: 0 0 0.375rem;}
.try-tile em{ font-style: normal; font-family: var(--font-archivo); font-size: 0.6875em; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-light);}
.try-progress{ background: var(--white); border: 1px solid var(--brdr-peach); border-radius: 16px; padding: 1.375rem 1.5rem; margin-bottom: 1rem;}
.try-progress .tp-top{ display: flex; align-items: center; gap: 1rem; margin-bottom: 0.875rem;}
.try-progress .tp-pct{ font-family: var(--font-archivo); font-weight: 800; font-size: 2.125em; line-height: 1; color: var(--secondary); font-variant-numeric: tabular-nums;}
.try-progress .tp-bar{ height: 9px; border-radius: 99px; background: #f7e3d6; overflow: hidden; margin-bottom: 0.5rem;}
.try-progress .tp-bar i{ display: block; height: 100%; width: 2%; background: linear-gradient(90deg, #e2603a, #f0a07a); border-radius: 99px; transition: width 0.4s ease;}
.try-progress .tp-label{ font-size: 0.906em; color: var(--text-light);}
.try-progress .tp-map{ border-top: 1px solid #f6e3d6; padding-top: 0.875rem; display: flex; align-items: center; gap: 0.6875rem; font-family: var(--font-archivo); font-size: 1em; font-weight: 500; color: #33405c;}
.try-progress .tp-map:before{ content: "\2726"; color: var(--secondary);}
.try-trust{ background: var(--white); border: 1px solid var(--brdr-peach); border-radius: 16px; padding: 1.5rem;}
.try-trust h3{ display: flex; align-items: center; gap: 0.75rem; font-size: 1.156em; margin: 0 0 1rem;}
.try-trust h3 i{ width: 38px; height: 38px; border-radius: 10px; background: var(--mint); color: var(--green); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700;}
.try-trust ul.tick-list li{ margin-bottom: 0.75rem; font-size: 1em;}
.try-q{ background: var(--white); border: 1px solid var(--brdr-peach); border-radius: 14px; padding: 1.25rem 1.5rem; margin-bottom: 0.75rem; display: flex; gap: 1.375rem; flex-wrap: wrap; align-items: center; justify-content: space-between; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;}
.try-q.done{ border-color: #efb89a;}
.try-q .q-text{ font-family: var(--font-archivo); font-size: 1.09em; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; min-width: 0; flex: 1 1 280px;}
.try-q .q-scale{ display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;}
.try-q .q-scale > em{ font-style: normal; font-size: 0.84em; color: #8a93a8; min-width: 58px;}
.try-q .q-scale > em:last-child{ min-width: 40px; text-align: right;}
.try-q .q-opts{ display: flex; align-items: center; gap: 0.6875rem;}
.try-q .q-opts button{ border-radius: 50%; border: 2px solid var(--ink); background: transparent; padding: 0; transition: all 0.18s ease;}
.try-q .q-opts button.on{ background: var(--ink); box-shadow: 0 0 0 5px rgba(226,96,58,0.15);}
.try-q .q-opts button:nth-child(1), .try-q .q-opts button:nth-child(5){ width: 30px; height: 30px;}
.try-q .q-opts button:nth-child(2), .try-q .q-opts button:nth-child(4){ width: 25px; height: 25px;}
.try-q .q-opts button:nth-child(3){ width: 21px; height: 21px;}
.try-q .q-opts .live-q-option{ position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;}
.try-q .q-opts .live-q-option input{ position: absolute; inset: 0; opacity: 0; cursor: pointer;}
.try-q .q-opts .live-q-option span{ display: block; border-radius: 50%; border: 2px solid var(--ink); background: transparent; transition: all 0.18s ease;}
.try-q .q-opts .live-q-option input:checked + span{ background: var(--ink); box-shadow: 0 0 0 5px rgba(226,96,58,0.15);}
.try-q .q-opts .live-q-option:nth-child(1) span,
.try-q .q-opts .live-q-option:nth-child(5) span{ width: 30px; height: 30px;}
.try-q .q-opts .live-q-option:nth-child(2) span,
.try-q .q-opts .live-q-option:nth-child(4) span{ width: 25px; height: 25px;}
.try-q .q-opts .live-q-option:nth-child(3) span{ width: 21px; height: 21px;}
.try-q:hover{ transform: scale(1.02); border-color: var(--secondary); box-shadow: 0 16px 32px -18px rgba(226,96,58,0.45); position: relative; z-index: 2;}
.try-q .q-opts .live-q-option:hover span{ transform: scale(1.2); box-shadow: 0 0 0 4px rgba(226,96,58,0.12);}
.try-q.question-error{ border-color: #d60000; box-shadow: 0 0 0 4px rgba(214,0,0,0.08);}
.assessment-complete-card{ width: 100%; justify-content: center;}
.try-sec.answering .try-grid{ grid-template-columns: 1fr; gap: 1.25rem;}
.try-sec.answering .try-side{ display: contents;}
.try-sec.answering .try-tiles,
.try-sec.answering .try-trust,
.try-sec.answering .tp-map{ display: none;}
.try-sec.answering .try-progress{ position: sticky; top: 83px; z-index: 50; margin-bottom: 0; padding: 1rem 1.5rem; box-shadow: 0 12px 24px -18px rgba(16,28,61,0.35);}
.try-sec.answering .try-progress .tp-top{ margin-bottom: 0;}
.try-progress .try-note{ font-size: 1em; line-height: 1.5; margin: 0 0 0.75rem; max-width: none;}
.try-page{ display: none;}
.try-page.active{ display: block;}
.try-nav{ display: flex; align-items: center; gap: 0.875rem; margin-top: 1.25rem; flex-wrap: wrap;}
.try-nav .bttn-white{ border-color: #f0c7ae; padding: 0.875rem 1.625rem; font-size: 0.906em;}
.try-nav .try-pager{ display: flex; gap: 0.4375rem; flex-wrap: wrap; margin: 0 auto;}
.try-nav .try-pager button{ min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-archivo); font-size: 0.875em; font-weight: 600; border: 1px solid #f0c7ae; background: var(--white); color: #44506b;}
.try-nav .try-pager button.active{ background: var(--primary); border-color: var(--primary); color: var(--white);}
.try-nav .try-pager button:disabled{ color: #c9a895; opacity: 0.55; cursor: default;}
.try-nav .bttn-orange{ padding: 0.875rem 2rem; font-size: 0.906em;}
/* Testimonials */
.testi-sec .container{ padding-top: 3.625rem; padding-bottom: 3.625rem;}
.testi-head{ display: flex; align-items: baseline; gap: 1.125rem; flex-wrap: wrap; border-bottom: 2px solid var(--primary); padding-bottom: 0.75rem; margin-bottom: 1.75rem;}
.testi-head h2{ font-size: 2.125em;}
.testi-head .eyebrow{ color: var(--text-light); font-size: 0.75em; margin: 0 0 0 auto;}
.testi-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;}
.testi-card{ margin: 0; padding: 0 1.75rem; display: flex; flex-direction: column; min-width: 0;}
.testi-card + .testi-card{ border-left: 1px solid #e7dac6;}
.testi-card blockquote{ margin: 0 0 1.25rem; font-size: 1.125em; line-height: 1.5; color: #22304f;}
.testi-card figcaption{ margin-top: auto; display: flex; align-items: center; gap: 0.75rem;}
.testi-card figcaption i{ width: 44px; height: 44px; flex: none; background: var(--tint); color: var(--white); display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-archivo); font-weight: 700; font-size: 0.875em;}
.testi-card figcaption strong{ display: block; font-family: var(--font-archivo); font-size: 0.906em; font-weight: 600;}
.testi-card figcaption em{ font-size: 0.906em; color: var(--text-muted);}
/* Short reads */
.reads-sec{ border-bottom: 1px solid #e7dac6;}
.reads-sec .container{ padding-top: 3.75rem; padding-bottom: 3.75rem;}
.reads-sec h2{ font-size: 2.25em; text-align: center; margin: 0 0 1.25rem;}
.reads-topics{ display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.875rem;}
.reads-topics a{ padding: 0.6875rem 1.25rem; font-family: var(--font-archivo); font-size: 0.75em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--brdr-sand); color: #44506b;}
.reads-topics a.active, .reads-topics a:hover{ background: var(--primary); border-color: var(--primary); color: var(--white);}
.reads-feature{ display: grid; grid-template-columns: 2fr 1fr; gap: 2.125rem; align-items: center; border-top: 1px solid var(--brdr-sand); padding: 1.75rem 0;}
.reads-feature figure{ height: 330px; background: var(--white); border: 1px solid var(--brdr-sand); overflow: hidden;}
.reads-feature figure img{ width: 100%; height: 100%; object-fit: cover; display: block;}
.reads-feature .eyebrow{ color: var(--text-light); font-size: 0.75em; letter-spacing: 0.16em;}
.reads-feature h3{ font-size: 2em; line-height: 1.1; margin: 0 0 0.875rem;}
.reads-feature p{ font-size: 1.03em; margin: 0 0 1.125rem;}
.reads-feature .read-more{ font-family: var(--font-archivo); font-size: 0.78em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary);}
.reads-feature .read-more:hover{ color: var(--primary);}
.reads-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--brdr-sand);}
.read-card{ display: block; padding: 1.625rem 1.75rem; color: inherit; min-width: 0;}
.read-card + .read-card{ border-left: 1px solid var(--brdr-sand);}
.read-card figure{ height: 180px; background: var(--white); border: 1px solid var(--brdr-sand); margin-bottom: 1rem; overflow: hidden;}
.read-card figure img{ width: 100%; height: 100%; object-fit: cover; display: block;}
.read-card .eyebrow{ color: var(--text-light); font-size: 0.72em; letter-spacing: 0.14em; margin-bottom: 0.5rem;}
.read-card h3{ font-size: 1.25em; line-height: 1.22; letter-spacing: -0.025em;}
.read-card:hover h3{ color: var(--secondary);}
/* Newsletter */
.news-sec{ border-top: 1px solid var(--brdr-color);}
.news-sec .container{ padding-top: 3.25rem; padding-bottom: 3.25rem;}
.news-box{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.875rem; align-items: center; background: var(--white); border: 1px solid var(--brdr-color); border-radius: 18px; padding: 2rem 2.25rem;}
.news-box h3{ font-size: 1.625em; letter-spacing: -0.025em; margin: 0 0 0.5rem;}
.news-box p{ font-size: 1em; color: #5a6478;}
.news-box form{ display: flex; gap: 0.625rem; flex-wrap: wrap; min-width: 0;}
.news-box input{ flex: 1 1 180px; min-width: 0; padding: 0.9375rem 1.125rem; border-radius: 999px; border: 1px solid var(--brdr-dark); font-family: var(--font-karla); font-size: 1em; background: var(--cream);}
.news-box input:focus{ border-color: var(--primary); outline: none;}
.news-box button{ padding: 0.9375rem 1.75rem; border-radius: 999px; border: none; background: var(--primary); color: var(--white); font-family: var(--font-archivo); font-weight: 600; font-size: 0.9375em;}
.news-box button:hover{ background: var(--secondary);}
/* Sample report */
.sample-sec{ border-top: 1px solid var(--brdr-color);}
.sample-sec .container{ padding-top: 3.875rem; padding-bottom: 4.375rem;}
.sample-sec .title-sec{ padding-bottom: 1.875rem;}
.sample-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem;}
.sample-card{ display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--brdr-color); border-radius: 16px; overflow: hidden; color: inherit; min-width: 0;}
.sample-card:hover{ box-shadow: 0 18px 40px -30px rgba(16,28,61,0.35); transform: translateY(-2px);}
.sample-card figure{ height: 132px; flex: none; border-bottom: 1px solid #f5eadc; background: var(--cream-dark); overflow: hidden;}
.sample-card figure img{ width: 100%; height: 100%; object-fit: cover; display: block;}
.sample-card .sc-cont{ padding: 1.375rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5625rem; flex: 1;}
.sample-card .sc-num{ font-family: var(--font-archivo); font-size: 0.78em; font-weight: 700; letter-spacing: 0.1em; color: var(--tint);}
.sample-card h3{ font-size: 1.22em; letter-spacing: -0.025em;}
.sample-card p{ font-size: 0.97em; line-height: 1.58; color: #5a6478;}
.sample-card .sc-link{ margin-top: auto; padding-top: 0.375rem; font-family: var(--font-archivo); font-size: 0.875em; font-weight: 600; color: var(--tint);}
/* Footer */
.main-footer{ background: var(--primary); color: var(--footer-text);}
.main-footer .footer-top{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding: 3.5rem 0 1.875rem;}
.main-footer .footer-logo img{ height: 56px; width: auto; display: block; background: var(--white); border-radius: 10px; padding: 0.5rem 0.75rem; margin-bottom: 1.125rem;}
.main-footer .footer-about p{ font-size: 0.9375em; line-height: 1.6; max-width: 22em; color: var(--footer-text); margin-bottom: 1.125rem;}
.main-footer .footer-brand{ border-left: 2px solid #5fd9c6; padding-left: 0.75rem; display: inline-flex; flex-direction: column; gap: 3px;}
.main-footer .footer-brand span{ font-family: var(--font-archivo); font-size: 0.6875em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;}
.main-footer .footer-brand strong{ font-family: var(--font-archivo); font-weight: 700; font-size: 1.25em; letter-spacing: 0.12em; color: var(--white);}
.main-footer h4{ font-family: var(--font-archivo); font-size: 0.6875em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #6f82ab; margin: 0 0 0.875rem;}
.main-footer .footer-menu ul{ display: flex; flex-direction: column; gap: 0.5625rem; font-size: 0.97em;}
.main-footer .footer-menu ul li a{ color: var(--footer-text);}
.main-footer .footer-menu ul li a:hover{ color: var(--white);}
.main-footer .footer-bottom{ padding: 1.125rem 0 2.375rem; font-size: 0.875em; color: #7488ac; border-top: 1px solid #2a3a63;}
/* AOS-free reveal */
.rise{ animation: rise 0.7s ease both;}
.fadein{ animation: fadein 1s ease both;}
@keyframes rise{ from{ opacity: 0; transform: translateY(16px);} to{ opacity: 1; transform: none;} }
@keyframes fadein{ from{ opacity: 0;} to{ opacity: 1;} }
/* ===================== Analysis / report page ===================== */
.report-nav{ position: sticky; top: 83px; z-index: 50; background: rgba(253,248,240,0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--brdr-color);}
.report-nav .container{ position: relative;}
.report-nav ul{ display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;}
.report-nav ul::-webkit-scrollbar{ display: none;}
.report-nav ul li a{ display: block; padding: 0.875rem 1rem; font-family: var(--font-archivo); font-size: 0.84em; font-weight: 600; color: var(--text-light); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;}
.report-nav ul li a:hover, .report-nav ul li a.active{ color: var(--primary); border-color: var(--secondary);}
.report-progress{ position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: transparent;}
.report-progress i{ display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--secondary), var(--purple)); transition: width 0.15s linear;}
/* Report hero */
.report-hero .container{ padding-top: 3.25rem; padding-bottom: 2.5rem;}
.rh-grid{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; padding-bottom: 2.25rem;}
.rh-cont h1{ font-size: 4.5em; margin: 0 0 1.25rem;}
.rh-meta{ display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0 0 1.25rem;}
.rh-meta li{ display: flex; flex-direction: column; gap: 2px; background: var(--white); border: 1px solid var(--brdr-color); border-radius: 12px; padding: 0.625rem 1rem; min-width: 96px;}
.rh-meta li span{ font-family: var(--font-archivo); font-size: 0.68em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light);}
.rh-meta li strong{ font-family: var(--font-archivo); font-size: 1em;}
.rh-pattern{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; background: var(--primary); color: var(--white); border-radius: 999px; padding: 0.625rem 1.25rem 0.625rem 1rem; margin: 0 0 1.625rem;}
.rh-pattern span{ font-family: var(--font-archivo); font-size: 0.68em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--footer-text);}
.rh-pattern strong{ font-family: var(--font-archivo); font-size: 0.9375em; letter-spacing: 0.04em;}
.rh-pattern em{ font-style: normal; font-family: var(--font-archivo); font-size: 0.8125em; font-weight: 600; background: var(--secondary); border-radius: 999px; padding: 0.25rem 0.75rem;}
.rh-chart-card{ background: var(--white); border: 1px solid var(--brdr-color); border-radius: 18px; padding: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; box-shadow: 0 26px 60px -34px rgba(16,28,61,0.35);}
.radar{ width: 100%; max-width: 300px; margin: 0 auto; display: block; overflow: visible;}
.radar .rd-grid{ fill: none; stroke: var(--brdr-color); stroke-width: 1;}
.radar .rd-axis{ stroke: var(--brdr-dark); stroke-width: 1; stroke-dasharray: 2 3;}
.radar .rd-area{ fill: rgba(108,79,216,0.16); stroke: var(--purple); stroke-width: 2.5; stroke-linejoin: round; transform-origin: 150px 150px; transform: scale(0.2); opacity: 0; transition: transform 1.1s cubic-bezier(0.2,0.8,0.2,1), opacity 0.6s ease;}
.radar.in .rd-area{ transform: scale(1); opacity: 1;}
.radar .rd-dot{ fill: var(--tint); stroke: var(--white); stroke-width: 2; opacity: 0; transition: opacity 0.4s ease 0.9s;}
.radar.in .rd-dot{ opacity: 1;}
.radar .rd-lab circle{ fill: var(--tint);}
.radar .rd-lab text{ fill: var(--white); font-family: var(--font-archivo); font-weight: 700; font-size: 14px; text-anchor: middle;}
.rh-legend{ display: flex; flex-direction: column; gap: 0.5rem;}
.rh-leg{ display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 12px; border: 1px solid transparent;}
.rh-leg:hover{ background: var(--soft); border-color: var(--soft);}
.rh-leg i{ width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-archivo); font-weight: 700; font-size: 0.8125em; background: var(--tint); color: var(--white);}
.rh-leg span{ display: flex; flex-direction: column; min-width: 0; flex: 1;}
.rh-leg strong{ font-family: var(--font-archivo); font-size: 0.9375em; line-height: 1.2;}
.rh-leg em{ font-style: normal; font-size: 0.78em; color: var(--text-light);}
.rh-leg b{ font-family: var(--font-archivo); font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tint); background: var(--soft); padding: 0.25rem 0.5rem; border-radius: 999px; white-space: nowrap; width: 112px; min-height: 30px; text-align: center; display: inline-flex; align-items: center; justify-content: center;}
.trait-tiles{ position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.625rem; background: var(--white); border: 1px solid var(--brdr-color); border-radius: 18px; padding: 0.625rem; margin-bottom: -2.375rem; box-shadow: 0 18px 40px -30px rgba(16,28,61,0.25);}
.trait-tile{ display: flex; align-items: center; gap: 0.875rem; background: var(--soft); border-radius: 13px; padding: 0.875rem 1rem; min-width: 0; transition: transform 0.25s ease;}
.trait-tile:hover{ transform: translateY(-3px);}
.trait-tile .ring{ width: 64px; height: 64px; flex: none; transform: rotate(-90deg);}
.ring-bg{ fill: none; stroke: rgba(255,255,255,0.9); stroke-width: 7;}
.ring-fg{ fill: none; stroke: var(--tint); stroke-width: 7; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.4s cubic-bezier(0.2,0.8,0.2,1);}
.in .ring-fg{ stroke-dashoffset: calc(var(--len) * (1 - var(--pct) / 100));}
.ring-txt{ fill: var(--tint); font-family: var(--font-archivo); font-weight: 800; font-size: 20px; text-anchor: middle; transform: rotate(90deg); transform-origin: 32px 32px;}
.trait-tile div{ display: flex; flex-direction: column; min-width: 0;}
.trait-tile strong{ font-family: var(--font-archivo); font-weight: 800; font-size: 1.5em; line-height: 1; color: var(--text-color);}
.trait-tile span{ font-family: var(--font-archivo); font-size: 0.8125em; font-weight: 600; color: var(--text-color); margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.trait-tile em{ font-style: normal; font-size: 0.72em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tint);}
/* Deep mind */
.deep-sec .container{ padding-top: 5rem;}
.deep-grid{ display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.75rem; align-items: start;}
.deep-grid .title-sec{ padding-bottom: 1.5rem;}
.equation{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem;}
.equation i{ font-style: normal; font-family: var(--font-archivo); font-weight: 700; font-size: 1.25em; color: var(--text-light);}
.eq-chip{ display: inline-block; padding: 0.5rem 0.9375rem; border-radius: 999px; background: var(--soft); color: var(--tint); font-family: var(--font-archivo); font-size: 0.875em; font-weight: 600; border: 1px solid transparent;}
.eq-result{ background: var(--primary); color: var(--white); --tint: #fff;}
.deep-card{ padding: 2rem 2.125rem; border-left: 4px solid var(--purple); position: relative;}
.deep-card:before{ content: "\201C"; position: absolute; right: 1.25rem; top: 0.25rem; font-family: var(--font-archivo); font-size: 6em; line-height: 1; color: var(--lilac);}
.deep-card p{ font-size: 1.09em; line-height: 1.7; position: relative;}
.deep-tags{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--brdr-color);}
.deep-tags span{ padding: 0.375rem 0.75rem; border-radius: 999px; background: var(--cream-dark); font-family: var(--font-archivo); font-size: 0.78em; font-weight: 600; color: #33405c;}
/* Facets */
.facets-sec .title-sec{ max-width: 720px;}
.facet-tabs{ margin-bottom: 1.5rem;}
.facet-panel{ display: none; grid-template-columns: 300px 1fr; gap: 1.25rem; align-items: start;}
.facet-panel.active{ display: grid; animation: rise 0.5s ease both;}
.facet-wheel{ text-align: center; position: sticky; top: 150px;}
.facet-wheel .wheel{ width: 100%; max-width: 220px; margin: 0 auto 0.75rem; display: block;}
.wheel-grid{ fill: none; stroke: var(--brdr-color);}
.wheel path{ fill: var(--tint); opacity: 0.85; stroke: var(--white); stroke-width: 2; transform-origin: 100px 100px; transform: scale(0); transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1) calc(var(--i) * 80ms), opacity 0.2s ease; cursor: pointer;}
.in .wheel path{ transform: scale(1);}
.wheel path:hover{ opacity: 1;}
.wheel-core{ fill: var(--white); stroke: var(--tint); stroke-width: 2;}
.wheel-txt{ fill: var(--tint); font-family: var(--font-archivo); font-weight: 800; font-size: 20px; text-anchor: middle;}
.facet-wheel strong{ display: block; font-family: var(--font-archivo); font-size: 1.375em; letter-spacing: -0.02em;}
.facet-wheel em{ display: block; font-style: normal; font-family: var(--font-archivo); font-size: 0.78em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tint); margin: 0.25rem 0 0.875rem;}
.facet-wheel p{ font-size: 0.9375em; line-height: 1.55;}
.facet-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;}
.facet-card{ display: flex; flex-direction: column; gap: 0.75rem; transition: transform 0.25s ease, box-shadow 0.25s ease;}
.facet-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px -30px rgba(16,28,61,0.35);}
.facet-card header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;}
.facet-card h3{ font-size: 1.125em;}
.facet-score{ display: flex; flex-direction: column; align-items: flex-end; flex: none;}
.facet-score b{ font-family: var(--font-archivo); font-weight: 800; font-size: 1.5em; line-height: 1; color: var(--tint);}
.facet-score i{ font-style: normal; font-size: 0.68em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light);}
.facet-card p{ font-size: 0.9375em; line-height: 1.55; flex: 1;}
.fbar-track{ height: 10px; border-radius: 99px; background: var(--cream-dark); overflow: hidden;}
.fbar-track i{ display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--tint), color-mix(in srgb, var(--tint) 60%, white)); transition: width 1.2s cubic-bezier(0.2,0.8,0.2,1);}
.in .fbar-track i{ width: calc(var(--pct) * 1%);}
.fbar-ticks{ display: flex; justify-content: space-between; font-size: 0.68em; color: var(--text-light); margin-top: 0.25rem; font-family: var(--font-archivo);}
/* Dashboard cards */
.sec-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem;}
.sec-head .bttn{ flex: none; margin-top: 2.25rem;}
.domain-key{ display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1.5rem;}
.domain-key span{ display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-archivo); font-size: 0.78em; font-weight: 600; color: var(--text-gray);}
.domain-key span i{ width: 12px; height: 12px; border-radius: 4px; background: var(--tint);}
.dash-grid, .career-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;}
.dash-card{ position: relative; text-align: left; display: flex; flex-direction: column; gap: 0.625rem; padding: 1.5rem 1.5rem 1.375rem; border-top: 4px solid var(--tint); font-family: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease; overflow: hidden;}
.dash-card:before{ content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--soft); transition: transform 0.35s ease;}
.dash-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px -30px rgba(16,28,61,0.4);}
.dash-card:hover:before{ transform: scale(2.2);}
.dash-card > *{ position: relative;}
.dc-num{ font-family: var(--font-archivo); font-weight: 800; font-size: 1.5em; color: var(--tint); line-height: 1;}
.dc-dom{ font-family: var(--font-archivo); font-size: 0.68em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tint);}
.dash-card h3{ font-size: 1.22em; letter-spacing: -0.02em; color: var(--text-color);}
.dash-card p{ font-size: 0.9375em; line-height: 1.55; flex: 1;}
.dc-open{ font-family: var(--font-archivo); font-size: 0.84em; font-weight: 600; color: var(--tint); margin-top: 0.375rem;}
.dc-open i{ font-style: normal; display: inline-block; transition: transform 0.25s ease;}
.dash-card:hover .dc-open i{ transform: translateX(4px);}
/* Career top */
.career-top{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;}
.career-paths ol{ display: flex; flex-direction: column; gap: 0.875rem; margin: 0 0 1.125rem;}
.career-paths li{ display: flex; gap: 0.875rem; align-items: flex-start;}
.career-paths li i{ width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-archivo); font-weight: 800; background: var(--primary); color: var(--white);}
.career-paths li strong{ display: block; font-family: var(--font-archivo); font-size: 1.0625em; margin-bottom: 0.25rem;}
.career-paths li p{ font-size: 0.9375em; line-height: 1.55;}
.career-backup{ border-top: 1px solid var(--brdr-color); padding-top: 0.875rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;}
.career-backup span{ font-family: var(--font-archivo); font-size: 0.72em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin-right: 0.25rem;}
.career-backup em{ font-style: normal; padding: 0.375rem 0.75rem; border-radius: 999px; background: var(--sky); color: var(--blue); font-family: var(--font-archivo); font-size: 0.8125em; font-weight: 600;}
.intel-bars{ display: flex; flex-direction: column; gap: 0.625rem;}
.intel-bars li{ display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: center; gap: 0.75rem;}
.intel-bars li span{ font-family: var(--font-archivo); font-size: 0.875em; font-weight: 600; display: flex; flex-direction: column; min-width: 0;}
.intel-bars li span em{ font-style: normal; font-family: var(--font-karla); font-size: 0.8em; font-weight: 400; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ibar{ height: 8px; border-radius: 99px; background: var(--cream-dark); overflow: hidden;}
.ibar i{ display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--purple), var(--blue)); transition: width 1.2s cubic-bezier(0.2,0.8,0.2,1);}
.in .ibar i{ width: calc(var(--pct) * 1%);}
.intel-bars li b{ font-family: var(--font-archivo); font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); min-width: 68px; text-align: right;}
/* Stress meter additions */
.stress-head .stress-intro{ flex: 1 1 320px; max-width: 34em; font-size: 1.03em;}
.stress-list li b.risk{ margin-left: auto;}
.risk-critical{ color: #2a6fa8;} .stress-list li b.risk-critical{ background: #edf4fa; color: #2a6fa8;}
.risk-high{ color: #e2603a;} .stress-list li b.risk-high{ background: #fff3ec; color: #e2603a;}
.risk-moderate{ color: #1f9e8d;} .stress-list li b.risk-moderate{ background: #e6f6f2; color: #1f9e8d;}
.risk-low{ color: #8a9099;} .stress-list li b.risk-low{ background: #f0f2f4; color: #8a9099;}
.stress-top{ display: grid; grid-template-columns: 1fr 200px; gap: 0.375rem;}
.gauge-card{ background: var(--white); border: 1px solid var(--brdr-blue); border-radius: 16px; padding: 1.25rem 1rem 1rem; display: flex; flex-direction: column; align-items: center; text-align: center;}
.gauge{ width: 100%; max-width: 160px;}
.g-track{ fill: none; stroke: #e4eef6; stroke-width: 12; stroke-linecap: round;}
.g-fill{ fill: none; stroke: url(#gaugeGrad); stroke: var(--secondary); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 157; stroke-dashoffset: 157; transition: stroke-dashoffset 1.2s cubic-bezier(0.2,0.8,0.2,1);}
.in .g-fill{ stroke-dashoffset: calc(157 * (1 - var(--pct) / 100));}
.g-needle{ stroke: var(--primary); stroke-width: 3; stroke-linecap: round;}
.g-pin{ fill: var(--primary);}
.gauge-card strong{ font-family: var(--font-archivo); font-size: 1.375em; letter-spacing: -0.02em; margin-top: 0.25rem;}
.gauge-card span{ font-family: var(--font-archivo); font-size: 0.68em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light);}
.stress-table h4 small{ display: block; font-family: var(--font-karla); font-weight: 400; font-size: 0.8em; color: var(--text-light); margin-top: 2px;}
.lvl-chip{ display: inline-flex; align-items: center; justify-content: center; margin-left: 0.5rem; padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--sky); color: var(--blue); font-family: var(--font-archivo); font-size: 0.72em; font-weight: 700; width: 112px; min-height: 30px; text-align: center; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;}
.analysis-page .rh-leg b,
.analysis-page .facet-score i,
.analysis-page .intel-bars li b,
.analysis-page .stress-list li b.risk,
.analysis-page .gauge-card strong[class*="risk-"],
.analysis-page .lvl-chip,
.analysis-page .level-pill{ width: 112px; min-width: 112px; min-height: 30px; padding: 0.25rem 0.625rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-archivo); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.1; text-transform: uppercase; white-space: nowrap;}
.analysis-page .facet-score i,
.analysis-page .intel-bars li b,
.analysis-page .level-pill{ background: #edf4fa; color: #2a6fa8;}
.analysis-page .gauge-card strong[class*="risk-"]{ margin: 0.25rem auto 0;}
.analysis-page .risk-critical{ background: #edf4fa; color: #2a6fa8;}
.analysis-page .risk-high{ background: #fff3ec; color: #e2603a;}
.analysis-page .risk-moderate{ background: #e6f6f2; color: #1f9e8d;}
.analysis-page .risk-low{ background: #f0f2f4; color: #8a9099;}
.stress-card-good{ background: var(--mint) !important; border-color: #bfe6dc !important;}
.stress-card-good .eyebrow{ color: var(--green) !important;}
.beh{ padding: 0.875rem 0; border-top: 1px dashed var(--brdr-blue);}
.beh:first-of-type{ border-top: none; padding-top: 0.25rem;}
.beh p{ font-size: 0.97em; line-height: 1.6; margin-bottom: 0.5rem;}
.beh ol{ display: flex; flex-wrap: wrap; gap: 0.375rem; counter-reset: s;}
.beh ol li{ counter-increment: s; font-family: var(--font-archivo); font-size: 0.8125em; font-weight: 600; background: var(--white); border: 1px solid var(--brdr-blue); border-radius: 999px; padding: 0.3125rem 0.75rem 0.3125rem 0.5rem; display: inline-flex; align-items: center; gap: 0.375rem;}
.beh ol li:before{ content: counter(s); width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 0.72em; display: inline-flex; align-items: center; justify-content: center;}
.sketch{ margin-top: 0.375rem; background: var(--primary) !important; border-color: var(--primary) !important; color: var(--white);}
.sketch .eyebrow{ color: var(--footer-text) !important;}
.sketch p{ color: var(--white) !important; font-size: 1.03em !important;}
/* Modal */
.modal{ position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1.5rem;}
.modal.open{ display: flex;}
.modal-bg{ position: absolute; inset: 0; background: rgba(16,28,61,0.55); backdrop-filter: blur(4px); animation: fadein 0.25s ease both;}
.modal-box{ position: relative; width: 100%; max-width: 860px; max-height: calc(100vh - 3rem); background: var(--white); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; animation: rise 0.35s cubic-bezier(0.2,0.8,0.2,1) both; box-shadow: 0 40px 80px -30px rgba(16,28,61,0.5);}
.modal-head{ display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--brdr-color); background: var(--cream);}
.modal-who strong{ display: block; font-family: var(--font-archivo); font-size: 1em;}
.modal-who span{ font-size: 0.8125em; color: var(--text-light);}
.modal-step{ flex: 1; height: 6px; border-radius: 99px; background: var(--brdr-color); overflow: hidden; margin: 0 1rem;}
.modal-step i{ display: block; height: 100%; width: 0; background: var(--tint, var(--secondary)); border-radius: 99px; transition: width 0.4s ease;}
.modal-close{ width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--brdr-dark); background: var(--white); font-size: 1.375em; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--text-gray);}
.modal-close:hover{ background: var(--primary); border-color: var(--primary); color: var(--white);}
.modal-body{ padding: 1.75rem 2rem; overflow-y: auto; flex: 1;}
.modal-body > div{ animation: rise 0.35s ease both;}
.modal-body .m-tag{ display: inline-block; padding: 0.375rem 0.875rem; border-radius: 999px; background: var(--soft); color: var(--tint); font-family: var(--font-archivo); font-size: 0.72em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.875rem;}
.modal-body h2{ font-size: 1.875em; margin: 0 0 1rem; border-left: 4px solid var(--tint); padding-left: 0.875rem;}
.modal-body h3{ font-size: 1.0625em; margin: 1.25rem 0 0.5rem;}
.modal-body p{ font-size: 1.03em; line-height: 1.7; margin-bottom: 0.875rem;}
.m-list{ display: flex; flex-direction: column; gap: 0.625rem; margin: 0.5rem 0 1rem;}
.m-list li{ position: relative; padding-left: 1.25rem; font-size: 0.97em; line-height: 1.6; color: var(--text-gray);}
.m-list li:before{ content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--tint);}
.m-list li strong{ color: var(--text-color);}
.m-symptoms, .m-collapse{ background: var(--peach); border: 1px solid var(--brdr-peach); border-radius: 12px; padding: 1rem 1.25rem; margin: 0.5rem 0 1.25rem;}
.m-symptoms .eyebrow, .m-collapse .eyebrow{ margin-bottom: 0.5rem;}
.m-symptoms ul{ display: flex; flex-wrap: wrap; gap: 0.375rem;}
.m-symptoms li{ font-family: var(--font-archivo); font-size: 0.8125em; font-weight: 600; background: var(--white); border-radius: 999px; padding: 0.3125rem 0.75rem; color: var(--secondary-dark);}
.m-collapse p{ margin: 0; font-size: 0.97em;}
.m-table{ width: 100%; border-collapse: collapse; font-size: 0.9375em; margin: 0.25rem 0 1rem;}
.m-table th{ text-align: left; font-family: var(--font-archivo); font-size: 0.72em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--brdr-color);}
.m-table td{ padding: 0.75rem; border-bottom: 1px solid var(--brdr-color); vertical-align: top; line-height: 1.5;}
.m-table td:first-child{ font-family: var(--font-archivo); font-weight: 600; color: var(--text-color);}
.m-rate{ display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; border-top: 1px solid var(--brdr-color); padding-top: 1rem;}
.m-rate > span{ font-family: var(--font-archivo); font-size: 0.78em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light);}
.stars{ display: flex; gap: 0.125rem;}
.stars button{ background: none; border: none; font-size: 1.5em; color: var(--brdr-dark); padding: 0 0.125rem; line-height: 1;}
.stars button.on, .stars:hover button.hover{ color: #f5b400;}
.m-rate em{ font-style: normal; font-size: 0.875em; color: var(--green); font-weight: 600;}
.modal-foot{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.5rem; border-top: 1px solid var(--brdr-color); background: var(--cream);}
.modal-foot span{ font-family: var(--font-archivo); font-size: 0.8125em; font-weight: 600; color: var(--text-light);}
body.modal-open{ overflow: hidden;}
/* Tooltip */
.tip{ position: fixed; z-index: 300; pointer-events: none; background: var(--primary); color: var(--white); font-family: var(--font-archivo); font-size: 0.78em; font-weight: 600; padding: 0.375rem 0.625rem; border-radius: 8px; opacity: 0; transform: translate(-50%, -120%); transition: opacity 0.15s ease; white-space: nowrap;}
.tip.show{ opacity: 1;}
/* ===================== Inner pages ===================== */
.main-nav ul li a.active{ color: var(--secondary);}
.page-hero{ position: relative; overflow: hidden; border-bottom: 1px solid var(--brdr-color); background: var(--cream);}
.page-hero .blob{ position: absolute; border-radius: 50%; pointer-events: none;}
.page-hero .blob-1{ top: -160px; left: -140px; width: 420px; height: 420px; background: var(--peach-soft); opacity: 0.7;}
.page-hero .blob-2{ top: -60px; right: -200px; width: 460px; height: 460px; background: #d9efe9; opacity: 0.8;}
.page-hero .container{ position: relative; padding-top: 3.75rem; padding-bottom: 3rem;}
.ph-in{ max-width: 760px;}
.ph-in h1{ font-size: 3.25em; margin: 0 0 1rem;}
.ph-in p{ font-size: 1.1875em; line-height: 1.55; max-width: 34em;}
.ph-stats{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.625rem;}
.ph-stats div{ background: var(--white); border: 1px solid var(--brdr-color); border-radius: 14px; padding: 0.875rem 1.25rem; min-width: 150px;}
.ph-stats strong{ display: block; font-family: var(--font-archivo); font-weight: 800; font-size: 1.75em; line-height: 1; letter-spacing: -0.03em;}
.ph-stats span{ font-family: var(--font-archivo); font-size: 0.72em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light);}
.ph-topics{ justify-content: flex-start; margin: 1.5rem 0 0;}
.ph-topics a{ border-radius: 999px; background: var(--white);}
/* Short reads */
.reads-featured{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: center; background: var(--white); border: 1px solid var(--brdr-color); border-radius: 18px; overflow: hidden; margin-bottom: 1.5rem; color: inherit; transition: box-shadow 0.25s ease;}
.reads-featured:hover{ box-shadow: 0 26px 60px -34px rgba(16,28,61,0.35);}
.reads-featured figure{ height: 380px; overflow: hidden;}
.reads-featured figure img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;}
.reads-featured:hover figure img{ transform: scale(1.04);}
.rf-cont{ padding: 2rem 2.25rem 2rem 0.5rem;}
.rf-cont h2{ font-size: 2em; line-height: 1.1; margin: 0.625rem 0 0.875rem;}
.rf-cont p{ font-size: 1.03em; margin-bottom: 1rem;}
.read-cat{ display: inline-block; align-self: flex-start; font-family: var(--font-archivo); font-size: 0.72em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tint); background: color-mix(in srgb, var(--tint) 12%, white); padding: 0.3125rem 0.75rem; border-radius: 999px;}
.read-meta{ display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: 0.84em; color: var(--text-light); margin-bottom: 1rem;}
.read-meta span + span:before{ content: "\00b7"; margin-right: 1rem;}
.reads-featured .read-more{ font-family: var(--font-archivo); font-size: 0.78em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary);}
.reads-grid-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem;}
.read-post{ padding: 0; overflow: hidden; display: flex; flex-direction: column; color: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease;}
.read-post:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px -30px rgba(16,28,61,0.4);}
.read-post figure{ height: 190px; overflow: hidden; background: var(--cream-dark);}
.read-post figure img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;}
.read-post:hover figure img{ transform: scale(1.05);}
.rp-cont{ padding: 1.25rem 1.375rem 1.375rem; display: flex; flex-direction: column; gap: 0.625rem; flex: 1;}
.rp-cont h3{ font-size: 1.22em; line-height: 1.22;}
.read-post:hover h3{ color: var(--secondary);}
.rp-cont p{ font-size: 0.9375em; line-height: 1.55; flex: 1;}
.rp-cont .read-meta{ margin: 0;}
.read-post.hide, .reads-featured.hide{ display: none;}
.reads-empty{ text-align: center; padding: 3rem 0; color: var(--text-light);}
/* About */
.about-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start;}
.about-copy p{ font-size: 1.09em; line-height: 1.7; margin-bottom: 1.125rem;}
.about-pipeline{ margin: 1.5rem 0 2rem;}
.pipeline{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; position: relative;}
.pipeline:before{ content: ""; position: absolute; left: 10%; right: 10%; top: 18px; height: 2px; background: var(--brdr-color);}
.pipeline li{ position: relative; display: flex; flex-direction: column; gap: 0.25rem; text-align: center; padding: 0 0.25rem;}
.pipeline li i{ width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 0.5rem; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-archivo); font-weight: 800; background: var(--primary); color: var(--white); position: relative; box-shadow: 0 0 0 6px var(--white);}
.pipeline li:nth-child(2) i{ background: var(--purple);} .pipeline li:nth-child(3) i{ background: var(--green);} .pipeline li:nth-child(4) i{ background: var(--secondary);}
.pipeline li strong{ font-family: var(--font-archivo); font-size: 0.9375em;}
.pipeline li span{ font-size: 0.8125em; color: var(--text-light); line-height: 1.4;}
.about-side{ display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 100px;}
.about-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;}
.about-stats div{ background: var(--cream-dark); border-radius: 12px; padding: 1rem;}
.about-stats strong{ display: block; font-family: var(--font-archivo); font-weight: 800; font-size: 2em; line-height: 1; letter-spacing: -0.03em; color: var(--primary);}
.about-stats span{ font-family: var(--font-archivo); font-size: 0.72em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light);}
.about-principles ul{ display: flex; flex-direction: column; gap: 0.875rem;}
.about-principles li{ font-size: 0.97em; line-height: 1.5; padding-left: 1rem; border-left: 3px solid var(--secondary);}
.about-principles li b{ color: var(--secondary);}
.about-principles li em{ display: block; font-style: normal; font-family: var(--font-archivo); font-weight: 600; color: var(--primary);}
.about-cta{ background: var(--primary); color: var(--white); border-color: var(--primary);}
.about-cta strong{ display: block; font-family: var(--font-archivo); font-size: 1.125em; margin-bottom: 0.375rem;}
.about-cta p{ color: var(--footer-text); font-size: 0.9375em; margin-bottom: 1rem;}
.about-cta .bttn{ background: var(--secondary); border-color: var(--secondary);}
.who-card i{ font-style: normal; font-size: 1.75em; width: 56px; height: 56px; border-radius: 14px; background: var(--soft); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;}
.who-card h3{ margin-bottom: 0.5rem;}
.who-card p{ font-size: 0.9375em;}
/* FAQs */
.ocean-row{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.875rem;}
.ocean-card{ border-top: 4px solid var(--tint); transition: transform 0.25s ease;}
.ocean-card:hover{ transform: translateY(-4px);}
.ocean-card i{ width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-archivo); font-weight: 800; background: var(--tint); color: var(--white); margin-bottom: 0.875rem;}
.ocean-card h3{ font-size: 1.125em; margin-bottom: 0.375rem;}
.ocean-card p{ font-size: 0.9em; line-height: 1.5;}
.faq-layout{ display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; align-items: start;}
.faq-toc{ position: sticky; top: 100px;}
.faq-toc ul{ display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.25rem;}
.faq-toc a{ display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 10px; font-family: var(--font-archivo); font-size: 0.9375em; font-weight: 600; color: var(--text-gray);}
.faq-toc a i{ font-style: normal; font-size: 0.78em; color: var(--text-light); font-weight: 700;}
.faq-toc a:hover, .faq-toc a.active{ background: var(--white); color: var(--primary); box-shadow: 0 8px 20px -14px rgba(16,28,61,0.3);}
.faq-search input{ width: 100%; padding: 0.875rem 1rem; border-radius: 999px; border: 1px solid var(--brdr-dark); background: var(--white); font-family: var(--font-karla); font-size: 0.9375em;}
.faq-search input:focus{ border-color: var(--primary); outline: none;}
.faq-group{ margin-bottom: 2.5rem; scroll-margin-top: 110px;}
.faq-group-head{ display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem;}
.faq-group-head i{ font-style: normal; font-family: var(--font-archivo); font-weight: 800; font-size: 1.5em; color: var(--tint);}
.faq-group-head h2{ font-size: 1.625em;}
.faq-lead{ border-left: 4px solid var(--tint); margin-bottom: 0.75rem;}
.faq-lead h3{ font-size: 1.22em; margin-bottom: 0.75rem;}
.faq-lead p{ font-size: 1em; line-height: 1.65; margin-bottom: 0.75rem;}
.faq-lead ul.tick-list{ margin: 0.5rem 0 0.875rem;}
.faq-list{ display: flex; flex-direction: column; gap: 0.625rem;}
.faq-item{ padding: 0; overflow: hidden; transition: box-shadow 0.25s ease;}
.faq-item[open]{ box-shadow: 0 18px 40px -30px rgba(16,28,61,0.35);}
.faq-item summary{ list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.375rem; font-family: var(--font-archivo); font-weight: 600; font-size: 1.03em;}
.faq-item summary::-webkit-details-marker{ display: none;}
.faq-item summary i{ width: 28px; height: 28px; border-radius: 50%; flex: none; border: 1px solid var(--brdr-dark); position: relative; transition: 0.3s ease;}
.faq-item summary i:before, .faq-item summary i:after{ content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--primary); transform: translate(-50%,-50%);}
.faq-item summary i:after{ transform: translate(-50%,-50%) rotate(90deg);}
.faq-item[open] summary i{ background: var(--tint); border-color: var(--tint);}
.faq-item[open] summary i:before, .faq-item[open] summary i:after{ background: var(--white);}
.faq-item[open] summary i:after{ transform: translate(-50%,-50%) rotate(0);}
.faq-answer{ padding: 0 1.375rem 1.25rem; animation: rise 0.35s ease both;}
.faq-answer p{ font-size: 0.97em; line-height: 1.65; margin-bottom: 0.75rem;}
.faq-answer ul.tick-list{ margin: 0.5rem 0;}
.faq-item.hide{ display: none;}
.faq-note{ margin-top: 0.75rem; background: var(--peach); border: 1px solid var(--brdr-peach); border-radius: 12px; padding: 0.875rem 1.125rem; font-size: 0.9375em; color: var(--secondary-dark);}
.faq-note b{ font-family: var(--font-archivo);}
.cta-band{ background: var(--primary); color: var(--white); padding: 3.5rem 0;}
.cta-band-in{ display: grid; grid-template-columns: 1.4fr auto; gap: 2rem; align-items: center;}
.cta-band .eyebrow{ color: var(--footer-text);}
.cta-band h2{ font-size: 1.875em; margin-bottom: 0.75rem;}
.cta-band p{ color: var(--footer-text); font-size: 1.03em;}
.cta-band .sec-btn{ flex-direction: column; align-items: stretch;}
/* Auth */
.auth-sec{ position: relative; overflow: hidden; min-height: calc(100vh - 83px); display: flex; align-items: center; padding: 3.5rem 0;}
.auth-sec .blob{ position: absolute; border-radius: 50%; pointer-events: none;}
.auth-sec .blob-1{ top: -160px; left: -140px; width: 460px; height: 460px; background: var(--peach-soft); opacity: 0.7;}
.auth-sec .blob-2{ bottom: -200px; right: -180px; width: 520px; height: 520px; background: #d9efe9; opacity: 0.8;}
.auth-sec .container{ position: relative;}
.auth-grid{ display: grid; grid-template-columns: 1fr 460px; gap: 3.5rem; align-items: center;}
.auth-side h1{ font-size: 3.25em; margin: 0 0 1rem;}
.auth-side > p{ font-size: 1.125em; max-width: 30em; margin-bottom: 1.5rem;}
.auth-side ul.tick-list{ margin-bottom: 1.5rem;}
.auth-trust{ display: inline-flex; align-items: center; gap: 0.75rem; background: var(--white); border: 1px solid var(--brdr-color); border-radius: 999px; padding: 0.625rem 1.125rem; font-family: var(--font-archivo); font-size: 0.9em; font-weight: 600;}
.auth-card{ padding: 2.25rem 2.25rem 2rem; box-shadow: 0 30px 70px -40px rgba(16,28,61,0.4); text-align: center;}
.auth-icon{ width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blue)); display: flex; align-items: center; justify-content: center; font-size: 2em; margin: 0 auto 1rem;}
.auth-card h2{ font-size: 1.625em; margin-bottom: 0.375rem;}
.auth-card > p{ font-size: 0.9375em; margin-bottom: 1.5rem;}
.auth-form{ text-align: left; display: flex; flex-direction: column; gap: 0.875rem;}
.field{ display: flex; flex-direction: column; gap: 0.375rem; position: relative;}
.field span{ font-family: var(--font-archivo); font-size: 0.78em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light);}
.field input{ width: 100%; padding: 0.9375rem 1rem; border-radius: 12px; border: 1px solid var(--brdr-dark); background: var(--cream); font-family: var(--font-karla); font-size: 1em; transition: border-color 0.2s ease, box-shadow 0.2s ease;}
.field input:focus{ border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px rgba(16,28,61,0.08); background: var(--white);}
.field.error input{ border-color: var(--secondary-dark);}
.field .msg{ font-size: 0.8125em; color: var(--secondary-dark); display: none;}
.field.error .msg{ display: block;}
.field-pw input{ padding-right: 3rem;}
.pw-toggle{ position: absolute; right: 0.75rem; bottom: 0.75rem; background: none; border: none; font-size: 1.125em; opacity: 0.55;}
.pw-toggle:hover{ opacity: 1;}
.auth-row{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.9em;}
.check{ display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-gray);}
.check input{ width: 18px; height: 18px; accent-color: var(--primary);}
.auth-link{ color: var(--secondary); font-weight: 600;}
.auth-link:hover{ color: var(--primary);}
.auth-submit{ width: 100%; margin-top: 0.25rem;}
.auth-foot{ text-align: center; font-size: 0.9375em; margin-top: 0.5rem;}
.auth-foot a{ color: var(--secondary); font-weight: 600;}
.main-footer .footer-bottom a{ color: #9db0d6;}
.main-footer .footer-bottom a:hover{ color: var(--white);}

/* Stress revealer read more popup */
.stress-two .stress-card p.clamp{ display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.625rem;}
.analysis-page .stress-two .stress-card p.clamp{ -webkit-line-clamp: 3;}
.stress-two .stress-card .readmore{ display: none;}
.stress-two .stress-card.has-more .readmore{ display: inline-flex;}
.readmore{ display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-archivo); font-size: 0.78em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary); padding: 0; border: 0; background: none; cursor: pointer;}
.readmore:hover, .readmore:focus{ color: var(--primary);}
.stress-two .stress-card .eyebrow.rp-title{ cursor: pointer; display: inline-block;}
.stress-two .stress-card .eyebrow.rp-title:hover, .stress-two .stress-card .eyebrow.rp-title:focus{ color: var(--secondary) !important;}
.readpop{ position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: 1.5rem;}
.readpop.open{ display: flex;}
.readpop-bg{ position: absolute; inset: 0; background: rgba(16,28,61,0.55); backdrop-filter: blur(4px); animation: fadein 0.25s ease both;}
.readpop-box{ position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 3rem); overflow-y: auto; background: var(--white); border-radius: 20px; padding: 2rem 2rem 1.75rem; animation: rise 0.35s cubic-bezier(0.2,0.8,0.2,1) both; box-shadow: 0 40px 80px -30px rgba(16,28,61,0.5);}
.readpop-box .modal-close{ position: absolute; top: 1rem; right: 1rem;}
.readpop-body{ padding-right: 2.5rem;}
.readpop-body .eyebrow{ color: var(--blue); font-size: 0.75em; letter-spacing: 0.14em;}
.readpop.good .readpop-body .eyebrow{ color: var(--green);}
.readpop-body h3{ font-size: 1.5em; letter-spacing: -0.03em; margin: 0.25rem 0 0.5rem;}
.readpop-body small{ display: block; font-size: 0.875em; color: var(--text-muted); margin-bottom: 1rem;}
.readpop-body p{ font-size: 1.0625em; line-height: 1.7; margin: 0 0 0.875rem;}
.readpop-body p:last-child{ margin-bottom: 0;}
.stress-two .stress-card .rp-hide{ display: none;}
.readpop-body .rp-block{ margin-bottom: 1rem;}
.readpop-body ol{ list-style: decimal; padding-left: 1.25rem; margin: 0 0 0.875rem;}
.readpop-body ol li{ font-size: 1em; line-height: 1.6; margin-bottom: 0.25rem;}