/* The smallest distance: components lifted from the original build, renamed for the Lab page. */
:root{--sd-ink:#fff;--sd-ink-90:rgba(255,255,255,.9);--sd-ink-80:rgba(255,255,255,.8);--sd-ink-50:rgba(255,255,255,.5);--sd-ink-heading:#efefef;
  --sd-accent:#33a58e;--sd-card-bg:#fff;--sd-card-ink:#1e1e1e;--sd-font-sans:"DM Sans",system-ui,sans-serif;--sd-font-badge:"Inter",system-ui,sans-serif;--sd-panel:#071101}

/* ---- insights graph ---- */
.sd-graph{position:relative;margin-top:60px;border-radius:32px;background:var(--sd-panel);color:var(--sd-ink);padding:30px 0 20px;font-family:"Figtree",system-ui,sans-serif}
.sd-graph-sub{margin:0 0 0 40px;font:500 15px/1.4 "Figtree",system-ui,sans-serif;color:var(--sd-ink-80)}
.sd-graph .sd-hint{margin:6px 0 0 40px;font-size:12px;color:var(--sd-ink-50)}
.sd-graph .sd-hint-touch{display:none}
@media (hover:none){.sd-graph .sd-hint-hover{display:none}.sd-graph .sd-hint-touch{display:inline}}
.sd-graph .sd-chart-scroll{margin-top:8px;overflow-x:auto;padding-bottom:6px}
.sd-graph .sd-chart{position:relative;width:600px;height:336px;font-family:"Figtree",system-ui,sans-serif}
  .sd-chart-scroll { overflow-x: auto; margin-top: 12px; }
  .sd-chart { position: relative; width: 600px; height: 336px; }
  .sd-chart > * { position: absolute; }
  .sd-chart .sd-lbl {
    margin: 0; transform: translateX(-50%); text-align: center; font-weight: 700; line-height: 1.5;
  }
  .sd-stage { top: 0; width: 288px; font-size: 14px; letter-spacing: -0.322px; color: var(--sd-ink); }
  .sd-day { top: 38px; width: 98px; font-size: 12px; letter-spacing: -0.276px; color: var(--sd-ink-50); }
  .sd-mood { width: 98px; font-size: 12px; letter-spacing: -0.276px; color: var(--sd-ink); }
  .sd-chart img { display: block; max-width: none; }
  /* Lost trust is a button in Figma (dot + label); dot at 778,309, label centred at 785,340 */
  .sd-lost {
    left: 411px; top: 273px; width: 22px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit;
  }
  .sd-lost img { position: absolute; left: 0; top: 0; }
  .sd-lost span {
    position: absolute; left: 7px; top: 31px; transform: translateX(-50%); width: 98px; text-align: center;
    font-weight: 700; font-size: 12px; line-height: 1.5; letter-spacing: -0.276px; color: var(--sd-ink);
  }

  /* Hover cards (Figma frames Confident, day 1_2_3, day 4, Arrival). Positions = prototype overlay offsets from each trigger. */
  .sd-hot {
    width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; z-index: 2;
  }
  .sd-hot:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 3px; }
  /* Hover glow on the coloured dots, tinted with each dot's own colour */
  .sd-hot, .sd-lost img { border-radius: 50%; transition: box-shadow .25s ease, filter .25s ease; }
  .sd-hot:hover, .sd-hot:focus-visible, .sd-hot[aria-expanded="true"],
  .sd-lost:hover img, .sd-lost:focus-visible img, .sd-lost[aria-expanded="true"] img {
    box-shadow: 0 0 0 4px rgb(var(--glow) / 0.22), 0 0 18px 4px rgb(var(--glow) / 0.55);
  }
  .sd-lost:hover img, .sd-lost:focus-visible img, .sd-lost[aria-expanded="true"] img { filter: brightness(1.08); }
  @media (prefers-reduced-motion: reduce) { .sd-hot, .sd-lost img { transition: none; } }
  .sd-card {
    z-index: 5; width: 397px; padding: 22px 27px 0; border-radius: 20px; background: var(--sd-card-bg); color: var(--sd-card-ink);
    font-size: 12px; line-height: 1.5; letter-spacing: -0.276px;
  }
  .sd-card[data-size="short"] { min-height: 303px; }
  .sd-card[data-size="tall"] { min-height: 321px; }
  .sd-card[data-size="arrival"] { min-height: 198px; padding-top: 37px; }
  .sd-card p, .sd-card ul { margin: 0; }
  .sd-card ul { padding-left: 18px; }
  .sd-card b { font-weight: 700; display: block; }
  .sd-card .sd-insight { min-height: 115px; width: 339px; max-width: 100%; }
  .sd-card .sd-insight a { color: inherit; text-decoration: underline; text-underline-position: from-font; }
  .sd-card .sd-insight a:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; border-radius: 2px; }
  .sd-card .sd-rule { display: block; width: 347px; max-width: 100%; height: 1px; margin-left: -2px; }
  .sd-card .sd-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); margin-top: 22px; min-height: 75px; }
  .sd-card[data-size="arrival"] .sd-row { margin-top: 0; }
  .sd-card .sd-screen-head { display: flex; align-items: center; gap: 8px; }
  .sd-card .sd-screen-head b { display: inline; }
        .sd-card .sd-solution { width: 339px; max-width: 100%; padding-bottom: 22px; }


  /* Hint above the emotion chart + a one-off glow sweep when the chart scrolls into view */
  .sd-hint { margin: 32px 0 0; font-size: 12px; color: var(--sd-ink-50); }
  .sd-hint .sd-hint-touch { display: none; }
  @media (hover: none) { .sd-hint .sd-hint-hover { display: none; } .sd-hint .sd-hint-touch { display: inline; } }
  .sd-chart-scroll { margin-top: 12px !important; }
  @keyframes dot-hint {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--glow) / 0); }
    45% { box-shadow: 0 0 0 4px rgb(var(--glow) / 0.22), 0 0 18px 4px rgb(var(--glow) / 0.55); }
  }
  .sd-chart.is-hinting .sd-hot, .sd-chart.is-hinting .sd-lost img { animation: dot-hint 1.1s ease-in-out 2; animation-delay: var(--d, 0s); }
  @media (prefers-reduced-motion: reduce) { .sd-chart.is-hinting .sd-hot, .sd-chart.is-hinting .sd-lost img { animation: none; } }
  /* Below the full 1280 frame the chart scrolls sideways, so cards open as a sheet at the bottom of the screen */
  @media (max-width: 679px) {
    /* fit the chart to the screen instead of scrolling sideways (sd.js sets --z = panel width / 600, --b = text boost) */
    .sd-graph { overflow-x: clip; }
    .sd-graph .sd-chart-scroll { overflow: hidden; overflow: clip; max-width: 100%; margin-left: auto !important; margin-right: auto !important; contain: paint; }
    .sd-graph .sd-chart { zoom: var(--z, 1); }
    .sd-chart .sd-stage { font-size: calc(14px * var(--b, 1)); }
    .sd-chart .sd-day, .sd-chart .sd-mood, .sd-chart .sd-lost span { font-size: calc(12px * var(--b, 1)); }
    .sd-chart .sd-card {
      position: fixed; left: 50% !important; top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      transform: translateX(-50%); width: min(397px, calc(100vw - 32px)); box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    }
  }
  
