/* CCM V4: rhythm colors are shared by the artwork, examples and matching result. */
:root{--swing:#8caed5;--day:#f7931a;--scalp:#b095d4;--position:#83bda7;--accent:#f7931a;--orange:#f7931a}
[data-style=swing]{--style:var(--swing)}
[data-style=day]{--style:var(--day)}
[data-style=scalp]{--style:var(--scalp)}
[data-style=position]{--style:var(--position)}
[data-style=neutral]{--style:var(--silver)}
body{background:radial-gradient(ellipse at 10% 0,rgba(255,255,255,.065),transparent 22%),#08090b}
.hero{padding-top:96px;padding-bottom:72px;background:radial-gradient(ellipse at 84% 40%,rgba(255,255,255,.035),transparent 45%),radial-gradient(ellipse at 16% 48%,rgba(255,255,255,.025),transparent 45%)}
.hero h1{font-size:clamp(33px,7.5vw,86px)}
.hero h1 .silver-text{background-image:linear-gradient(115deg,#f5f8ff 12%,#b9d1f0 45%,#83cfc9 82%)}
.hero .eyebrow{color:#f7a23b}
.hero-fine{margin-top:30px}
.instrument .hair{stroke:rgba(157,189,220,.12)}
.instrument .spin.a .arc{stroke:var(--swing)}
.instrument .spin.a .pt{fill:var(--swing)}
.instrument .spin.b .arc{stroke:var(--day);opacity:.58}
.instrument .spin.b .pt{fill:var(--day);opacity:.7}
.instrument .spin.c .arc{stroke:var(--scalp)}
.instrument .spin.c .pt{fill:var(--scalp)}
.instrument .label-swing,.instrument .label-swing .n{fill:var(--swing)}
.instrument .label-day,.instrument .label-day .n{fill:var(--day)}
.instrument .label-scalp,.instrument .label-scalp .n{fill:var(--scalp)}
.instrument .spin.d .arc{stroke:var(--position)}
.instrument .spin.d .pt,.instrument .label-position,.instrument .label-position .n{fill:var(--position)}
.instrument .spin.d{animation:spin 110s linear infinite reverse}
.hero .button.primary,.closing .button.primary{border-color:#f7931a;background:var(--brush),linear-gradient(155deg,#3e3028,#211c19 70%);box-shadow:inset 0 1px 0 #d3ad8a26,0 8px 30px #0005}
.hero .button.primary:hover,.closing .button.primary:hover{border-color:#e1a681;background:var(--brush),linear-gradient(155deg,#514033,#2d251e 70%)}
.hero-meta svg{color:var(--scalp)}
.timepiece-stage{scroll-margin-top:100px;max-width:1240px;margin:0 auto;padding:12px 32px 0;position:relative;isolation:isolate}
.stage-overline{display:flex;justify-content:center;gap:32px;color:#d9dfe8;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;position:relative;z-index:1}
.stage-overline span:nth-child(1){color:var(--day)}
.stage-overline span:nth-child(2){color:var(--scalp)}
.stage-overline span:nth-child(3){color:var(--swing)}
.timepiece-image{display:block;width:100%;height:auto;margin-top:12px;mask-image:linear-gradient(transparent,#000 7%,#000 88%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 88%,transparent)}
.art-caption{font-size:14px;text-align:center;margin:4px auto 32px;color:#aab5c3}
.timepiece-stage .rhythms{padding:0;gap:12px;max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}
.timepiece-stage .rhythm{border:1px solid color-mix(in srgb,var(--style) 26%,transparent);border-radius:14px;background:linear-gradient(120deg,color-mix(in srgb,var(--style) 8%,transparent),transparent);padding:22px 18px;grid-template-columns:6px minmax(0,1fr);gap:12px}
.timepiece-stage .rhythm:hover{border-color:color-mix(in srgb,var(--style) 65%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--style) 13%,transparent),transparent)}
.rhythm-dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--style);flex-shrink:0}
.rhythm-time{grid-column:2;color:var(--style);font-size:12px;white-space:nowrap}
.rhythm strong{font-size:16px}.rhythm small{font-size:12px}
.steps li:nth-child(1){border-top-color:#8caed566}.steps li:nth-child(2){border-top-color:#d68a5966}.steps li:nth-child(3){border-top-color:#83bda766}
.steps li:nth-child(1):before{-webkit-text-stroke-color:#8caed575}.steps li:nth-child(2):before{-webkit-text-stroke-color:#d68a5975}.steps li:nth-child(3):before{-webkit-text-stroke-color:#83bda775}
.steps li:nth-child(1):after{border-color:var(--swing)}.steps li:nth-child(2):after{border-color:var(--day)}.steps li:nth-child(3):after{border-color:var(--scalp)}
.steps li:nth-child(1) .process-number{color:var(--swing)}.steps li:nth-child(2) .process-number{color:var(--day)}.steps li:nth-child(3) .process-number{color:var(--scalp)}
.accent-text{background:linear-gradient(100deg,#8caed5,#72d4c2);background-clip:text;-webkit-background-clip:text;color:transparent}
.market-examples{max-width:1280px}
/* Neutral metal surfaces with the established rhythm colors in labels and details. */
.market-examples,.result-chart-example{--mute:#b8b8b8;--dim:#969696;--line:#ffffff1c;--silver:#dedede}
.market-examples .accent-text{background:linear-gradient(180deg,#fff 10%,#b0b0b0 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.market-examples .section-intro{margin-bottom:42px}
.example-switcher{margin:0 auto 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px;border-radius:14px;border:1px solid #ffffff1c;background:linear-gradient(180deg,#141414,#0b0b0b);box-shadow:inset 0 1px 0 #ffffff05}
.example-switcher button{position:relative;display:grid;grid-template-columns:6px minmax(0,1fr);align-items:center;column-gap:12px;row-gap:5px;text-align:left;border:1px solid transparent;border-radius:8px;background:transparent;padding:19px 22px;transition:background .2s,border-color .2s}
.example-switcher button strong{font-weight:550;font-size:15px;letter-spacing:-.025em;color:#bdbdbd}
.example-switcher button>span:last-child{grid-column:2;font-size:12px;color:#999}
.example-switcher button:hover{background:#ffffff07}
.example-switcher button[aria-pressed=true]{border-color:color-mix(in srgb,var(--style) 50%,transparent);background:linear-gradient(150deg,#303030,#1b1b1b 70%);box-shadow:inset 0 1px 0 #ffffff14,0 4px 12px #0003}
.example-switcher button[aria-pressed=true] .rhythm-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--style) 12%,transparent)}
.example-switcher button[aria-pressed=true] strong{color:var(--style)}
.example-panel{border:1px solid #ffffff30;border-radius:16px;background:radial-gradient(ellipse at 5% 0,#ffffff07,transparent 55%),linear-gradient(160deg,#151515,#0a0a0a 70%);box-shadow:inset 0 1px 0 #ffffff0a,0 20px 60px -35px #000;overflow:hidden}
.example-content{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0;align-items:start}
.market-chart{margin:0;padding:30px 0 30px 30px;min-width:0}
.market-chart>a{display:block;position:relative;border:1px solid #ffffff20;border-radius:8px;overflow:hidden;background:#080808}
.market-chart img{display:block;width:100%;height:auto}
.chart-enlarge{position:absolute;right:16px;bottom:36px;width:32px;height:32px;display:grid;place-items:center;background:#181818ee;color:#ededed;border:1px solid #ffffff40;border-radius:6px;font-size:19px;transition:background .2s}
.market-chart a:hover .chart-enlarge{background:#3c3c3c}
.market-chart figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;color:#969696;font-size:11px;line-height:1.6;padding:12px 2px 0}
.market-chart figcaption span:last-child{color:var(--style)}
.example-copy{padding:36px 34px;min-width:0}
.example-copy .eyebrow{color:var(--style);font-size:9px;letter-spacing:.17em;gap:8px}
.example-copy .eyebrow:before{background:var(--style)}
.example-copy h3{font-size:30px;line-height:1.15;margin:18px 0;color:#f0f0f0;font-weight:500;letter-spacing:-.045em;text-wrap:balance}
.example-copy>p{font-size:14px;line-height:1.75;color:#b8b8b8}
.scenario{margin:26px 0;border-left:1px solid var(--style);padding:0 0 0 18px}
.scenario>span{color:var(--style);font-size:11px;font-weight:550;letter-spacing:.01em}
.scenario p{font-size:13px;line-height:1.65;margin-top:6px}
.example-facts{display:grid;gap:10px;margin:26px 0 0}
.example-facts>div{display:flex;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;line-height:1.5}
.example-facts dt{color:#999}.example-facts dd{margin:0;text-align:right;color:#d0d0d0}
.chart-source{max-width:920px;margin:18px auto 0;font-size:11.5px;line-height:1.8;color:#949494;text-align:center}
.chart-source a{color:#c4c4c4;text-decoration:underline;text-underline-offset:3px}
.principles{background:radial-gradient(ellipse at left top,#24354a66,transparent 60%),var(--plate)}
.closing:after{background:radial-gradient(ellipse at 20% 100%,#1b474f44,transparent 65%),radial-gradient(ellipse at 90% 0,#80603d22,transparent 70%),repeating-radial-gradient(circle at 50% 135%,transparent 0 54px,rgba(214,221,232,.075) 54px 55px),var(--plate)}
/* Carry the color language into the questionnaire without implying a score. */
.chapter-list li.complete .chapter-number{background:#76cbbd;border-color:#76cbbd}
.chapter-list li.current .chapter-number{border-color:#f7931a;background:#f7931a12}
.quiz-progress-fill{background:#73bfb4}
.answer:has(input:checked){border-color:#7dbfb3;background:linear-gradient(120deg,#214b443f,#171d23);box-shadow:inset 0 1px 0 #a5e5d117}
.answer:has(input:checked) .answer-key,.answer:has(input:checked) .answer-check{background:#8ad5c6;border-color:#8ad5c6}
.result .result-emblem{border-color:color-mix(in srgb,var(--style) 50%,transparent);background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--style) 12%,transparent),transparent 70%),var(--plate)}
.result .result-emblem svg{stroke:var(--style)}
.result .result-head h1{background-image:linear-gradient(150deg,#f5f8ff,var(--style));background-clip:text;-webkit-background-clip:text;color:transparent}
.result .result-grid .result-panel:last-child{background:radial-gradient(ellipse at right top,color-mix(in srgb,var(--style) 10%,transparent),transparent 60%),var(--plate)}
.result-chart-example{margin-top:54px;border:1px solid #ffffff30;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#151515,#0a0a0a 70%);box-shadow:inset 0 1px 0 #ffffff0a}
.result-chart-example .example-copy{padding:32px}
.result-chart-example .example-copy h3{font-size:26px}
.result-chart-example .chart-source{padding:0 24px 20px;margin-top:0}
@media(min-width:1440px){.example-copy h3{font-size:34px}}
@media(max-width:1000px){.timepiece-stage .rhythm{grid-template-columns:6px minmax(0,1fr);padding:20px;gap:12px}.rhythm-time{grid-column:2}.example-content{grid-template-columns:1fr}.market-chart{padding:24px 24px 0}.example-copy{padding:30px}.example-copy h3{font-size:32px}.example-facts{grid-template-columns:repeat(3,1fr);gap:20px}.example-facts>div{flex-direction:column;gap:8px}.example-facts dd{text-align:left}.scenario{max-width:650px}.result-chart-example .example-content{grid-template-columns:1fr}}
@media(max-width:640px){.hero{padding-top:70px;padding-bottom:52px}.hero h1{font-size:clamp(31px,8.5vw,52px)}.timepiece-stage{padding:0 16px}.stage-overline{font-size:8.5px;gap:20px;letter-spacing:.14em}.timepiece-image{margin-top:18px}.art-caption{font-size:12px;margin-top:4px;margin-bottom:24px}.timepiece-stage .rhythms{grid-template-columns:1fr;gap:8px}.timepiece-stage .rhythm{grid-template-columns:6px minmax(0,1fr);padding:17px 20px;gap:5px 14px}.rhythm-time{grid-column:2;font-size:12px}.rhythm small{display:none}.rhythm strong{font-size:15px}.rhythm small{font-size:12px}.example-switcher{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:4px;border-radius:14px;margin-bottom:18px}.example-switcher button{padding:13px 8px;column-gap:7px;border-radius:10px;grid-template-columns:4px 1fr}.example-switcher .rhythm-dot{width:4px;height:4px}.example-switcher button strong{font-size:13px}.example-switcher button>span:last-child{font-size:10px}.market-chart{padding:14px 14px 0}.market-chart>a{border-radius:9px}.chart-enlarge{width:25px;height:25px;bottom:24px;right:10px;font-size:15px}.market-chart figcaption{font-size:9px;gap:4px;padding-top:10px}.example-copy{padding:24px 22px}.example-copy h3{font-size:27px}.example-copy>p{font-size:14px}.example-copy .eyebrow{font-size:8.5px}.example-facts{grid-template-columns:1fr;gap:8px}.example-facts>div{flex-direction:row;gap:12px}.example-facts dd{text-align:right}.chart-source{font-size:10.5px;text-align:left}.result-chart-example .example-copy{padding:24px 20px}}
@media(max-width:360px){.hero h1{font-size:29px}.example-switcher button{padding:12px 5px}.example-switcher button strong{font-size:12px}.example-switcher button>span:last-child{font-size:9px}.stage-overline{gap:14px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.example-panel,.example-switcher button,.chart-enlarge{transition:none}}
@media print{*:focus{outline:none!important}.result-chart-example{display:none}.result .result-head h1{-webkit-text-fill-color:#16191e!important;background:none!important}.result .result-grid .result-panel:last-child{background:none!important}}

.holding-label{font-size:9px;letter-spacing:.2em;text-align:center;color:#8f9aaa;margin:0 0 18px}
.holding-note{max-width:670px;margin:24px auto 0;text-align:center;font-size:12px;line-height:1.8;color:#8f9aaa}
.holding-note strong{font-weight:500;color:#c2cbd8;white-space:nowrap}
.migration-note{border-left:2px solid var(--position);padding:12px 16px;margin:24px 0;background:#83bda70b;font-size:13px;line-height:1.7;color:#c8bed9;max-width:650px}
.candidate-list{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:641px) and (max-width:900px){.timepiece-stage .rhythms{grid-template-columns:repeat(2,minmax(0,1fr))}.example-switcher button{padding:15px 12px}.example-switcher button strong{font-size:12px}.example-switcher button>span:last-child{font-size:10px}}
@media(max-width:640px){.candidate-list{grid-template-columns:1fr}.holding-label{font-size:8px}.holding-note{font-size:11px;max-width:330px;padding:0 10px}.holding-note strong{white-space:normal}}
@media(prefers-reduced-motion:reduce){.instrument .spin.d{animation:none}}
@media print{.candidate-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Every named rhythm uses the same color on its ring, example and result. */
.instrument .spin.a .tk{stroke:var(--swing);opacity:.28}
.instrument .spin.b .tk{stroke:var(--day);opacity:.28}
.instrument .spin.c .tk{stroke:var(--scalp);opacity:.28}
.instrument .spin.d .tk{stroke:var(--position);opacity:.28}
.instrument .spin.a .arc,.instrument .spin.c .arc,.instrument .spin.d .arc{opacity:.65}
.instrument .label-swing,.instrument .label-day,.instrument .label-scalp,.instrument .label-position{opacity:.9}

/* Labels live in normal flow so saved-answer notices can never collide with them. */
.rhythm-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin-top:30px;padding:14px 22px;border:1px solid #ffffff12;border-radius:999px;background:#08090bbf;backdrop-filter:blur(8px)}
.rhythm-legend>span{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.03em;color:var(--style)}
.hero .migration-note{background:#101713e6;border-radius:0 10px 10px 0}
@media(max-width:640px){.rhythm-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;border-radius:16px;padding:16px 18px}.rhythm-legend>span{font-size:10px}}

.market-chart [data-tradingview-host]{min-width:0}
.example-content .market-chart{padding-right:0}
@media(max-width:1000px){.example-content .market-chart{padding-right:24px}}
@media(max-width:640px){.example-content .market-chart{padding-right:14px}}

.timepiece-image{mix-blend-mode:lighten;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 72%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 72%,transparent);-webkit-mask-composite:source-in}
.steps li:nth-child(1){--step:var(--swing)}.steps li:nth-child(2){--step:var(--day)}.steps li:nth-child(3){--step:var(--position)}
.steps li:nth-child(n){border-top-color:color-mix(in srgb,var(--step) 40%,transparent)}
.steps li:nth-child(n):before{-webkit-text-stroke-color:color-mix(in srgb,var(--step) 50%,transparent)}
.steps li:nth-child(n):after{border-color:var(--step)}
.steps li:nth-child(n) .process-number{color:var(--step)}

.original-chart-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px;font-size:10px;letter-spacing:.12em;color:#999}.original-chart-label strong{color:var(--style);font-weight:500;letter-spacing:.04em}.timeframe-comparison{display:grid;grid-template-columns:1fr 1.2fr;gap:0;margin-top:20px;border-block:1px solid #ffffff1c}.timeframe-comparison>div{padding:16px 0;background:transparent}
.timeframe-comparison>div+div{padding-left:22px;border-left:1px solid #ffffff1c}.timeframe-comparison span{display:block;font-size:10px;color:#999}.timeframe-comparison strong{display:block;font-size:16px;line-height:1.5;color:var(--style);font-weight:500;letter-spacing:-.02em;margin-top:5px}.example-copy .timeframe-takeaway{padding:15px 18px;border:1px solid #ffffff1c;border-left-color:var(--style);border-radius:0 6px 6px 0;background:linear-gradient(100deg,#ffffff06,transparent);color:var(--style);font-size:13px}.example-copy .original-note{font-size:11px;line-height:1.7;color:#929292;margin-top:24px}.live-chart-details{grid-column:1/-1;border-top:1px solid #ffffff12;margin:0 30px 24px}.live-chart-details summary{list-style:none;padding:18px 0 0;display:flex;justify-content:space-between;gap:12px;cursor:pointer;font-size:12px;color:#b2b2b2}.live-chart-details summary::-webkit-details-marker{display:none}.live-chart-body{padding-top:20px}.live-chart-details[open] summary{color:var(--style)}
@media(max-width:640px){.original-chart-label{font-size:8px;letter-spacing:.04em}.timeframe-comparison{gap:0}.timeframe-comparison>div{padding:12px 0}.timeframe-comparison>div+div{padding-left:12px}.timeframe-comparison strong{font-size:12px}.timeframe-comparison span{font-size:9px}.live-chart-details{margin:0 22px 22px}.live-chart-details summary{font-size:11px}}

/* The profile offer uses the same black-and-silver surfaces as the chart section. */
.profile-benefits .principles{border-color:#ffffff30;border-radius:16px;background:linear-gradient(155deg,#171717,#0a0a0a);box-shadow:inset 0 1px 0 #ffffff0a}
.profile-benefits h3{margin-top:20px;font-weight:500;font-size:23px;letter-spacing:-.035em;color:#eee}
.profile-benefits .principle p{color:#b8b8b8;font-size:14px;line-height:1.75}
.profile-benefits .eyebrow{color:#b8b8b8}