/* Refer & Earn — the SSO project’s homepage typography, 1140px column and 200px rhythm. */
body.project-figma {--project-paper:#fcfdf9;--project-ink:#111310;--project-muted:#4d514b;--project-purple:#9138f7;--project-rule:#d9b7ff;--project-stage:#eeefea;--project-question:#f5f5f5;--project-glass:rgba(252,253,249,.28);--project-gap:200px;--project-unit:min(1px,calc(100vw / 1440));--project-inset:max(24px,calc((100vw - 1140px) / 2));margin:0;background:var(--project-paper);color:var(--project-ink);font-family:var(--font-body,"Plus Jakarta Sans",sans-serif);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;}
body.project-figma.home-dark {--project-paper:#141715;--project-ink:#f4f5ef;--project-muted:#c0c5bd;--project-purple:#be85ff;--project-rule:#654386;--project-stage:#222621;--project-question:#242824;--project-glass:rgba(20,23,21,.32);color-scheme:dark;}
.project-figma *,.project-figma *::before,.project-figma *::after {box-sizing:border-box;}
.project-figma :is(h1,h2,h3,p,figure) {margin:0;}
.project-figma :is(h1,h2) {font-family:var(--font-heading,"Space Mono",monospace);font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.055em;text-transform:uppercase;overflow-wrap:anywhere;}
.project-figma h3 {font-family:var(--font-body,"Plus Jakarta Sans",sans-serif);font-size:18px;font-weight:600;line-height:1.4;}
.project-figma a {color:inherit;text-underline-offset:3px;}
.project-figma a:hover {color:var(--project-purple);}
.project-figma :is(a,button,summary):focus-visible {outline:2px solid var(--project-purple);outline-offset:5px;}
.project-figma .project-content {width:min(calc(100% - 48px),1140px);margin-inline:auto;}
.project-figma .project-stack {display:flex;flex-direction:column;align-items:stretch;gap:var(--project-gap);padding-top:259px;overflow:clip;}
.project-figma .project-group {display:flex;flex-direction:column;gap:var(--group-gap,40px);min-width:0;}
.project-figma section[id] {scroll-margin-top:112px;}
.project-figma .project-copy-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start;}
.project-figma .project-copy {display:flex;flex-direction:column;gap:24px;}
.project-figma .project-regular {font-weight:400;}
.project-figma .project-bold {font-weight:700;}
.project-figma .project-stat-note {font-weight:300;}
.project-figma .project-arrow {text-align:center;color:var(--project-purple);font-size:22px;line-height:1;}
.project-figma .project-header {position:fixed;z-index:100;top:0;left:0;width:100%;isolation:isolate;padding:25px 0 16px;}
.project-figma .project-header::before {content:"";position:absolute;z-index:-1;inset:0 0 -8px;background:var(--project-glass);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);-webkit-mask-image:linear-gradient(#000 0 76%,transparent 100%);mask-image:linear-gradient(#000 0 76%,transparent 100%);pointer-events:none;}
.project-figma .project-header-inner {display:flex;align-items:flex-start;justify-content:space-between;gap:30px;}
.project-figma .project-header nav {display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.project-figma .project-header a,.project-figma #projectThemeToggle {font-family:var(--font-heading,"Space Mono",monospace);font-size:16px;line-height:24px;letter-spacing:-.02em;text-transform:uppercase;text-decoration:underline;}
.project-figma .project-header a {font-weight:700;}
.project-figma .project-header a span {font-weight:400;}
.project-figma #projectThemeToggle {border:0;padding:0;background:none;color:inherit;cursor:pointer;white-space:nowrap;}
.project-figma #projectThemeToggle:hover {color:var(--project-purple);}
.project-figma .project-intro-grid {display:grid;grid-template-columns:1fr 2fr;align-items:center;gap:30px;}
.project-figma .project-intro-grid h1 {width:max-content;max-width:850px;}
.project-figma .project-intro-grid p {max-width:380px;margin-top:10px;line-height:1.4;}
.project-figma .project-live {position:relative;isolation:isolate;justify-self:end;padding:1px;border-radius:999px;overflow:hidden;box-shadow:0 0 22px rgba(150,62,255,.18);text-decoration:none;color:var(--project-ink);}
.project-figma .project-live::before {content:"";position:absolute;z-index:-1;inset:-150%;background:conic-gradient(from 0deg,transparent 0deg,transparent 80deg,var(--project-purple) 135deg,transparent 200deg,transparent 290deg,#c794ff 335deg,transparent 360deg);animation:project-glow 4s linear infinite;}
.project-figma .project-live span {display:block;padding:12px 22.4px;background:var(--project-paper);border-radius:inherit;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap;}
@keyframes project-glow {to {transform:rotate(360deg);}}
.project-figma .project-cloud-stage {position:relative;isolation:isolate;background:#fff;}
.project-figma .project-cloud-canvas {position:absolute;z-index:-1;inset:0;width:100%;height:100%;opacity:.8;pointer-events:none;}
.project-figma .project-hero {width:100%;height:calc(950 * var(--project-unit));}
.project-figma .project-hero > img {position:absolute;display:block;width:calc(1380 * var(--project-unit));max-width:none;height:calc(1150 * var(--project-unit));left:50%;bottom:0;transform:translateX(-50%);object-fit:contain;}
.project-figma .project-stats {display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.project-figma .project-stat {display:flex;flex-direction:column;gap:15px;border-top:1px solid var(--project-rule);padding:24px 0 22.5px;}
.project-figma .project-stat strong {font-family:var(--font-heading,"Space Mono",monospace);font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.055em;color:var(--project-purple);}
.project-figma .project-stat p {font-size:15px;line-height:1.5;}
.project-figma .project-old-image {position:relative;width:calc(1290 * var(--project-unit));max-width:none;align-self:flex-start;}
.project-figma .project-old-image > img {display:block;width:100%;height:auto;}
.project-figma .project-wide {position:relative;width:100vw;height:calc(var(--wide-height) * var(--project-unit));overflow:hidden;flex:none;}
.project-figma .project-group > .project-wide {margin-left:calc(-1 * var(--project-inset));}
.project-figma .project-wide-paper {position:absolute;top:0;bottom:0;width:calc(1535 * var(--project-unit));background:white;color:#161715;}
.project-figma .project-wide--right .project-wide-paper {left:var(--project-inset);}
.project-figma .project-wide--left .project-wide-paper {right:var(--project-inset);}
.project-figma .project-wide-crop {position:absolute;top:calc(var(--crop-top) * var(--project-unit));bottom:0;left:0;right:0;overflow:hidden;}
.project-figma .project-wide-crop > img {position:absolute;display:block;max-width:none;width:calc(var(--image-width) * var(--project-unit));height:auto;left:calc(var(--image-x) * var(--project-unit));top:calc(var(--image-y) * var(--project-unit));}
.project-figma .project-wide figcaption {position:absolute;z-index:1;left:calc(var(--project-inset) + 20px);top:calc(28 * var(--project-unit));font-size:14px;line-height:21px;font-weight:500;color:#161715;}
.project-figma .project-media-sequence {display:flex;flex-direction:column;gap:100px;}
.project-figma .project-full-image {width:100%;}
.project-figma .project-full-image > img {display:block;width:100%;height:auto;}
.project-figma .project-research-pair {display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.project-figma .project-research-card {position:relative;min-width:0;background:#fff;border-radius:45px;overflow:hidden;color:#161715;}
.project-figma .project-research-card > img {display:block;width:100%;height:auto;}
.project-figma .project-research-card--survey {padding:20px;}
.project-figma .project-video {position:relative;width:100%;overflow:hidden;background:#fff;}
.project-figma .project-video > img {display:block;width:100%;height:100%;object-fit:fill;}
.project-figma .project-video > video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;}
.project-figma .project-video > video[data-ready="true"] {opacity:1;}
.project-figma .project-video--survey {width:min(100%,488px);margin:auto;aspect-ratio:488 / 367;border-radius:14% / 18%;clip-path:inset(1px round 14% / 18%);}
.project-figma .project-media-toggle {position:absolute;z-index:4;right:14px;bottom:14px;display:flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border:1px solid #ffffff55;border-radius:999px;background:#151715b8;color:white;font-family:var(--font-body,"Plus Jakarta Sans",sans-serif);font-size:13px;line-height:1;cursor:pointer;}
.project-figma .project-media-toggle:hover {background:var(--project-purple);}
.project-figma .project-video-progress {position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:rgba(145,56,247,.15);overflow:hidden;}
.project-figma .project-video-progress > span {display:block;width:100%;height:100%;background:var(--project-purple);transform:scaleX(0);transform-origin:left;}
.project-figma .project-activity-stage {padding:106px 16px 21px;background:var(--project-stage);}
.project-figma .project-video--activity {max-width:1072px;margin:auto;aspect-ratio:1072 / 473;border-radius:20px;}
.project-figma .project-stage {position:relative;width:100%;background:var(--project-stage);overflow:hidden;}
.project-figma .project-stage--composed > img {display:block;width:100%;height:auto;}
.project-figma .project-questions {display:flex;flex-direction:column;gap:20px;width:50%;margin:0 0 0 auto;padding:0;list-style:none;}
.project-figma .project-questions li {padding:25px;background:var(--project-question);border-radius:5px;line-height:1.25;}
.project-figma .project-questions li:first-child {border-radius:20px 20px 5px 5px;}
.project-figma .project-questions li:last-child {border-radius:5px 5px 20px 20px;}
/* Only the requested consideration cards stack; scrolling stays native. */
.project-figma.has-question-stack #considerations {position:relative;display:block;isolation:isolate;}
.project-figma.has-question-stack .project-stack-context {position:sticky;top:var(--question-context-top);z-index:10;padding-bottom:20px;background:var(--project-paper);}
.project-figma.has-question-stack .project-questions {margin-top:20px;}
.project-figma.has-question-stack .project-questions li {position:sticky;top:calc(var(--question-card-top) + var(--stack-index) * 6px);z-index:calc(1 + var(--stack-index));}
.project-figma .project-app-before {position:relative;width:100%;aspect-ratio:550 / 440;background:white;border-radius:45px;overflow:hidden;}
.project-figma .project-app-crop {position:absolute;width:39.6364%;height:74.5455%;overflow:hidden;}
.project-figma .project-app-crop--one {left:9.2727%;top:-6.9386%;}
.project-figma .project-app-crop--two {left:51.0909%;top:25.5614%;}
.project-figma .project-app-crop > img {position:absolute;max-width:none;width:341.71%;height:118.24%;top:0;}
.project-figma .project-app-crop--one > img {left:-120.85%;}
.project-figma .project-app-crop--two > img {left:-120.73%;top:-18.28%;}
.project-figma .project-app-after {width:100%;aspect-ratio:554 / 440;border-radius:45px;overflow:hidden;background:white;}
.project-figma .project-app-after > img {display:block;width:100%;height:100%;object-fit:cover;}
.project-figma .project-result-image {width:100%;height:calc(800 * var(--project-unit));overflow:hidden;}
.project-figma .project-result-image > img {position:absolute;display:block;max-width:none;width:calc(1395 * var(--project-unit));height:calc(726 * var(--project-unit));left:50%;bottom:0;transform:translateX(-50%);object-fit:contain;}
.project-figma .project-footer {margin-top:var(--project-gap);padding:50px 0;border-top:1px dashed rgba(141,45,251,.4);}
.project-figma .project-footer h2 {font-size:24px;line-height:1.5;letter-spacing:-.02em;margin-bottom:30px;}
.project-figma .project-footer-row {display:flex;align-items:center;justify-content:space-between;gap:30px;}
.project-figma .project-footer nav {display:flex;flex-wrap:wrap;gap:16px 40px;}
.project-figma .project-footer :is(a,p) {font-size:12px;line-height:1.25;letter-spacing:-.02em;}
.project-figma .project-footer a {text-decoration:none;}
.project-figma .project-footer a:hover {text-decoration:underline;}
.project-figma .project-contents {position:fixed;z-index:90;left:20px;bottom:20px;color:var(--project-ink);}
.project-figma .project-contents > summary {display:flex;align-items:center;gap:30px;cursor:pointer;list-style:none;padding:12px 18px;border:1px solid var(--project-rule);background:var(--project-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:13px;}
.project-figma .project-contents > summary::-webkit-details-marker {display:none;}
.project-figma .project-contents[open] > summary span {transform:rotate(45deg);}
.project-figma .project-contents nav {position:absolute;bottom:calc(100% + 8px);left:0;width:min(330px,calc(100vw - 40px));max-height:65dvh;padding:18px;overflow-y:auto;background:var(--project-paper);border:1px solid var(--project-rule);box-shadow:0 8px 24px #0002;overscroll-behavior:contain;}
.project-figma .project-contents ol {display:grid;gap:4px;list-style:none;margin:0;padding:0;}
.project-figma .project-contents a {display:block;padding:8px 4px;font-size:14px;text-decoration:none;}
.project-figma .project-contents a[aria-current="location"] {font-weight:700;color:var(--project-purple);}
.project-figma .project-back-top {position:fixed;z-index:90;bottom:20px;right:20px;width:46px;height:46px;border:0;background:var(--project-ink);color:var(--project-paper);font-size:24px;cursor:pointer;}
.project-figma [hidden] {display:none!important;}
.project-figma .project-skip {position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-180%);padding:12px;background:var(--project-paper);color:var(--project-ink);}
.project-figma .project-skip:focus {transform:none;}
@media(max-width:1100px) {
 .project-figma .project-header a,.project-figma #projectThemeToggle {font-size:13px;}
 .project-figma .project-header nav {gap:24px;}
 .project-figma .project-intro-grid {grid-template-columns:1fr auto;}
 .project-figma .project-intro-grid h1 {width:auto;max-width:600px;}
}
@media(max-width:767.98px) {
 body.project-figma {--project-gap:110px;--project-inset:24px;}
 .project-figma .project-stack {padding-top:190px;}
 .project-figma :is(h1,h2) {font-size:19px;}
 .project-figma .project-header-inner {display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:16px 20px;}
 .project-figma .project-header nav {display:contents;}
 .project-figma .project-header a,.project-figma #projectThemeToggle {font-size:11px;line-height:1.5;}
 .project-figma .project-header nav > a:first-child {grid-column:1;grid-row:1;font-size:14px;line-height:21px;}
 .project-figma .project-header nav > a:nth-child(2) {grid-column:1 / -1;grid-row:2;white-space:nowrap;}
 .project-figma .project-header a span {display:inline;}
 .project-figma #projectThemeToggle {grid-column:2;grid-row:1;justify-self:end;margin:0;line-height:21px;}
 .project-figma .project-copy-row {grid-template-columns:1fr;gap:28px;}
 .project-figma .project-group {gap:36px;}
 .project-figma .project-questions {width:100%;}
 .project-figma .project-activity-stage {padding:60px 16px 0;}
 .project-figma .project-research-pair {grid-template-columns:1fr;gap:30px;}
 .project-figma .project-stats {gap:30px;}
 .project-figma .project-old-image {width:100%;}
 .project-figma .project-wide {height:auto;aspect-ratio:1440 / var(--wide-height);}
 .project-figma .project-wide-paper {width:100%;left:0!important;right:0!important;}
 .project-figma .project-wide-crop {top:calc(var(--crop-top) * var(--project-unit));}
 .project-figma .project-wide-crop > img {--mobile-wide-unit:calc(100vw / 1290);width:calc(var(--image-width) * var(--mobile-wide-unit));left:0;top:calc(var(--image-y) * var(--mobile-wide-unit));}
 .project-figma .project-wide figcaption {left:44px;top:14px;font-size:12px;}
 .project-figma .project-wide:has(figcaption) {min-height:calc(60px + 58.65vw);}
 .project-figma .project-wide:has(figcaption) .project-wide-crop {top:60px;}
 .project-figma .project-media-sequence {gap:60px;}
 .project-figma .project-footer {padding-top:40px;padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));}
 .project-figma .project-footer-row {flex-direction:column;align-items:flex-start;gap:30px;}
 .project-figma .project-footer nav {gap:16px 24px;}
 .project-figma .project-footer h2 {font-size:22px;}
}
@media(max-width:575.98px) {
 body.project-figma {--project-gap:100px;--project-inset:16px;font-size:15px;}
 .project-figma .project-content {width:calc(100% - 32px);}
 .project-figma .project-header {padding-top:22px;}
 .project-figma .project-stack {padding-top:210px;}
 .project-figma .project-intro-grid {grid-template-columns:1fr;gap:30px;}
 .project-figma .project-intro-grid h1 {max-width:100%;}
 .project-figma .project-intro-grid p {max-width:100%;margin-top:16px;}
 .project-figma .project-live {justify-self:start;}
 .project-figma .project-copy-row h3 {font-size:16px;}
 .project-figma .project-stats {grid-template-columns:1fr;gap:28px;}
 .project-figma .project-stat strong {font-size:19px;}
 .project-figma .project-activity-stage {padding:42px 12px 0;}
 .project-figma .project-research-card,.project-figma .project-app-before,.project-figma .project-app-after {border-radius:24px;}
 .project-figma .project-research-card--survey {padding:14px;}
 .project-figma .project-wide figcaption {left:36px;max-width:calc(100% - 56px);}
 .project-figma .project-contents {left:12px;bottom:12px;}
 .project-figma .project-back-top {right:12px;bottom:12px;}
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto;}
 .project-figma *,.project-figma *::before,.project-figma *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
 .project-figma.has-question-stack .project-stack-context,.project-figma.has-question-stack .project-questions li {position:static;}
}

/* Follow the replacement hero's natural proportions over the authored clouds. */
.project-figma .project-hero > img {height:auto;}

/* Edge-aligned media follows the viewport, independently of the text column. */
.project-figma .project-old-image.project-edge--right {width:calc(100vw - var(--project-inset));}
.project-figma .project-wide:is(.project-edge--right,.project-edge--left) {
 --edge-crop-top:calc(var(--crop-top) * var(--project-unit));
 height:calc(var(--edge-crop-top) + (100vw - var(--project-inset)) * .5863192182);
 min-height:0;
}
.project-figma .project-wide:is(.project-edge--right,.project-edge--left) .project-wide-paper {width:calc(100vw - var(--project-inset));}
.project-figma .project-wide.project-edge--right .project-wide-paper {left:var(--project-inset)!important;right:auto!important;}
.project-figma .project-wide.project-edge--left .project-wide-paper {left:0!important;right:var(--project-inset)!important;}
.project-figma .project-wide:is(.project-edge--right,.project-edge--left) .project-wide-crop {top:var(--edge-crop-top);}
.project-figma .project-wide:is(.project-edge--right,.project-edge--left) .project-wide-crop > img {width:100%;left:0;top:0;}

/* Existing app clips sit within the original phone frames. */
.project-figma .project-app-crop .project-video--app {position:absolute;left:5.75%;width:88.5%;aspect-ratio:828 / 1472;}
.project-figma .project-app-crop--one .project-video--app {bottom:3.1%;border-radius:0 0 8% 8%;}
.project-figma .project-app-crop--two .project-video--app {top:2.25%;border-radius:8% 8% 0 0;}
.project-figma .project-app-crop--two .project-media-toggle {top:14px;bottom:auto;}
.project-figma .project-app-after {position:relative;}
.project-figma .project-app-after > .project-video--app {position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;}
@media(max-width:767.98px) {
 .project-figma .project-wide.project-edge--right:has(figcaption) {--edge-crop-top:60px;}
}

/* A static cloud remains visible until the authored shader has rendered. */
.project-figma .project-cloud-stage {
    background:#fff url('/images/journey-cloud.png') center / cover no-repeat;
}
.project-figma .project-cloud-canvas {opacity:0;}
.project-figma .project-cloud-stage[data-cloud-ready="true"] {background-image:none;}
.project-figma .project-cloud-stage[data-cloud-ready="true"] > .project-cloud-canvas {opacity:.8;}