/* cards without a Screen column (Confident) */
.sd-card[data-size="short"] .sd-row{grid-template-columns:minmax(0,1fr);min-height:0}
.sd-card[data-size="short"] .sd-solution{padding-bottom:22px}
.sd-card .sd-screen-head{display:block}
.sd-card .sd-screen-head b{display:inline}
.sd-graph .sd-card{font-family:"Figtree",system-ui,sans-serif}

/* ---- phones (shared) ---- */
.sd-pw{position:relative;width:390px;max-width:100%;transform-origin:0 0}
.sd-phone{position:relative;width:390px;border-radius:40px 40px 0 0;overflow:hidden;background:#fff}
.sd-phone svg{display:block}
/* Day 1-3 pull to refresh */
  .sd-pa .ptr-content, .sd-pa .ptr-touch, .sd-pa .ptr-dots circle { transform-box: view-box; }
  .sd-pa .ptr-content { animation: ptr-pull 4s cubic-bezier(.3,.7,.3,1) infinite; }
  .sd-pa .ptr-touch { animation: ptr-touch 4s cubic-bezier(.3,.7,.3,1) infinite; }
  .sd-pa .ptr-dots circle { animation: ptr-dot 0.9s ease-in-out infinite; }
  .sd-pa .ptr-dots circle:nth-child(2) { animation-delay: .12s; }
  .sd-pa .ptr-dots circle:nth-child(3) { animation-delay: .24s; }
  .sd-pa .ptr-dots circle:nth-child(4) { animation-delay: .36s; }
  .sd-pa .ptr-dots circle:nth-child(5) { animation-delay: .48s; }
  .sd-pa .ptr-banner { animation: ptr-banner 4s ease infinite; }
  .sd-pa .ptr-skeleton { opacity: 0; animation: ptr-skeleton 4s ease infinite; }
  .sd-pa .ptr-shimmer { transform-box: view-box; animation: ptr-shimmer 1.1s linear infinite; }
  @keyframes ptr-banner { 0%, 22% { opacity: 1; } 27%, 56% { opacity: 0; } 62%, 100% { opacity: 1; } }
  @keyframes ptr-skeleton { 0%, 22% { opacity: 0; } 27%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }
  @keyframes ptr-shimmer { from { transform: translateX(0); } to { transform: translateX(440px); } }
  @keyframes ptr-pull {
    0%, 8% { transform: translateY(0); }
    26%, 52% { transform: translateY(76px); }
    64%, 100% { transform: translateY(0); }
  }
  @keyframes ptr-touch {
    0%, 6% { opacity: 0; transform: translateY(0); }
    9% { opacity: 1; transform: translateY(0); }
    26% { opacity: 1; transform: translateY(76px); }
    32%, 100% { opacity: 0; transform: translateY(76px); }
  }
  @keyframes ptr-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .sd-pa .ptr-content, .sd-pa .ptr-touch, .sd-pa .ptr-dots circle { animation: none; }
    .sd-pa .ptr-touch { opacity: 0; }
    .sd-pa .ptr-banner, .sd-pa .ptr-skeleton, .sd-pa .ptr-shimmer { animation: none; }
  }
