/* Economics & Go-to-Market chapter */
.hero-e { padding-top: clamp(104px, 9.5vw, 132px); overflow: hidden; }
.hero-e .drift { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-e::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 70% 20%, rgba(201, 164, 92, 0.12), transparent 70%), radial-gradient(60% 50% at 10% 90%, rgba(16, 37, 28, 0.8), transparent 70%); pointer-events: none; }
.hero-e .wrap { position: relative; }
.hero-e h1 { max-width: 16ch; }
.herogrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
@media (max-width: 960px) { .herogrid { grid-template-columns: minmax(0, 1fr); } }
.costcard { position: relative; background: rgba(15, 20, 18, 0.82); backdrop-filter: blur(6px); border: 1px solid var(--line-2); border-radius: 20px; padding: 22px 22px 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.costcard::before { content: ""; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; background: linear-gradient(160deg, rgba(230, 204, 146, 0.5), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.cc-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; }
.cc-h span { font: 500 22px var(--display); } .cc-h em { font-style: normal; font: 500 11px var(--mono); color: var(--dim); }
.costcard ol { list-style: none; margin: 0; padding: 0; display: grid; }
.costcard li { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 14px; color: #CFC8BA; opacity: 0; transform: translateY(6px); animation: ccin .5s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d); }
.costcard li i { border-bottom: 1px dotted rgba(236, 230, 217, 0.22); transform: translateY(-4px); }
.costcard li b { font: 500 14px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.costcard li.sum, .costcard li.sub, .costcard li.total { border-top: 1px solid var(--line-2); margin-top: 3px; padding-top: 8px; color: var(--text); font-weight: 600; }
.costcard li.sum b { color: var(--brass-hi); font: 500 24px/1 var(--display); }
.costcard li.price { margin-top: 10px; color: var(--text); }
.costcard li.price b { color: var(--brass-hi); }
.costcard li.total b { font: 500 30px/1 var(--display); color: var(--mint); }
.cc-f { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: right; opacity: 0; animation: ccin .5s forwards; animation-delay: 2.6s; }
@keyframes ccin { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .costcard li, .cc-f { animation: none; opacity: 1; transform: none; } }
/* the hero holds still while the arrow draws, then holds on the finished arrow and its note before the page moves on */
.hero-pin { position: relative; height: calc(100vh + 115vh); height: calc(100svh + 115vh); }
.hero-pin > .hero-e { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; padding-bottom: 40px; }
.hero-e .head { margin-bottom: 0; }
.hero-e .kpi-h { margin: clamp(40px, 6vw, 84px) 0 14px; }
/* the red arrow from the $425 to "<10,000 Units" */
.hero-e .arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.hero-e .arrow path { fill: none; stroke: #E5484D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 10px rgba(229, 72, 77, 0.35)); }
.arrow-note { position: absolute; z-index: 2; margin: 0; font: 600 clamp(24px, 2.6vw, 40px)/1 var(--display); color: #FF6B6F; white-space: nowrap; opacity: 0; transform: translateY(8px) scale(0.96); transform-origin: 0 50%; transition: opacity .35s, transform .35s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.arrow-note.on { opacity: 1; transform: none; }
@media (max-width: 600px) { .hero-e { padding-top: 150px; } .hero-e .arrow path { stroke-width: 2.4; } }
@media (max-width: 860px) { .hero-e .kpis { --n: 2 !important; } }

/* ------------------------------------------------------------ what it costs: centred */
#cogs .cogs-head { margin-left: auto; margin-right: auto; text-align: center; }
#cogs .cogs-head .lede { margin-left: auto; margin-right: auto; }
.bomwrap { max-width: 760px; margin: 0 auto; }
.cost { align-items: start; }
.bom { display: grid; gap: 14px; }
.bomstack { display: flex; height: 28px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
.bomstack i { flex: 0 0 var(--w); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .7, .2, 1) var(--d); border-right: 1px solid rgba(0, 0, 0, 0.5); }
.rv.in .bomstack i { transform: scaleX(1); }
.k-display { background: #E6CC92; } .k-elec { background: #C9A45C; } .k-wood { background: #9C6B3E; } .k-brass { background: #D9B45A; } .k-other { background: #6E5A3A; } .k-cm { background: #4A3A1E; }
.k-ship { background: repeating-linear-gradient(45deg, #72BCE0 0 6px, #4E8FAE 6px 12px); }
.bomlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bomlist li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: #D6CFBF; opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--d), transform .5s var(--d); }
.rv.in .bomlist li { opacity: 1; transform: none; }
.bom .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.bomlist b { font: 500 13.5px var(--mono); color: var(--text); }
.bomsub, .bomship, .bomtot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; margin: 0; }
.bomsub { padding-top: 10px; border-top: 1px solid var(--line-2); }
.bomsub span { color: var(--muted); font-size: 14px; } .bomsub b { font: 500 18px var(--mono); color: var(--text); }
.bomship { grid-template-columns: 12px minmax(0, 1fr) auto; padding: 10px 12px; border-radius: 12px; background: rgba(114, 188, 224, 0.07); border: 1px solid rgba(114, 188, 224, 0.25); }
.bomship span:nth-child(2) { font-size: 14px; color: #CFE3EC; } .bomship b { font: 500 16px var(--mono); color: #9FD3EC; }
.bomtot { padding-top: 12px; border-top: 1px solid var(--line-2); }
.bomtot span { color: var(--text); font-size: 15px; font-weight: 600; }
.bomtot b { font: 500 46px/1 var(--display); color: var(--brass-hi); }
.costside { display: grid; gap: 20px; }
@property --pp { syntax: "<number>"; inherits: false; initial-value: 0; }
.donutcogs { display: grid; place-items: center; padding: 10px 0; }
.ring { --pp: 0; width: min(300px, 70vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from -90deg, #E6CC92 calc(var(--pp) * 1%), rgba(134, 195, 138, 0.22) 0); transition: --pp 1.8s cubic-bezier(.2, .7, .2, 1) .2s; position: relative; }
.rv.in .ring { --pp: var(--p); }
.ring::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ring span { position: relative; display: grid; gap: 4px; text-align: center; max-width: 60%; }
.ring b { font: 500 58px/1 var(--display); color: var(--brass-hi); }
.ring em { font-style: normal; font-size: 13px; color: var(--muted); }
.assume { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.assume li { padding-left: 18px; position: relative; color: #CFC8BA; font-size: 15px; }
.assume li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.assume b { color: var(--text); }

/* ------------------------------------------------------------ margins */
.chartbox { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: clamp(14px, 2vw, 26px); overflow-x: auto; }
.chart { width: 100%; height: auto; }
.wfall { min-width: 760px; }
.wfsec { position: relative; height: 300vh; }
.wf-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-top: 56px; }
.wf-stage .head { margin-bottom: clamp(18px, 3vh, 36px); }
.wf rect { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.wf.on rect { transform: scaleY(1); }
.wf.neg rect { transform-origin: 50% 0; }
.wf foreignObject { opacity: 0; transition: opacity .4s .1s; } .wf.on foreignObject { opacity: 1; }
.wfall .cn { opacity: 0; transition: opacity .3s .35s; } .wfall .cn.on { opacity: 1; }
.wfall .wo .ul { fill: none; stroke: #E5484D; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.2, .7, .2, 1); }
.wfall .wo .wot { fill: #FF6B6F; font: 600 26px var(--display); opacity: 0; transform: translateY(10px); transform-box: fill-box; transition: opacity .35s .35s, transform .35s .35s; }
.wfall.show .wo .ul { stroke-dashoffset: 0; }
.wfall.show .wo .wot { opacity: 1; transform: none; }
.wf.total rect { fill: #E6CC92; } .wf.sub rect { fill: #C9A45C; } .wf.neg rect { fill: rgba(229, 139, 107, 0.78); } .wf.pos rect { fill: #86C38A; }
.wf .v { fill: var(--text); font: 600 14px var(--mono); opacity: 0; transition: opacity .4s .3s; }
.wf.on .v { opacity: 1; }
.wf .wl { font: 500 12.5px/1.3 var(--body); color: var(--muted); text-align: center; }
.wf .wl em { display: block; font: 500 11.5px var(--mono); font-style: normal; color: var(--dim); margin-top: 2px; }
.wfall .cn { stroke: rgba(236, 230, 217, 0.25); stroke-dasharray: 3 3; }
.wfall .base { stroke: rgba(236, 230, 217, 0.3); }
.margins { margin-top: clamp(18px, 2.5vw, 28px); }
.big { font: 500 clamp(44px, 4.6vw, 68px)/1 var(--display); color: var(--brass-hi); margin: 4px 0 8px; }
.wfm { display: none; list-style: none; margin: 0; padding: 0; gap: 12px; }
.wfm li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13.5px; color: #D6CFBF; }
.wfm b { font: 500 13.5px var(--mono); color: var(--text); }
.wfm .tr { grid-column: 1 / 3; position: relative; height: 16px; border-radius: 4px; background: rgba(255, 255, 255, 0.03); }
.wfm li { opacity: 0.18; transition: opacity .35s; } .wfm li.on { opacity: 1; }
.wfm .tr i { position: absolute; top: 0; bottom: 0; border-radius: 4px; transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.wfm .neg .tr i { transform-origin: 100% 50%; }
.wfm li.on .tr i { transform: scaleX(1); }
.wfm li:first-child b { position: relative; }
.wfm li:first-child b::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -4px; height: 3px; border-radius: 2px; background: #E5484D; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s; }
.wfm .wo-m { position: absolute; right: -4px; bottom: calc(100% + 8px); font: 600 19px var(--display); font-style: normal; color: #FF6B6F; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s .3s, transform .3s .3s; }
.wfm.show li:first-child b::after { transform: scaleX(1); }
.wfm.show .wo-m { opacity: 1; transform: none; }
.wfm li:first-child { margin-top: 30px; }
.wfm .total i { background: #E6CC92; } .wfm .sub i { background: #C9A45C; } .wfm .neg i { background: rgba(229, 139, 107, 0.78); } .wfm .pos i { background: #86C38A; }
.wfm .sub, .wfm li:last-child { padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .wfbox .wfall { display: none; } .wfm { display: grid; } .wfsec { height: 260vh; } .wf-stage .head h2 { font-size: 30px; } }

/* ------------------------------------------------------------ CAC */
.cac-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 36px); }
.cac-top h2 { max-width: 14ch; }
.cac-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; justify-items: end; text-align: right; }
.cac-leg li { display: grid; grid-template-columns: auto auto 28px; align-items: baseline; gap: 12px; font-size: 14.5px; color: #D6CFBF; }
.cac-leg li span { grid-column: 1; grid-row: 1; } .cac-leg li b { grid-column: 2; grid-row: 1; font: 500 22px var(--display); color: var(--text); }
.cac-leg li i { grid-column: 3; grid-row: 1; align-self: center; height: 14px; border-radius: 5px; border: 1.5px dashed rgba(236, 230, 217, 0.6); }
.cac-leg li.lx i { border-color: #C99BDA; background: rgba(201, 155, 218, 0.18); } .cac-leg li.lx b { color: #E2C4EE; }
@media (max-width: 720px) { .cac-leg { justify-items: start; text-align: left; } .cac-leg li { grid-template-columns: 28px minmax(0, 1fr) auto; } .cac-leg li i { grid-column: 1; } .cac-leg li span { grid-column: 2; } .cac-leg li b { grid-column: 3; font-size: 19px; } }
.cacbar { margin: 10px 0 40px; padding: 96px 4px 10px; }
.cacbar .track { position: relative; height: 14px; border-radius: 8px; background: linear-gradient(90deg, rgba(134, 195, 138, 0.4), rgba(201, 164, 92, 0.35) 50%, rgba(229, 139, 107, 0.4)); }
.cacbar .bench { position: absolute; top: -6px; bottom: -6px; left: var(--a); width: calc(var(--b) - var(--a)); border: 1px dashed rgba(236, 230, 217, 0.45); border-radius: 8px; }
.cacbar .bench.lx { border-color: #C99BDA; background: rgba(201, 155, 218, 0.16); }
.cacbar .mk { --h: 34px; position: absolute; left: var(--x); bottom: -10px; width: 3px; height: var(--h); margin-left: -1.5px; background: var(--text); border-radius: 2px; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cacbar .mk:nth-of-type(2) { transition-delay: .15s; } .cacbar .mk:nth-of-type(3) { transition-delay: .3s; }
.rv.in.cacbar .mk { transform: none; }
.cacbar .mk span { position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap; font: 600 12.5px var(--body); color: var(--text); padding: 5px 9px; border-radius: 8px; background: rgba(8, 11, 10, 0.92); border: 1px solid var(--line-2); }
.cacbar .mk.target { --h: 70px; background: var(--mint); } .cacbar .mk.target span { color: var(--mint); border-color: rgba(159, 232, 200, 0.5); }
.cacbar .mk.be1 { --h: 70px; background: var(--red); } .cacbar .mk.be1 span { color: #F4C2AE; }
.cacbar .mk.be3 { background: #E58B6B; opacity: 0.8; } .cacbar .mk.be3 span { translate: -80% 0; }
.cacbar .scale { position: relative; height: 20px; margin-top: 52px; }
.cacbar .scale span { position: absolute; left: var(--x); translate: -50% 0; font: 500 11px var(--mono); color: var(--dim); }
.cacbar .scale span:first-child { translate: 0 0; } .cacbar .scale span:last-child { translate: -100% 0; }
@media (max-width: 720px) {
  .cacbar { padding-top: 120px; margin-bottom: 24px; }
  .cacbar .mk span { font-size: 11.5px; padding: 4px 8px; white-space: normal; width: max-content; max-width: 150px; }
  .cacbar .mk.target { --h: 28px; } .cacbar .mk.target span { translate: -20% 0; }
  .cacbar .mk.be1 { --h: 66px; } .cacbar .mk.be1 span { translate: -60% 0; }
  .cacbar .mk.be3 { --h: 110px; } .cacbar .mk.be3 span { translate: -92% 0; }
  .cacbar .scale { margin-top: 64px; }
}

/* ------------------------------------------------------------ expected early-adopter results */
.yr-eb { font-size: clamp(13px, 1.2vw, 16px); letter-spacing: 0.18em; color: var(--brass-hi); }
.plbar { margin-top: clamp(20px, 3vw, 36px); display: grid; gap: 18px; }
.plrev { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.plrev span { font: 600 12px var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.plrev b { font: 500 34px var(--display); color: var(--brass-hi); }
.pltrack { position: relative; height: 120px; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.pltrack i { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); transform-origin: 0 50%; transform: scaleX(0); border-right: 2px solid rgba(0, 0, 0, 0.45); display: grid; align-content: center; padding: 0 14px; gap: 2px; overflow: hidden; }
.pltrack i span { font: 600 12px var(--body); color: rgba(10, 12, 11, 0.85); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.pltrack i b { font: 500 26px/1 var(--display); color: #0C0E0D; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.pltrack i.full span, .pltrack i.full b { opacity: 1; }
.plleg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.plleg li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); opacity: 0.35; transition: opacity .4s, border-color .4s; }
.plleg li.on { opacity: 1; border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.plleg li i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.plleg li span { font-size: 13px; color: var(--text); }
.plleg li b { font: 500 14px var(--mono); color: var(--text); }
.plleg li em { grid-column: 2 / 4; font-style: normal; font: 500 12px var(--mono); color: var(--dim); }
@media (max-width: 860px) { .plleg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pltrack { height: 80px; } .pltrack i { padding: 0 8px; } .pltrack i span { display: none; } .pltrack i b { font-size: 18px; } .pltrack i:not(:first-child) b { display: none; } }

/* ------------------------------------------------------------ the funnel: a cone, filled from the bottom as you scroll */
.cone { position: relative; height: 600vh; background: radial-gradient(60% 50% at 60% 55%, rgba(201, 164, 92, 0.06), transparent 70%), var(--ink); }
.cone-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: 76px var(--gut) 28px; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; }
.cone-left { display: grid; gap: clamp(16px, 2.5vh, 28px); align-content: center; min-width: 0; }
.cone-head .eb { margin-bottom: 10px; }
.cone-head h2 { font-size: clamp(32px, 3.4vw, 52px); }
.cone-head p:last-child { margin: 12px 0 0; color: #CFC8BA; font-size: clamp(14.5px, 1.05vw, 16.5px); max-width: 46ch; }
.cone-detail { position: relative; min-height: 290px; }
.cdet { position: absolute; inset: 0 0 auto 0; padding: 20px 22px; border-radius: 18px; background: rgba(15, 20, 18, 0.88); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; pointer-events: none; }
.cdet.on { opacity: 1; transform: none; pointer-events: auto; }
.cdet .eb { color: var(--c); }
.cdet h3 { margin: 0 0 4px; font-size: clamp(26px, 2.2vw, 34px); }
.cdet .ccs { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.cstats { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cstats li { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); }
.cstats b { font: 500 21px/1.1 var(--display); color: var(--c); }
.cstats span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ccr { margin: 0; font-size: 14px; color: #D6CFBF; }
.cone-art { position: relative; height: min(76vh, 820px); aspect-ratio: 8 / 9; max-width: calc(100% - 180px); justify-self: start; }
.conesvg, .cone-flow { position: absolute; inset: 0; width: 100%; height: 100%; }
.cone-flow { pointer-events: none; }
.conesvg .mouth { stroke: rgba(236, 230, 217, 0.3); stroke-width: 1.5; transition: stroke .5s; }
.conesvg .band.lit .mouth { stroke: rgba(255, 245, 220, 0.75); }
.conesvg .spout { stroke: rgba(159, 232, 200, 0.35); stroke-width: 2; stroke-dasharray: 2 5; }
.conesvg .shell { fill: rgba(255, 255, 255, 0.025); stroke: rgba(236, 230, 217, 0.16); stroke-width: 1.2; }
.conesvg .fill { opacity: 0; transition: opacity .7s; }
.conesvg .rim { fill: none; stroke: rgba(236, 230, 217, 0.14); stroke-width: 1.2; stroke-dasharray: 4 6; transition: stroke .5s; }
.conesvg .num { fill: rgba(236, 230, 217, 0.35); font: 600 22px var(--body); letter-spacing: 0.06em; transition: fill .5s; }
.conesvg .lead { stroke: rgba(230, 204, 146, 0.5); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0; transition: opacity .5s; }
.conesvg .band.lit .fill { opacity: 1; }
.conesvg .band.lit .rim { stroke: rgba(255, 245, 220, 0.55); stroke-dasharray: none; }
.conesvg .band.lit .num { fill: #0B0D0C; }
.conesvg .band.lit .lead { opacity: 1; }
.conesvg .band.now .fill { filter: drop-shadow(0 0 18px rgba(255, 230, 170, 0.35)); }
.conesvg .tipglow { fill: rgba(159, 232, 200, 0.25); stroke: var(--mint); stroke-width: 1.5; }
.cone-cards { position: absolute; top: 0; bottom: 0; left: 100%; width: 172px; margin-left: 4px; }
.ccard { position: absolute; left: 0; right: 0; top: var(--y); transform: translateY(-50%); padding: 8px 12px; border-radius: 10px; background: rgba(8, 11, 10, 0.8); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); opacity: 0; translate: 10px 0; transition: opacity .5s, translate .5s; }
.ccard.lit { opacity: 1; translate: 0 0; }
.ccard .eb { font-size: 10px; margin: 0; color: var(--c); }
.ccard h3 { margin: 0; font: 600 14px/1.25 var(--body); }
.ccard .ccs { display: none; }
.band.thin { padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 1100px) { .cone-cards { display: none; } .cone-art { justify-self: center; max-width: 100%; } }
@media (max-width: 860px) {
  .cone { height: 560vh; }
  .cone-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 66px var(--gut) 16px; align-items: stretch; }
  .cone-left { display: contents; }
  .cone-head { grid-row: 1; } .cone-head h2 { font-size: 26px; } .cone-head p:last-child { display: none; }
  .cone-art { grid-row: 2; height: 100%; max-height: 42vh; justify-self: center; align-self: center; }
  .cone-detail { grid-row: 3; min-height: 250px; }
  .cdet { padding: 14px 16px; } .cdet h3 { font-size: 22px; } .cstats b { font-size: 17px; } .cstats span { font-size: 10.5px; } .ccr { font-size: 12.5px; }
}

/* ------------------------------------------------------------ ICPs */
.icps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.icp { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 2.2vw, 28px); display: grid; gap: 18px; align-content: start; }
.icp header { display: grid; gap: 6px; }
.icp .tag { justify-self: start; font: 600 11px var(--body); letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(201, 164, 92, 0.14); color: var(--brass-hi); }
.icp .game { margin: 6px 0 0; font: 600 12px var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.icp h3 { font-size: clamp(28px, 2.4vw, 36px); }
.icp header p:last-child { margin: 0; color: #CFC8BA; font-size: 14.5px; }
.icp .stats { display: grid; gap: 10px; }
.icp .stat { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); }
.icp .stat b { font: 500 26px/1 var(--display); color: var(--brass-hi); }
.icp .stat span { font-size: 13px; color: var(--muted); }
.icp dl { margin: 0; display: grid; gap: 4px; }
.icp dt { font: 600 11px var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); margin-top: 8px; }
.icp dd { margin: 0; color: #D6CFBF; font-size: 14.5px; }
.icp dd ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.icp dd li { display: grid; gap: 1px; padding-left: 14px; position: relative; }
.icp dd li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.icp dd li span { font-size: 13px; color: var(--muted); }
.icp .hook { font: italic 500 20px/1.3 var(--display); color: var(--text); }
.icp.split { background: linear-gradient(170deg, rgba(201, 164, 92, 0.1), transparent 50%), var(--panel); }
.aud { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.aud li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 14px; }
.aud b { font: 500 14px var(--mono); color: var(--text); }
.aud i { grid-column: 1 / 3; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; }
.aud i::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 2.4); max-width: 100%; background: var(--c); border-radius: 6px; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(var(--d) + .3s); }
.rv.in .aud i::after { transform: scaleX(1); }
.cmt { font-size: 13px; color: var(--muted) !important; }

/* ------------------------------------------------------------ lifecycle */
.journey { position: relative; }
.journey .pathline { position: absolute; z-index: 1; pointer-events: none; left: 0; right: 0; top: 22px; height: 2px; background: linear-gradient(90deg, rgba(201, 164, 92, 0.15), rgba(201, 164, 92, 0.6), rgba(201, 164, 92, 0.15)); }
.journey .pathline i { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 14px rgba(230, 204, 146, 0.9); animation: travel 9s linear infinite; }
@keyframes travel { from { left: 0; } to { left: calc(100% - 10px); } }
.journey ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.journey .st { position: relative; padding: 50px 16px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.journey .st .n { position: absolute; z-index: 2; top: 10px; left: 16px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); border: 1px solid var(--brass); font: 500 11px var(--mono); color: var(--brass-hi); }
.journey .st h4 { margin: 0; font: 500 26px/1.1 var(--display); }
.journey .st .s { margin: 4px 0 10px; color: var(--muted); font-size: 13.5px; }
.journey .st ul { margin: 0; padding-left: 16px; display: grid; gap: 4px; font-size: 14px; color: #D6CFBF; }
.journey .st .k { margin: 12px 0 0; font: 500 12px var(--mono); color: var(--brass-hi); }
@media (max-width: 1000px) { .journey ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .journey .pathline { display: none; } }
@media (max-width: 600px) { .journey ol { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .journey .pathline i { animation: none; } }

/* who buys: five buyers in numbers */
.icps2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
@media (max-width: 860px) { .icps2 { grid-template-columns: minmax(0, 1fr); } }
.icp2 { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 1.8vw, 24px); display: grid; gap: 12px; align-content: start; }
.icp2 .tag { justify-self: start; margin: 0; font: 600 10.5px var(--body); letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(201, 164, 92, 0.14); color: var(--brass-hi); }
.icp2 h3 { margin: 0; font-size: clamp(22px, 1.8vw, 28px); }
.icp2 .big2 { margin: 0; display: grid; gap: 4px; }
.icp2 .big2 b { font: 500 clamp(40px, 3.6vw, 54px)/1 var(--display); color: var(--brass-hi); }
.icp2 .big2 span { font-size: 13.5px; color: #CFC8BA; }
.icp2 dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.icp2 dl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.icp2 dt { font: 600 10.5px var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); padding-top: 3px; }
.icp2 dd { margin: 0; color: var(--text); font-size: 14px; }
.icp2 .how { margin: 0; font-size: 13px; color: var(--muted); }
.icp2 .src { margin: 0; font-size: 11.5px; }

/* expected early-adopter results: pinned while the bar fills */
.yrsec { position: relative; height: 230vh; }
.yr-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-top: 64px; }
.yr-stage .head { margin-bottom: clamp(16px, 3vh, 32px); }
@media (max-width: 760px) { .yrsec { height: 200vh; } .yr-stage h2 { font-size: 30px; } }

/* ------------------------------------------------------------ GTM: creators who already hold our buyers' attention */
.crs .head { max-width: 880px; }
.cr-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(26px, 3.4vw, 44px); }
.cr-big div { padding: clamp(20px, 2.2vw, 28px); border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 6px; }
.cr-big div:first-child { background: linear-gradient(160deg, rgba(201, 164, 92, 0.16), rgba(15, 20, 18, 0.9) 60%); border-color: rgba(201, 164, 92, 0.4); }
.cr-big b { font: 500 clamp(44px, 4.6vw, 72px)/1 var(--display); color: var(--text); }
.cr-big div:first-child b { color: var(--brass-hi); }
.cr-big span { font-size: 14.5px; color: #CFC8BA; }
.cr-tab { margin-top: clamp(28px, 3.6vw, 44px); }
.cr-hd, .cr { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2fr) minmax(110px, 0.55fr); gap: 18px; align-items: center; }
.cr-hd { padding: 0 0 10px; border-bottom: 1px solid var(--line-2); font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.cr-tab ol { list-style: none; margin: 0; padding: 0; }
.cr { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cr-n { display: grid; gap: 2px; } .cr-n b { font-weight: 600; font-size: 15px; } .cr-n span { font-size: 12.5px; color: var(--dim); }
.cr-bar { position: relative; height: 28px; display: flex; align-items: center; gap: 10px; }
.cr-bar i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, rgba(201, 164, 92, 0.25), rgba(201, 164, 92, 0.7)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 90ms + 120ms); }
.cr.in .cr-bar i { transform: none; }
.cr-bar em { font-style: normal; font: 500 22px/1 var(--display); color: var(--text); white-space: nowrap; }
.cr:first-child .cr-bar i { background: linear-gradient(90deg, rgba(201, 164, 92, 0.4), #E6CC92); }
.cr:first-child .cr-bar em { color: var(--brass-hi); }
.cr-l { display: grid; gap: 2px; text-align: right; } .cr-l b { font: 500 22px/1 var(--display); } .cr-l span { font-size: 12px; color: var(--dim); }
.cr-sp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 3.6vw, 44px); }
.spc { padding: 18px 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.spc b { font: 500 clamp(34px, 3vw, 44px)/1 var(--display); color: var(--brass-hi); }
.spc b small { font: 600 0.42em var(--body); letter-spacing: 0.14em; color: var(--brass); vertical-align: 0.5em; margin-left: 4px; }
.spc span { font-size: 13.5px; line-height: 1.45; color: #CFC8BA; }
.cr-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.cr-plan div { padding: 16px 20px; border-radius: 16px; border: 1px dashed rgba(230, 204, 146, 0.35); display: grid; gap: 4px; }
.cr-plan .eb { margin: 0; }
.cr-plan span { font-size: 14.5px; color: var(--text); }
@media (max-width: 860px) {
  .cr-big, .cr-plan { grid-template-columns: minmax(0, 1fr); }
  .cr-sp { grid-template-columns: minmax(0, 1fr); }
  .cr-hd { display: none; }
  .cr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n l" "b b"; gap: 8px 12px; }
  .cr-n { grid-area: n; } .cr-l { grid-area: l; } .cr-bar { grid-area: b; height: 22px; }
}

/* ------------------------------------------------------------ ICP: a gallery of objects our buyer already owns, our board in the middle */
.fav { position: relative; background: #F8F7F3; color: #1E211F; padding: clamp(70px, 8vw, 120px) 0 clamp(80px, 9vw, 120px); }
.icp-eb { margin: 0; text-align: center; font: 600 12px/1.2 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: #8A6A2C; }
.icp-h { margin: 18px auto 0; max-width: 24ch; text-align: center; font: 500 clamp(34px, 4vw, 62px)/1.04 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: #262A27; text-wrap: balance; }
.icp-lede { margin: 20px auto 0; max-width: 54ch; text-align: center; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: #5B625D; text-wrap: pretty; }
.icp-grid { --cols: 4; --gap: clamp(18px, 2.4vw, 36px); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(30px, 3.4vw, 48px) var(--gap); max-width: 1120px; margin: clamp(40px, 5vw, 72px) auto 0; }
.icp-grid > .icp-o { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
@media (max-width: 760px) { .icp-grid { --cols: 2; --gap: 14px; row-gap: 28px; } }
.icp-o { margin: 0; display: grid; gap: 12px; justify-items: center; text-align: center; }
.icp-art { position: relative; width: 100%; aspect-ratio: 1 / 0.86; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(70% 70% at 50% 45%, #FFFFFF, #F1EEE7); border: 1px solid rgba(30, 33, 31, 0.06); overflow: hidden; }
.icp-ic { width: 46%; height: auto; fill: none; stroke: #2D312E; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.82; }
.icp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; filter: drop-shadow(0 12px 14px rgba(30, 33, 31, 0.16)); }
.icp-o figcaption { display: grid; gap: 3px; }
.icp-o b { font: 600 15px/1.3 var(--body); color: #1E211F; min-height: 2.6em; display: grid; align-items: end; }
.icp-p { font: 500 24px/1.1 var(--display); color: #8A6A2C; }
.icp-o em { font-style: normal; font-size: 13.5px; line-height: 1.4; color: #6E7671; max-width: 22ch; justify-self: center; min-height: 2.8em; }
.icp-proof { margin: clamp(48px, 6vw, 84px) auto 0; max-width: 780px; text-align: center; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: #4A514C; text-wrap: pretty; }
.icp-proof b { display: block; margin-bottom: 8px; font: 500 clamp(28px, 2.6vw, 38px)/1.1 var(--display); color: #1E211F; }
/* the price line, on a log scale: smart boards to the left, maison game sets to the right */
.pline { margin: clamp(56px, 7vw, 96px) auto 0; max-width: 1080px; }
.pline .eb { text-align: center; color: #8A6A2C; }
.pl-track { position: relative; list-style: none; margin: 96px 0 0; padding: 0; height: 2px; background: linear-gradient(90deg, rgba(30, 33, 31, 0.15), rgba(138, 106, 44, 0.55) 30%, rgba(30, 33, 31, 0.2)); }
.pl-track li { position: absolute; left: var(--x); top: 0; width: 0; }
.pl-track li i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #F8F7F3; border: 2px solid #6E7671; }
.pl-track .pk { position: absolute; left: 0; transform: translateX(-50%); width: 124px; display: grid; gap: 3px; justify-items: center; text-align: center; }
.pl-track li:nth-child(odd) .pk { top: 16px; }
.pl-track li:nth-child(even) .pk { bottom: 16px; }
.pl-track li b { font: 500 19px/1 var(--display); color: #1E211F; }
.pl-track li span { font-size: 12px; line-height: 1.3; color: #6E7671; }
.pl-track li.pk-us i { left: -9px; top: -9px; width: 18px; height: 18px; background: #C9A45C; border-color: #8A6A2C; box-shadow: 0 0 0 6px rgba(201, 164, 92, 0.2); }
.pl-track li.pk-us b { font-size: 26px; color: #8A6A2C; }
.pl-track li.pk-us span { font-weight: 600; color: #1E211F; }
.pl-track li.pk-lux i { border-color: #A07CB0; }
.pl-ends { display: flex; justify-content: space-between; margin-top: 82px; font: 600 11px var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: #8B918C; }
.pl-note { margin: 18px auto 0; text-align: center; font: 500 clamp(22px, 2vw, 30px)/1.2 var(--display); color: #1E211F; }
@media (max-width: 760px) {
  .icp-o em { font-size: 12px; }
  .pl-track { height: auto; margin-top: 26px; background: none; display: grid; gap: 10px; }
  .pl-track li { position: relative; left: auto; width: auto; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 0 10px 18px; border-bottom: 1px solid rgba(30, 33, 31, 0.08); }
  .pl-track li i { left: 0; top: 50%; margin-top: -6px; }
  .pl-track li.pk-us i { left: -3px; top: 50%; margin-top: -9px; }
  .pl-track .pk { position: static; transform: none; width: auto; display: contents; }
  .pl-track li b, .pl-track li span { text-align: left; }
  .pl-ends { display: none; }
}


/* ------------------------------------------------------------ the luxury CAC band, named right above the break-even marker */
.cacbar .lxlab { position: absolute; left: var(--a); width: calc(var(--b) - var(--a)); bottom: 20px; height: 168px; border-left: 1.5px dashed rgba(201, 155, 218, 0.75); border-right: 1.5px dashed rgba(201, 155, 218, 0.75); pointer-events: none; }
.cacbar .lxlab p { position: absolute; left: 50%; top: 0; translate: -50% -100%; margin: 0; display: grid; justify-items: center; gap: 2px; width: max-content; max-width: min(92vw, 520px); text-align: center; padding: 10px 18px 12px; border-radius: 14px; background: rgba(201, 155, 218, 0.14); border: 1.5px solid #C99BDA; box-shadow: 0 0 0 6px rgba(201, 155, 218, 0.06); }
.cacbar .lxlab span { font: 600 15px/1.3 var(--body); color: #EAD6F2; }
.cacbar .lxlab b { font: 500 clamp(30px, 2.8vw, 40px)/1 var(--display); color: #E2C4EE; }
.cacbar { padding-top: 250px; }
@media (max-width: 720px) {
  .cacbar { padding-top: 330px; }
  .cacbar .lxlab { height: 214px; }
  .cacbar .lxlab p { max-width: 260px; padding: 8px 12px 10px; }
  .cacbar .lxlab span { font-size: 13px; }
}

/* ------------------------------------------------------------ ICPs on white: dark fades into light, the boxes stay green */
.icpw { background: linear-gradient(180deg, var(--ink) 0, #1B1F1C 60px, #F8F7F3 clamp(260px, 28vw, 420px)); color: #1E211F; padding-top: clamp(240px, 26vw, 400px); padding-bottom: clamp(30px, 4vw, 60px); }
.icpw .head h2 { color: #1E211F; }
.icpw .icp2, .icpw .icp2 h3 { color: var(--text); }
.icpw .icp2 { background: linear-gradient(165deg, #1B3A2D, #12261E 70%); border-color: rgba(201, 164, 92, 0.3); box-shadow: 0 26px 48px -28px rgba(12, 38, 28, 0.55); }
.icpw .icp2 dl, .icpw .icp2 dl div { border-color: rgba(236, 230, 217, 0.14); }
.icpw .icp2 .how { color: #B9C4BB; }

/* ------------------------------------------------------------ break-even CAC: our expected CAC, called out like the luxury band */
.cacbar .hglab { position: absolute; left: var(--x); bottom: 20px; height: 168px; width: 0; border-left: 1.5px dashed rgba(159, 232, 200, 0.75); pointer-events: none; }
.cacbar .hglab p { position: absolute; left: 0; top: 0; translate: -50% -100%; margin: 0; display: grid; justify-items: center; gap: 2px; width: max-content; text-align: center; padding: 10px 22px 12px; border-radius: 14px; background: rgba(159, 232, 200, 0.12); border: 1.5px solid var(--mint); box-shadow: 0 0 0 6px rgba(159, 232, 200, 0.06); }
.cacbar .hglab span { font: 600 15px/1.3 var(--body); color: #D5F5E6; }
.cacbar .hglab b { font: 500 clamp(30px, 2.8vw, 40px)/1 var(--display); color: var(--mint); }
@media (max-width: 720px) {
  .cacbar { padding-top: 350px; }
  .cacbar .hglab { height: 150px; }
  .cacbar .hglab p { padding: 8px 14px 10px; }
  .cacbar .hglab span { font-size: 13px; }
  .cacbar .lxlab { height: 252px; }
}

/* ------------------------------------------------------------ early adopters: a lean team */
.yr-lean { margin-top: 14px; }

/* ------------------------------------------------------------ the core also plays iGames */
.icp2 .igb { margin-top: 4px; padding: 14px 14px 6px; border-radius: 14px; background: rgba(224, 96, 90, 0.1); border: 1px solid rgba(224, 96, 90, 0.38); }
.icp2 .igb-t { margin: 0 0 6px; font: 600 11px var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: #F2A39D; }
.icp2 .igb dl { border-top: 0; }
.icp2 .igb dl div { grid-template-columns: 92px minmax(0, 1fr); }
.icp2 .igb dl div:last-child { border-bottom: 0; }
.icp2 .igb dt { color: #F2A39D; }
.icp2 .igb dl div:last-child dd { color: var(--brass-hi); font-weight: 600; }

/* ------------------------------------------------------------ GTM alpha: two behaviours feed luxury, luxury feeds retail */
.alpha .head { max-width: 980px; }
.alf { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(110px, 0.6fr) minmax(0, 1fr) minmax(110px, 0.6fr) minmax(0, 0.95fr); align-items: center; margin-top: clamp(10px, 2vw, 24px); }
.alf-in { display: grid; gap: 16px; }
.ac { position: relative; padding: clamp(16px, 1.6vw, 22px); border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, var(--panel)), var(--panel) 65%); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); display: grid; gap: 10px; align-content: start; min-width: 0; }
.ac-eb { margin: 0; font: 600 11px var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); }
.ac h3 { margin: 0; font-size: clamp(24px, 2vw, 30px); }
.ac-lab { justify-self: start; margin: 0 0 2px; font: 600 12.5px/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid var(--c); }
.ac-st { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.ac-st li { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.ac-st b { font: 500 clamp(26px, 2.2vw, 34px)/1 var(--display); color: var(--c); }
.ac-st span { font-size: 12.5px; line-height: 1.4; color: #CFC8BA; }
.ac-lx { padding: clamp(22px, 2.2vw, 30px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 30px 70px -30px color-mix(in srgb, var(--c) 55%, transparent); }
.ac-lx h3 { font-size: clamp(28px, 2.4vw, 36px); }
.alf-a { position: relative; align-self: stretch; min-height: 60px; }
.alf-a > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.al-p { fill: none; stroke: var(--brass); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.3, .7, .2, 1) calc(var(--i, 0) * 120ms + 200ms); }
.alf-a.in .al-p { stroke-dashoffset: 0; }
.al-hd { position: absolute; right: -2px; top: 50%; width: 14px; height: 14px; margin-top: -7px; fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s ease calc(var(--i, 0) * 120ms + 1000ms); }
.alf-a.in .al-hd { opacity: 1; }
.alf-a p { position: absolute; margin: 0; font: 600 12.5px/1.4 var(--body); color: var(--brass-hi); text-align: center; text-wrap: balance; }
.alf-a1 p { left: 6px; right: 34%; top: 50%; translate: 0 -50%; }
.alf-a2 p { left: 8px; right: 14px; bottom: calc(50% + 12px); }
@media (max-width: 980px) {
  .alf { grid-template-columns: minmax(0, 1fr); }
  .alf-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .alf-a { min-height: 0; padding: 20px 0 22px 40px; }
  .alf-a > svg, .al-hd { display: none; }
  .alf-a::before { content: ""; position: absolute; left: 18px; top: 8px; bottom: 16px; border-left: 1.6px dashed var(--brass); }
  .alf-a::after { content: ""; position: absolute; left: 12.5px; bottom: 6px; border: 6px solid transparent; border-top: 10px solid var(--brass); border-bottom: 0; }
  .alf-a p, .alf-a1 p, .alf-a2 p { position: static; translate: none; text-align: left; font-size: 14px; }
}
@media (max-width: 560px) { .alf-in { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 861px) {
  .icpw .icps2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
  .icp2 .igb dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .icp2 .igb dl div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .icp2 .igb dl div:nth-last-child(2) { border-bottom: 0; }
}
.icp2 .igb dl div { align-content: start; align-items: start; }
.icp2 .igb dd b { display: block; font: 500 clamp(30px, 2.4vw, 38px)/1 var(--display); color: var(--brass-hi); }
.icp2 .igb dd small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; line-height: 1.4; color: #E8D9B5; }

/* ------------------------------------------------------------ the favorites now follow GTM Alpha: dark fades into light here */
.fav { background: linear-gradient(180deg, var(--ink) 0, #1B1F1C 60px, #F8F7F3 clamp(260px, 28vw, 420px)); padding-top: clamp(240px, 26vw, 400px); }
.icp-grp { display: flex; align-items: center; gap: 16px; max-width: 1120px; margin: clamp(52px, 6vw, 84px) auto 0; font: 600 12px/1.2 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: #8A6A2C; }
.icp-grp::before, .icp-grp::after { content: ""; flex: 1; height: 1px; background: rgba(138, 106, 44, 0.3); }
.icp-lede + .icp-grp { margin-top: clamp(40px, 4.4vw, 60px); }
.icp-grp + .icp-grid { margin-top: clamp(24px, 2.6vw, 36px); }

/* ------------------------------------------------------------ GTM Alpha on phones: a real arrow, a labelled pill, flowing dashes */
.al-m { display: none; }
@media (max-width: 980px) {
  .alf-a { display: flex; flex-direction: column; align-items: center; padding: 6px 0; min-height: 0; }
  .alf-a::before, .alf-a::after { content: none; }
  .alf-a > .al-m { display: block; width: 24px; overflow: visible; }
  .al-stem { height: 34px; } .al-tip { height: 56px; }
  .al-flow { fill: none; stroke: var(--brass-hi); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 6; animation: alflow 0.9s linear infinite; }
  .al-head { fill: none; stroke: var(--brass-hi); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .alf-a p, .alf-a1 p, .alf-a2 p { position: static; translate: none; margin: 0; max-width: 320px; padding: 10px 18px; border-radius: 999px; text-align: center; font: 600 14px/1.4 var(--body); color: var(--brass-hi); background: rgba(201, 164, 92, 0.12); border: 1px solid rgba(201, 164, 92, 0.55); box-shadow: 0 0 24px -6px rgba(201, 164, 92, 0.35); }
}
@keyframes alflow { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { .al-flow { animation: none; } }

/* favorites close the page: white fades back to the footer's dark green */
.fav { background: linear-gradient(180deg, var(--ink) 0, #1B1F1C 60px, #F8F7F3 clamp(260px, 28vw, 420px), #F8F7F3 calc(100% - clamp(260px, 28vw, 420px)), #1A2A22 calc(100% - 70px), #0A1610 100%);
  padding-bottom: clamp(240px, 26vw, 400px); }
.fav + .next { background: radial-gradient(80% 80% at 50% 40%, #10251C, #050605 70%), #0A1610; }
.fav + .next::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; background: linear-gradient(180deg, #0A1610, rgba(10, 22, 16, 0)); pointer-events: none; }
.fav + .next .next-inner { position: relative; z-index: 1; }