/* Four pillars, Meet Cortex and the referral lifecycle. Additive to the existing page. */

/* Pillars */
.pillars{padding:120px 0 110px;background:#fff}
.pillars-intro{max-width:920px;margin-bottom:56px}
.pillars-intro h2 em{font-weight:400}
.pillars-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px}
.pillar{border:1px solid var(--line);border-radius:22px;padding:30px 32px;background:#fff;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.pillar:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(16,43,70,.4)}
.pillar-index{display:block;font-size:.74rem;letter-spacing:.13em;font-weight:600;color:var(--teal)}
.pillar h3{font-size:1.3rem;font-weight:550;letter-spacing:-.02em;line-height:1.2;margin:14px 0 8px;color:var(--navy)}
.pillar-line{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:1.4rem;line-height:1.25;color:var(--teal);margin:0 0 12px}
.pillar p{color:var(--muted);line-height:1.62;margin:0}
.pillar .pillar-line{color:var(--teal)}
.pillar-feature{grid-row:1/span 3;display:grid;grid-template-columns:1fr;align-content:space-between;gap:34px;padding:44px 42px 0;overflow:hidden;border-color:transparent;color:#e8f4f6;
 background:radial-gradient(700px 420px at 85% 100%,rgba(45,212,191,.18),transparent 60%),linear-gradient(160deg,#10284a 0%,#0b1c31 58%,#0b2433 100%)}
.pillar-feature .pillar-index{color:var(--mint)}
.pillar-feature h3{font-size:clamp(1.7rem,2.4vw,2.2rem);color:#fff}
.pillar-feature .pillar-line{font-size:clamp(1.7rem,2.4vw,2.2rem);color:var(--mint)}
.pillar-feature p{color:#b9cbd7;max-width:46ch}
.pillar-phone{display:flex;justify-content:center;align-items:flex-end}
.phone-frame{width:min(280px,100%);border-radius:40px 40px 0 0;padding:11px 11px 0;background:linear-gradient(150deg,#34506f,#0c1726 70%);box-shadow:0 -10px 60px -20px rgba(94,234,212,.35),inset 0 0 0 1px rgba(255,255,255,.09)}
.phone-screen{background:#f6fafb;border-radius:31px 31px 0 0;padding:24px 16px 22px;color:var(--navy)}
.pillar-feature .phone-kicker{font-weight:600;font-size:.95rem;margin:0 0 14px;color:var(--navy);max-width:none}
.phone-pick{width:100%;border:0;border-radius:12px;background:var(--navy);color:#fff;padding:12px;font:inherit;font-weight:600;font-size:.88rem;cursor:default;position:relative;overflow:hidden}
.phone-list{list-style:none;margin:12px 0 14px;padding:0}
.phone-list li{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid #e3ebee;font-size:.86rem;color:var(--navy)}
.phone-list span{width:28px;height:28px;flex:none;border-radius:50%;background:#e2eef1;display:grid;place-items:center;font-size:.66rem;font-weight:650;color:#3f5b70}
.phone-list .picked{background:#e4f7f1;border-radius:11px;border-bottom-color:transparent}
.phone-list .picked span{background:var(--mint);color:#0b2034}
.phone-list b{margin-left:auto;font-size:.68rem;color:var(--teal);font-weight:650}
.phone-send{border-radius:12px;background:var(--mint);color:#0b2034;text-align:center;padding:11px;font-weight:650;font-size:.88rem}
.motion-ready .phone-pick::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:rgba(144,239,214,.7);transform:scale(0);animation:tap 4.8s ease-out infinite}
.motion-ready .phone-list .picked{animation:pick 4.8s ease-in-out infinite}
@keyframes tap{0%,8%{transform:scale(0);opacity:.9}22%{transform:scale(12);opacity:0}100%{transform:scale(12);opacity:0}}
@keyframes pick{0%,24%{background:transparent}34%,86%{background:#e4f7f1}100%{background:transparent}}

/* Meet Cortex */
.cortex{position:relative;overflow:hidden;padding:130px 0;color:#e6f1f5;
 background:radial-gradient(900px 560px at 72% 52%,rgba(30,26,70,.55) 0%,rgba(10,12,28,.5) 45%,transparent 75%),linear-gradient(180deg,#04060c 0%,#060a14 50%,#04060c 100%)}
.cortex-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:48px;align-items:center}
.cortex .eyebrow{color:var(--mint)}
.cortex h2{color:#fff}
.cortex h2 em{color:#a6ecdd;font-weight:400}
.cortex-lede{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;color:#dbe9ef;margin:24px 0 28px;max-width:32ch}
.cortex-points{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:14px}
.cortex-points li{color:#a8bccb;line-height:1.55;padding-left:22px;position:relative}
.cortex-points li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#5eead4,#8b7cf6);box-shadow:0 0 10px rgba(94,234,212,.6)}
.cortex-points strong{color:#fff;font-weight:600}
.cortex-actions-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#7f95a8;margin:0 0 10px}
.cortex-actions{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.cortex-actions li{border:1px solid rgba(143,245,224,.26);border-radius:999px;padding:6px 12px;font-size:.8rem;color:#cde8e3;background:rgba(15,40,60,.45);transition:background .35s,color .35s,border-color .35s}
.cortex-actions li.is-current{border-color:#5eead4;color:#0b1a2e;background:#90efd6}
.cortex-status{font-size:.8rem;color:#8ea5b6;margin:0}
/* The Cortex frame is a size container: the overlay (labels and card) scales with it, so it stays lined up with the film at any width. */
.cortex-visual{position:relative;margin:0;container-type:inline-size}
.cortex-visual svg{width:100%;height:auto;display:block;overflow:visible}
.cx-inputs path{stroke:url(#cx-signal);stroke-width:1.4}
.cx-labels text{fill:#8aa1b3;font:500 17px Outfit,system-ui,sans-serif;letter-spacing:.01em}
.cx-pulse{stroke:#b6fbec;stroke-width:2.6;stroke-dasharray:9 100;stroke-dashoffset:109;animation:cx-flow 3.6s cubic-bezier(.45,0,.2,1) infinite}
.cx-pulse-2{animation-delay:-.72s}.cx-pulse-3{animation-delay:-1.44s}.cx-pulse-4{animation-delay:-2.16s}.cx-pulse-5{animation-delay:-2.88s}
.cx-out-pulse{stroke-dasharray:16 100;stroke-dashoffset:116;animation:cx-flow 3.6s cubic-bezier(.45,0,.2,1) infinite;animation-delay:-1.8s}
@keyframes cx-flow{to{stroke-dashoffset:0}}
.cx-ring{animation:cx-spin 42s linear infinite}
.cx-ring-b{animation-duration:27s;animation-direction:reverse}
@keyframes cx-spin{to{transform:rotate(360deg)}}
.cx-core{animation:cx-breathe 3.6s ease-in-out infinite}
@keyframes cx-breathe{50%{transform:scale(1.35);opacity:.7}}
.cx-halo{animation:cx-halo 7.2s ease-in-out infinite}
@keyframes cx-halo{50%{opacity:.7}}
.cortex-output{position:absolute;left:80.5%;top:50%;transform:translateY(-50%);display:grid;gap:.2em;font-size:clamp(10px,1.95cqw,18px);padding:.68em 1.02em;border-radius:.8em;white-space:nowrap;
 background:rgba(9,20,38,.8);border:1px solid rgba(94,234,212,.5);box-shadow:0 0 42px -10px rgba(94,234,212,.55),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.cortex-output-kicker{font-size:max(.52em,6.5px);letter-spacing:.16em;text-transform:uppercase;color:#7f95a8}
.cortex-output-action{font-size:1em;font-weight:600;color:#fff;transition:opacity .35s,transform .35s}
.cortex-output-action.is-changing{opacity:0;transform:translateY(6px)}

/* Lifecycle */
.lifecycle{padding:120px 0;background:linear-gradient(180deg,#f3f7f8 0%,#eaf5f2 100%)}
.lifecycle-intro{max-width:760px;margin-bottom:64px}
.lifecycle-intro h2 em{font-weight:400}
.lifecycle-intro p:not(.eyebrow){color:var(--muted);font-size:1.1rem;line-height:1.6;max-width:58ch;margin:0}
.lifecycle-track{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;position:relative}
.lifecycle-track::before,.lifecycle-track::after{content:'';position:absolute;left:10px;right:calc((100% - 96px)/7 - 10px);top:10px;height:2px;background:#cfe0e3}
.lifecycle-track::after{background:linear-gradient(90deg,var(--teal),#5eead4);transform-origin:left;transition:transform 2.4s cubic-bezier(.22,1,.36,1)}
.lifecycle-track li{position:relative}
.lc-dot{display:block;width:22px;height:22px;border-radius:50%;position:relative;z-index:1;margin-bottom:20px;background:var(--mint);border:2px solid var(--teal);box-shadow:0 0 0 6px rgba(0,126,133,.1);transition:background .45s,border-color .45s,box-shadow .45s}
.lifecycle-track h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--navy);margin:0 0 6px}
.lifecycle-track p{font-size:.88rem;line-height:1.5;color:var(--muted);margin:0}
.lc-loop h3{color:var(--teal)}
.lc-loop .lc-dot{background:linear-gradient(135deg,#5eead4,#8b7cf6);border-color:#fff}
.lifecycle-return{margin:26px 10px 0;height:34px;border:2px dashed #9fc9c8;border-top:0;border-radius:0 0 26px 26px;position:relative;display:flex;justify-content:center}
.lifecycle-return::before{content:'';position:absolute;left:-7px;top:-9px;border:6px solid transparent;border-bottom:9px solid #9fc9c8}
.lifecycle-return span{position:absolute;bottom:-11px;background:#eef6f4;padding:0 12px;font-size:.78rem;letter-spacing:.06em;color:#006a70}
/* Progressive: without JavaScript the track is complete; with motion it draws on arrival. */
.motion-ready .lifecycle:not(.is-visible) .lifecycle-track::after{transform:scaleX(0)}
.motion-ready .lifecycle:not(.is-visible) .lc-dot{background:#fff;border-color:#9fc9c8;box-shadow:none}
.lifecycle-track li:nth-child(2) .lc-dot{transition-delay:.3s}.lifecycle-track li:nth-child(3) .lc-dot{transition-delay:.6s}.lifecycle-track li:nth-child(4) .lc-dot{transition-delay:.9s}
.lifecycle-track li:nth-child(5) .lc-dot{transition-delay:1.2s}.lifecycle-track li:nth-child(6) .lc-dot{transition-delay:1.5s}.lifecycle-track li:nth-child(7) .lc-dot{transition-delay:1.8s}

/* Pause, suspend and off-screen: every loop stops. Reduced motion shows the resolved state. */
.motion-paused :is(.cx-pulse,.cx-out-pulse,.cx-ring,.cx-core,.cx-halo,.phone-pick,.phone-list .picked),
.motion-suspended :is(.cx-pulse,.cx-out-pulse,.cx-ring,.cx-core,.cx-halo,.phone-pick,.phone-list .picked),
.cx-offscreen :is(.cx-pulse,.cx-out-pulse,.cx-ring,.cx-core,.cx-halo){animation-play-state:paused}
.motion-paused .phone-pick::after{animation:none}
.motion-paused .lifecycle .lifecycle-track::after{transform:none}
.motion-paused .lifecycle .lc-dot{background:var(--mint);border-color:var(--teal);box-shadow:0 0 0 6px rgba(0,126,133,.1)}
@media (prefers-reduced-motion:reduce){
 .cx-pulse,.cx-out-pulse{display:none}
 .cx-ring,.cx-core,.cx-halo,.phone-list .picked{animation:none}
 .phone-pick::after{display:none}
 .lifecycle-track::after,.lc-dot{transition:none}
}

@media (max-width:980px){
 .pillars-grid{grid-template-columns:1fr}
 .pillar-feature{grid-row:auto}
 .cortex-grid{grid-template-columns:1fr;gap:28px}
 .cortex-visual{max-width:640px;justify-self:center;width:100%}
 .lifecycle-track{grid-template-columns:1fr;gap:26px;padding-left:44px}
 .lifecycle-track::before,.lifecycle-track::after{display:none}
 .lifecycle-track li:not(:last-child)::before,.lifecycle-track li:not(:last-child)::after{content:'';position:absolute;left:-34px;top:11px;bottom:-37px;width:2px;background:#cfe0e3}
 .lifecycle-track li:not(:last-child)::after{background:var(--teal);transform-origin:top;transition:transform .4s ease-out}
 .motion-ready .lifecycle:not(.is-visible) .lifecycle-track li::after{transform:scaleY(0)}
 .lc-dot{position:absolute;left:-44px;top:0;margin:0}
 .lifecycle-return{display:none}
}
@media (max-width:640px){
 .pillars,.lifecycle{padding:84px 0}
 .cortex{padding:90px 0}
 .pillar{padding:26px 22px}
 .pillar-feature{padding:32px 24px 0}
 .cx-labels{display:none}
 .lifecycle-intro h2 br{display:none}
}
/* Live Cortex render (cortex-orb.js). The SVG remains the fallback when canvas is unavailable. */
.cx-canvas{display:block;width:100%}
/* The Cortex film. Its edges fade into the section so the frame never shows. */
.cx-film-wrap{position:relative;aspect-ratio:1000/560;overflow:hidden;isolation:isolate;
 -webkit-mask-image:radial-gradient(ellipse 72% 78% at 52% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 78% at 52% 50%,#000 58%,transparent 100%)}
.cx-film{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;background:#030408}
.cortex-visual.cx-live>svg{display:none}
.cx-live-labels{position:absolute;left:0;right:0;top:0;aspect-ratio:1000/560;pointer-events:none}
.cx-live-labels span{position:absolute;transform:translateY(-50%);font:500 clamp(8.5px,1.42cqw,14px)/1 Outfit,system-ui,sans-serif;color:#eef2f7;letter-spacing:.01em;white-space:nowrap;
 padding:.42em .78em;border-radius:999px;background:rgba(6,8,16,.66);border:1px solid rgba(255,214,170,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 12px rgba(0,0,0,.35)}
.cortex-output{transition:border-color .5s,box-shadow .5s}
.cortex-output.is-hit{border-color:#b3a6ff;box-shadow:0 0 0 1px rgba(170,155,255,.5),0 0 80px -8px rgba(140,120,255,.85),inset 0 1px 0 rgba(255,255,255,.12)}
.picked>b{color:#006a70}
/* Pillars: the problem each pillar answers. */
.pillars-sub{color:var(--muted);font-size:1.1rem;line-height:1.6;max-width:62ch;margin:18px 0 0}
/* Cortex detail: an example recommendation, what each step means, and the guardrails. */
.cortex-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:22px;margin-top:72px}
.cortex-detail>*{border:1px solid rgba(143,245,224,.16);border-radius:18px;padding:26px;background:rgba(12,30,52,.55)}
.cortex-detail :is(h2,h3){color:#fff;font-size:1.1rem;font-weight:600;margin:0 0 16px}
.cx-example{background:linear-gradient(160deg,rgba(24,52,84,.85),rgba(10,24,44,.9));box-shadow:0 24px 60px rgba(0,0,0,.25)}
.cx-example-kicker,.cx-example-why{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8ea5b6;margin:0 0 14px}
.cx-example-why{margin:20px 0 10px}
.cx-example ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.cx-example li{color:#dbe9ef;font-size:.93rem;line-height:1.45;padding-left:20px;position:relative}
.cx-example li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:#5eead4}
.cx-example-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.cx-example-buttons span{border:1px solid rgba(143,245,224,.3);border-radius:9px;padding:8px 12px;font-size:.82rem;color:#cde8e3}
.cx-example-buttons .primary{background:#fff;color:#0b1a2e;border-color:#fff;font-weight:600}
.cx-example-note{font-size:.75rem;color:#8ea5b6;margin:16px 0 0}
.cx-glossary dl{margin:0;display:grid;gap:12px}
.cx-glossary dl>div{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:baseline}
.cx-glossary dt{color:#90efd6;font-weight:600;font-size:.9rem}
.cx-glossary dd{margin:0;color:#b9cbd6;font-size:.9rem;line-height:1.5}
.cx-guardrails ul{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.cx-guardrails li{color:#b9cbd6;font-size:.92rem;line-height:1.55}
.cx-guardrails strong{display:block;color:#fff;font-weight:600;margin-bottom:3px}
/* Lifecycle: who does each step. */
.lc-who{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#006a70;background:#dff3ef;border-radius:999px;padding:3px 9px;margin-bottom:10px}
.lc-who.lc-client{color:#4b3fb3;background:#ebe8fd}
.lc-who.lc-reflane{color:#102b46;background:#dde7ef}
@media (max-width:980px){.cortex-detail{grid-template-columns:1fr;margin-top:48px}}
@media (max-width:640px){.cortex-detail>*{padding:20px}.cx-glossary dl>div{grid-template-columns:1fr;gap:2px}}
/* Cortex: why it matters, how it decides, and a ranked day of recommendations. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cx-contrast{margin-top:88px}
.cx-contrast :is(h2,h3),.cx-flow :is(h2,h3){color:#fff;font-size:clamp(1.7rem,3vw,2.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.1;margin:0 0 28px}
.cx-contrast :is(h2,h3) em{color:#a6ecdd;font-weight:400}
.cx-contrast table{width:100%;border-collapse:collapse;font-size:.98rem}
.cx-contrast th,.cx-contrast td{text-align:left;padding:16px 18px;border-bottom:1px solid rgba(143,245,224,.12);vertical-align:top}
.cx-contrast thead th{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8ea5b6;font-weight:500}
.cx-contrast thead th:last-child{color:#90efd6}
.cx-contrast tbody th{color:#fff;font-weight:600;width:26%}
.cx-contrast tbody td{color:#8ea5b6}
.cx-contrast tbody td:last-child{color:#e6fbf5;background:rgba(94,234,212,.06)}
.cx-flow{margin-top:88px}
.cx-flow ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:none}
.cx-flow li{border:1px solid rgba(143,245,224,.16);border-radius:16px;padding:22px 20px;background:rgba(12,30,52,.55);position:relative}
.cx-flow li:not(:last-child)::after{content:'';position:absolute;right:-12px;top:34px;width:10px;height:2px;background:#5eead4;opacity:.6}
.cx-flow li span{display:block;font-size:.72rem;letter-spacing:.14em;color:#5eead4;margin-bottom:12px}
.cx-flow li strong{display:block;color:#fff;font-size:1.05rem;font-weight:600;margin-bottom:8px}
.cx-flow li p{color:#a8bccb;font-size:.9rem;line-height:1.55;margin:0}
.cx-queue{list-style:none;padding:0;margin:0}
.cx-queue>li{padding:14px 0;border-bottom:1px solid rgba(143,245,224,.12)}
.cx-queue>li:first-child{padding-top:0}
.cx-queue>li:not(.is-open){opacity:.8}
.cx-q-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cx-q-row strong{display:block;color:#fff;font-size:1rem;font-weight:600}
.cx-q-row div span{font-size:.82rem;color:#a8bccb}
.cx-tag{border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:600;white-space:nowrap}
.cx-ask{background:#90efd6;color:#0b1a2e}.cx-thank{background:#c9c1ff;color:#1c1450}.cx-follow{background:#bfe3ff;color:#0b2540}.cx-wait{background:transparent;color:#a8bccb;border:1px solid rgba(168,188,203,.4)}
.cx-queue .cx-example-why{margin:14px 0 8px}
@media (max-width:1100px){.cx-flow ol{grid-template-columns:repeat(3,minmax(0,1fr))}.cx-flow li::after{display:none}}
@media (max-width:640px){.cx-flow ol{grid-template-columns:1fr}.cx-contrast,.cx-flow{margin-top:60px}.cx-contrast th,.cx-contrast td{padding:12px 10px;font-size:.88rem}.cx-contrast tbody th{width:32%}}
.cx-queue>li{padding-left:0}.cx-queue>li::before{display:none}
/* Cortex page. */
.cortex-page{background:#04060c}
.cx-header .cx-header-links{display:flex;align-items:center;gap:22px}
.cx-header .text-link{color:var(--navy);border-color:#b4c9d0}
.cortex-page .cortex{padding-top:96px}
.cx-motion{display:inline-block;margin:0 0 14px;background:transparent;border:1px solid rgba(143,245,224,.3);color:#cde8e3;border-radius:999px;padding:6px 14px;font-size:.8rem;cursor:pointer}
.cx-motion:hover{background:rgba(143,245,224,.08)}
.cx-cta{background:#0b1a2e;color:#fff;padding:40px 0 110px}
.cx-cta .container{border-top:1px solid rgba(143,245,224,.14);padding-top:72px}
.cx-cta h2{color:#fff;max-width:18ch}.cx-cta h2 em{color:#a6ecdd;font-weight:400}
.cx-cta p{color:#b9cbd6;font-size:1.1rem;max-width:56ch}
.cx-cta-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}
@media (max-width:640px){.cx-header .text-link{display:none}.cortex-page .cortex{padding-top:64px}}
.cortex h1{font-size:clamp(2.6rem,4.4vw,4.2rem);color:#fff;margin-bottom:28px}.cortex h1 em{color:#a6ecdd;font-weight:400}
/* What is Reflane: the referral loop as a cycle, then the plain-language explanation. */
.loop-visual{margin:56px 0 120px;display:flex;flex-direction:column;align-items:center}
.loop-caption{font-size:.76rem;letter-spacing:.13em;font-weight:600;color:#006a70;margin-bottom:96px;text-align:center}
.loop-orbit{position:relative;width:360px;max-width:100%}
.loop-disc{position:relative;width:100%;aspect-ratio:1}
.loop-ring{display:block;width:100%;height:100%;overflow:visible}
.loop-track{fill:none;stroke:#cfe0e3;stroke-width:1.5}

.loop-trail{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:55 305;stroke-dashoffset:-215;opacity:.85}
.loop-head{fill:#5eead4;filter:drop-shadow(0 0 4px rgba(94,234,212,.9))}
.loop-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 22%}
.loop-center-kicker{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.loop-center-name{font-size:1.35rem;font-weight:600;color:var(--navy);margin:6px 0 4px;line-height:1.2}
.loop-center-desc{font-size:.92rem;color:var(--muted);line-height:1.45}
.loop-center.is-changing :is(.loop-center-kicker,.loop-center-name,.loop-center-desc){opacity:0;transform:translateY(5px)}
.loop-center :is(.loop-center-kicker,.loop-center-name,.loop-center-desc){transition:opacity .28s,transform .28s}
.loop-steps{list-style:none;margin:0;padding:0;position:absolute;left:0;top:0;width:100%;aspect-ratio:1}
.loop-step{position:absolute;width:0;height:0}
.loop-step-1{left:50%;top:4%}.loop-step-2{left:89.8%;top:27%}.loop-step-3{left:89.8%;top:73%}.loop-step-4{left:50%;top:96%}.loop-step-5{left:10.2%;top:73%}.loop-step-6{left:10.2%;top:27%}
.loop-dot{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #9fc9c8;transition:background .4s,border-color .4s,box-shadow .4s,transform .4s}
.loop-text{position:absolute;width:190px;display:grid;gap:3px}
.loop-text strong{font-size:.95rem;color:var(--navy);transition:color .4s}
.loop-text span{font-size:.82rem;color:var(--muted);line-height:1.4}
.loop-right .loop-text{left:22px;top:-.9em;text-align:left}
.loop-left .loop-text{right:22px;top:-.9em;text-align:right}
.loop-top .loop-text{left:-95px;bottom:20px;text-align:center}
.loop-bottom .loop-text{left:-95px;top:20px;text-align:center}
.loop-step.is-active .loop-dot{background:var(--mint);border-color:var(--teal);box-shadow:0 0 0 7px rgba(0,126,133,.12);transform:scale(1.15)}
.loop-step.is-active .loop-text strong{color:#006a70}
.product-story{max-width:1000px}
.product-story-lead{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.55;color:var(--ink);max-width:48ch;margin:0 0 36px}
.product-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 56px}
.product-story-grid h3{font-size:1.15rem;font-weight:600;margin:0 0 10px;padding-top:18px;border-top:2px solid #b7dfdb}
.product-story-grid p{margin:0;line-height:1.7}
@media (prefers-reduced-motion:reduce){.loop-comet,.loop-dot,.loop-center :is(.loop-center-name,.loop-center-desc){transition:none}}
@media (max-width:900px){.loop-orbit{width:300px}.loop-text{width:150px}.loop-top .loop-text,.loop-bottom .loop-text{left:-75px}}
@media (max-width:700px){
 .loop-visual{margin:40px 0 48px}.loop-orbit{width:270px}
 .loop-steps{position:static;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:28px;width:calc(100vw - 48px);max-width:420px;margin-left:50%;transform:translateX(-50%)}
 .loop-step{position:static;width:auto;height:auto;display:flex;gap:10px;align-items:flex-start}
 .loop-dot{position:relative;left:0;top:3px;flex:none;width:12px;height:12px}
 .loop-text,.loop-right .loop-text,.loop-left .loop-text,.loop-top .loop-text,.loop-bottom .loop-text{position:static;width:auto;text-align:left}
 .product-story-grid{grid-template-columns:1fr;gap:24px}
}
/* Demo step 2 mirrors the live referral page: contacts first, other ways on request. */
.capture-demo .pick-button{width:100%;margin:18px 0 10px;font-size:.95rem;padding:15px}
.sample-picker{border:1px solid var(--line);border-radius:12px;padding:12px 12px 6px;margin:0 0 12px;background:#f7fafb}
.sample-picker p{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.sample-picker p span{text-transform:none;letter-spacing:0}
.sample-picker ul{list-style:none;padding:0;margin:0}
.sample-picker button{display:flex;align-items:center;gap:12px;width:100%;border:0;border-bottom:1px solid #e6eef0;background:none;padding:10px 4px;font:inherit;font-size:.9rem;color:var(--ink);cursor:pointer;text-align:left}
.sample-picker li:last-child button{border-bottom:0}
.sample-picker button:hover{background:#eef6f4}
.sample-picker button span,.picked-initials{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e0f4ee;color:#1f6b5a;font-size:.72rem;font-weight:600;flex:none}
.picked-card{display:flex;align-items:center;gap:12px;border:1.5px solid var(--teal);border-radius:12px;padding:12px 14px;margin:0 0 10px;background:#f1fbf8}
.picked-card div{flex:1;display:grid}
.picked-card strong{font-size:.95rem;color:var(--navy)}
.picked-card small{color:var(--muted)}
.picked-change{border:0;background:none;color:#006a70;font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer}
.capture-demo .contact-help{margin:0 0 12px}
.other-ways{margin:0 0 16px;border-top:1px solid var(--line);padding-top:12px}
.other-ways summary{cursor:pointer;color:#006a70;font-size:.9rem}
.other-ways[open] summary{margin-bottom:10px}
.way-button{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 14px;margin:0 0 8px;font:inherit;font-size:.88rem;color:var(--ink);cursor:pointer}
.way-button:hover{background:#f3f7f8}
.other-ways .permission-example{margin-top:4px}
.share-block{margin-top:6px}
.capture-demo [hidden]{display:none!important}
@media (max-width:700px){.loop-caption{margin-bottom:28px}}
/* Who does each step in the loop. */
.loop-who{font-family:inherit;font-style:normal;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#006a70}
.loop-who.loop-who-client{color:#4b3fb3}.loop-who.loop-who-reflane{color:#102b46}
.loop-center-kicker{font-weight:600;color:#006a70}
/* The demo ends on the next step. */
.demo-next{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:48px;padding-top:32px;border-top:1px solid #cbdade;text-align:center}
.demo-next p{margin:0;font-size:1.05rem;color:var(--ink)}