/* Day 0: pill, tap, sheet rises, holds, goes away */
.sd-pb .sd-scrim{opacity:0;animation:sd-scrim 9s ease-in-out infinite}
.sd-pb .sd-sheet{transform:translateY(660px);animation:sd-sheet 9s cubic-bezier(.22,.8,.26,1) infinite}
.sd-pb .sd-tap{opacity:0;transform-box:fill-box;transform-origin:center;animation:sd-tap 9s ease infinite}
@keyframes sd-sheet{0%,15%{transform:translateY(660px)}24%,76%{transform:translateY(0)}88%,100%{transform:translateY(660px)}}
@keyframes sd-scrim{0%,15%{opacity:0}24%,76%{opacity:1}88%,100%{opacity:0}}
@keyframes sd-tap{0%,9%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1)}16%{opacity:.9;transform:scale(.85)}22%,100%{opacity:0;transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.sd-pb .sd-scrim{animation:none;opacity:1}.sd-pb .sd-sheet{animation:none;transform:none}.sd-pb .sd-tap{animation:none}}
.sd-off svg *{animation-play-state:paused!important}
/* Day 4: lock screen */
.sd-lock{height:490px;background:radial-gradient(120% 70% at 50% 0%,#1f5a47 0%,#0d3025 46%,#071a13 100%);color:#fff;font-family:-apple-system,"SF Pro Text","Inter",system-ui,sans-serif}
.sd-lock-top{position:absolute;left:0;right:0;top:64px;text-align:center}
.sd-lock-top svg{display:block;margin:0 auto 10px;opacity:.9}
.sd-lock-date{margin:0;font-weight:600;font-size:19px;letter-spacing:.2px;opacity:.85}
.sd-lock-time{margin:2px 0 0;font-weight:600;font-size:92px;line-height:1;letter-spacing:-2px;color:rgba(255,255,255,.94)}
.sd-lock .sd-notif{position:absolute;left:17px;top:312px;opacity:0;transform:translateY(-34px) scale(.96);animation:sd-drop 8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes sd-drop{0%,10%{opacity:0;transform:translateY(-34px) scale(.96)}18%{opacity:1;transform:translateY(0) scale(1)}86%{opacity:1;transform:translateY(0) scale(1)}94%,100%{opacity:0;transform:translateY(-12px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.sd-lock .sd-notif{animation:none;opacity:1;transform:none}}
.sd-lock .sd-notif{width:356px}
  .sd-notif {
    width: 355px; max-width: 100%; min-height: 58px; padding: 10px; border-radius: 16px; display: flex; gap: 10px; align-items: flex-start;
    background: rgba(37,37,37,0.5); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
    font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: #fff; letter-spacing: -0.2px;
  }
  .sd-notif img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
  .sd-notif .n-body { flex: 1; min-width: 0; }
  .sd-notif .n-top { display: flex; justify-content: space-between; gap: 10px; }
  .sd-notif .n-title { font-weight: 600; font-size: 15px; line-height: 20px; max-width: 223px; }
  .sd-notif .n-time { font-size: 13px; line-height: 18px; color: rgba(235,235,245,0.6); white-space: nowrap; }
  .sd-notif .n-desc { margin: 0; font-size: 13px; line-height: 18px; }

  /* Day 4 app surface (Figma 25:16136) */
  .sd-d4 {
    width: 390px; height: 759px; border-radius: 26px; background: #fff; overflow: hidden;
    font-family: "Inter", system-ui, sans-serif; color: #18200f;
  }
/* Day 4 screen */
  .sd-d4 > * { position: absolute; }
  .sd-d4-status { left: 0; top: 0; }
  .sd-d4-back { left: 24px; top: 54px; height: 36px; }
  .sd-d4-summary { left: 24px; right: 18px; top: 102px; height: 391px; }
  .sd-d4-summary p { margin: 0; position: absolute; left: 0; right: 0; }
  .sd-d4-title { top: 6px; font-weight: 700; font-size: 24px; line-height: 26px; }
  .sd-d4-lead { top: 66px; font-size: 14px; line-height: 19px; color: #535d70; }
  .sd-d4-q { top: 127px; font-weight: 700; font-size: 16px; line-height: 20px; }
  .sd-d4-answers { position: absolute; left: 0; right: 0; top: 182px; display: flex; flex-direction: column; gap: 8px; }
  .sd-d4-answer { height: 50px; display: flex; align-items: center; gap: 11px; padding: 0 11px; border: 1px solid #e5e8e2; border-radius: 16px; background: #fff; }
  .sd-d4-answer b { flex: 1; font-weight: 600; font-size: 14px; }
  .sd-d4-answer svg { flex: none; }
  .sd-d4-qmark { width: 29px; height: 29px; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #535d70; }
  .sd-d4-details { left: 24px; top: 468px; width: 366px; padding: 20px 24px 20px 0; display: flex; flex-direction: column; gap: 12px; }
  .sd-d4-details-title { margin: 0; font-family: var(--sd-font-sans); font-weight: 600; font-size: 16px; line-height: 20px; color: #191e3b; }
  .sd-d4-row { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-radius: 16px; background: #f9fafb; }
  .sd-d4-row span { font-family: var(--sd-font-sans); font-size: 12px; line-height: 16px; color: #1e1e1e; }
  .sd-d4-row b { font-weight: 500; font-size: 14px; line-height: 18px; color: #191e3b; }
  .sd-d4-help { left: 50%; transform: translateX(-50%); top: 717px; width: 205px; margin: 0; text-align: center; font-size: 11.5px; color: #535d70; }
  .sd-d4-help b { color: #18200f; }
.sd-d4{position:relative;box-shadow:0 18px 50px rgba(7,17,1,.18)}
.sd-d4-answer{transition:border-color .25s,background-color .25s,box-shadow .25s;cursor:pointer}
.sd-d4-answer.is-on{border-color:#33a58e;background:#eef8f4;box-shadow:0 0 0 3px rgba(51,165,142,.22)}

/* hover affordance: dots carry a soft ring, the hint is a visible pill with a matching dot */
.sd-chart .sd-hot,.sd-chart .sd-lost img{box-shadow:0 0 0 5px rgb(var(--glow) / .16)}
.sd-chart .sd-hot:hover,.sd-chart .sd-hot:focus-visible,.sd-chart .sd-hot[aria-expanded="true"],.sd-chart .sd-lost:hover img,.sd-chart .sd-lost:focus-visible img,.sd-chart .sd-lost[aria-expanded="true"] img{box-shadow:0 0 0 4px rgb(var(--glow) / .3),0 0 18px 4px rgb(var(--glow) / .55)}
.sd-graph .sd-hint{display:inline-flex;align-items:center;gap:10px;margin:14px 0 0 40px;padding:7px 14px 7px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:600 13px/1.3 "Figtree",system-ui,sans-serif;letter-spacing:0}
.sd-hint-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#33a58e;box-shadow:0 0 0 4px rgba(51,165,142,.3)}

/* larger hit areas: hovering anywhere near a dot opens its card */
.sd-chart .sd-hot::before{content:"";position:absolute;inset:-26px;border-radius:50%}
.sd-chart .sd-lost::before{content:"";position:absolute;inset:-26px -34px -8px;border-radius:40px}

/* 600px chart: no sideways scroll; scaled by JS (--z) only when the panel is narrower than 600 */
.sd-graph{overflow:visible}
.sd-graph .sd-chart-scroll{overflow:visible;padding:0}
.sd-graph .sd-chart{zoom:var(--z,1);margin:0 auto}
@media (max-width:679px){.sd-chart .sd-card{zoom:calc(1 / var(--z,1))}}
/* compact hover cards */
.sd-card,.sd-card[data-size]{width:300px;padding:14px 16px 0;border-radius:16px;line-height:1.45;min-height:0}
.sd-card[data-size="arrival"]{padding-top:14px}
.sd-card .sd-insight{min-height:0;width:auto}
.sd-card .sd-insight p+p{margin-top:4px}
.sd-card .sd-rule{width:100%;margin:10px 0 0}
.sd-card .sd-row,.sd-card[data-size] .sd-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:10px;min-height:0}
.sd-card[data-size="short"] .sd-row{grid-template-columns:minmax(0,1fr)}
.sd-card[data-size="arrival"] .sd-row{margin-top:0}
.sd-card .sd-solution,.sd-card[data-size] .sd-solution{width:auto;margin-top:10px;padding-bottom:14px}
.sd-card ul{padding-left:16px}


.sd-graph .sd-graph-sub{margin-left:max(20px,calc((100% - 600px * var(--z,1)) / 2))}