/* Alternative design views. Nothing here applies unless <html data-design="..."> is set,
   so the original design is untouched. Variants: atlas, night, directory. */

/* ---------- switcher (shown in every view) ---------- */
.dsw{position:relative}
.dsw .pillbtn{font-size:13px;padding:8px 12px}
.dsw .pillbtn b{font-weight:600;color:var(--ink)}
.dmenu{position:absolute;right:0;top:calc(100% + 8px);width:290px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.2);padding:6px;z-index:60}
.dmenu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;color:var(--ink)}
.dmenu button:hover{background:var(--surface-2)}
.dmenu button.on{background:var(--teal-soft)}
.dmenu b{display:block;font-size:14px}
.dmenu span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.35;margin-top:2px}
@media (max-width:760px){.dsw .pillbtn span.l{display:none}.dmenu{position:fixed;left:16px;right:16px;top:72px;width:auto}}

/* Alternative design views go below. Each one applies only under html[data-design="name"]. */

/* =====================================================================
   CANVAS: the "design-tool" view.
   Idea borrowed: huge tight bold type, faint grid canvas, tool-style
   cursor tags and chat bubbles. Inter + JetBrains Mono.
   ===================================================================== */
.curs{display:none}
html[data-design="canvas"]{
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F5F5F6;
  --ink:#1D1D1F;--ink-2:#424245;--ink-3:#86868B;--ink-4:#C7C7CC;
  --line:#ECECEE;--line-2:#DCDCE0;
  --teal:#1D1D1F;--teal-soft:#F0F0F2;--teal-bright:#3B82F6;--gold:#F04438;--gold-soft:#FEE9E7;--violet:#5B4DF0;--violet-soft:#ECEAFF;
  --c-startup:#0891B2;--c-indian:#D12FC0;--c-gcc:#5B4DF0;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.07);
}
html[data-design="canvas"] h1,
html[data-design="canvas"] h2{font-weight:800;letter-spacing:-.05em}
html[data-design="canvas"] .nav{top:0;padding:0}
html[data-design="canvas"] .nav .bar{max-width:none;border:0;border-radius:0;box-shadow:none;background:rgba(255,255,255,.85);height:64px;padding:0 20px}
html[data-design="canvas"] .btn-ink{background:var(--ink);border-color:var(--ink);color:#fff}
html[data-design="canvas"] .btn-ink:hover{background:#000}
html[data-design="canvas"] .brand .prod{font-family:var(--mono);font-size:12px;font-weight:500}
/* hero: giant tight headline on a faint grid with a selection box and cursor tags */
html[data-design="canvas"] .hero{padding:110px 0 120px;min-height:min(86vh,800px);display:grid;place-items:center;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:60px 60px;background-position:-1px -1px;border-bottom:1px solid var(--line)}
html[data-design="canvas"] .blobs,
html[data-design="canvas"] .free-pill .e,
html[data-design="canvas"] .kw .e,
html[data-design="canvas"] .stat .e{display:none}
html[data-design="canvas"] .stk{width:64px;height:64px;border-radius:16px;font-size:30px;background:#fff!important;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 24px rgba(0,0,0,.08);transform:none;animation:none}
html[data-design="canvas"] h1{position:relative;display:inline-block;margin:0 auto;max-width:13ch;font-size:clamp(40px,6.6vw,98px);line-height:.98;color:var(--ink);padding:6px 0}
html[data-design="canvas"] h1::before{content:"";position:absolute;inset:-14px -22px;border:1px dashed #94A3B8;pointer-events:none;
  --sq:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect x='.5' y='.5' width='8' height='8' fill='white' stroke='%2394A3B8'/%3E%3C/svg%3E");
  background:var(--sq) left top no-repeat,var(--sq) right top no-repeat,var(--sq) left bottom no-repeat,var(--sq) right bottom no-repeat,var(--sq) 50% 0 no-repeat,var(--sq) 50% 100% no-repeat,var(--sq) 0 50% no-repeat,var(--sq) 100% 50% no-repeat;margin:0;transform:translate(0,0)}
html[data-design="canvas"] h1 .dim{color:var(--ink-4);font-weight:800}
html[data-design="canvas"] h1 .grad{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
html[data-design="canvas"] .kw{background:none;box-shadow:none;padding:0;color:inherit}
html[data-design="canvas"] .lede{max-width:46ch;color:var(--ink-3);font-size:clamp(16px,1.5vw,20px)}
html[data-design="canvas"] .free-pill{background:var(--surface-2);color:var(--ink);box-shadow:none;font-family:var(--mono);font-size:12.5px}
html[data-design="canvas"] .stat{background:#fff;box-shadow:var(--shadow);border-color:var(--line);font-family:var(--mono);font-size:11.5px}
html[data-design="canvas"] .stat b,
html[data-design="canvas"] .stat.c1 b,
html[data-design="canvas"] .stat.c2 b,
html[data-design="canvas"] .stat.c3 b,
html[data-design="canvas"] .stat.c4 b{color:var(--ink);font-family:"Inter",sans-serif;font-size:17px}
html[data-design="canvas"] .curs{display:block;position:absolute;inset:0;pointer-events:none;z-index:1}
.curs .cur{position:absolute;font:600 12px/1 "Inter",sans-serif;color:#fff;padding:5px 8px;border-radius:5px}
.curs .cur::before{content:"";position:absolute;left:-12px;top:-9px;width:14px;height:14px;background:inherit;clip-path:polygon(0 0,100% 55%,55% 62%,40% 100%)}
.curs .c1{left:15%;top:72%;background:#06AED4}.curs .c2{left:11%;top:17%;background:#5B4DF0}.curs .c3{right:9%;top:52%;background:#17B26A}.curs .c4{right:13%;top:74%;background:#F04438}.curs .c5{left:74%;top:13%;background:#D12FC0}
.curs .msg{position:absolute;display:flex;gap:10px;align-items:center;background:#fff;border-radius:16px;padding:9px 16px 9px 10px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 30px rgba(0,0,0,.1);font-size:13px}
.curs .msg i{width:30px;height:30px;border-radius:50%;background:#000;color:#fff;font-style:normal;display:grid;place-items:center;font-weight:700;font-size:13px}
.curs .msg b{font-size:12.5px}.curs .msg small{color:var(--ink-3);margin-left:6px;font-size:11.5px}.curs .msg p{margin:2px 0 0;font-weight:500}
.curs .m1{right:4%;top:34%}.curs .m2{display:none}
@media (max-width:1100px){.curs{display:none!important}}
/* map pins as cursor tags: small white tile plus a coloured name tag */
html[data-design="canvas"] .mk .tile{width:38px;height:38px;border-radius:10px;border-width:2px;box-shadow:var(--shadow)}
html[data-design="canvas"] .mk .tile img{width:22px;height:22px}
html[data-design="canvas"] .mk .lbl{background:var(--c-startup);color:#fff;border-radius:5px;box-shadow:none;font-size:11.5px;font-weight:600;padding:3px 7px;margin-top:4px}
html[data-design="canvas"] .mk.gcc .lbl{background:var(--c-gcc)}
html[data-design="canvas"] .mk.large_indian .lbl{background:var(--c-indian)}
html[data-design="canvas"] .mk.locked .lbl{background:#E5E5EA;color:var(--ink-2)}
html[data-design="canvas"] .mk.stack .tile{width:60px;height:60px;border-radius:16px;border-color:var(--ink)}
html[data-design="canvas"] .mk.stack .lbl{background:var(--ink)}
html[data-design="canvas"] .mk.stack .lbl b{color:#7CF2A0}
html[data-design="canvas"] .maplibregl-canvas{filter:grayscale(.85) contrast(.95) brightness(1.03)}
html[data-design="canvas"] .count,
html[data-design="canvas"] .tag{font-family:var(--mono)}
html[data-design="canvas"] .tag.hiring{background:#E7F8EE;color:#0E7A43}
html[data-design="canvas"] .seg button.on{background:var(--ink);color:#fff}
html[data-design="canvas"] .drawer,
html[data-design="canvas"] .fpanel{border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 50px rgba(0,0,0,.16)}
html[data-design="canvas"] .state h2,
html[data-design="canvas"] .feat h2,
html[data-design="canvas"] .sec{font-size:clamp(36px,5.5vw,80px);letter-spacing:-.05em}
html[data-design="canvas"] .feat .box{border-radius:24px}
html[data-design="canvas"] footer{font-family:var(--mono);font-size:12px}

/* CANVAS: the app sits on the grid like a frame on a design canvas */
html[data-design="canvas"] .frame{padding-top:44px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:60px 60px;background-position:-1px -1px;padding-bottom:60px}
html[data-design="canvas"] .window{border-radius:14px;border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(0,0,0,.05),0 30px 80px rgba(0,0,0,.12);padding:0;position:relative}
html[data-design="canvas"] .window::before{inset:-1px;border-radius:14px;border:0}
html[data-design="canvas"] .window::after{content:"Biopin — live";position:absolute;left:0;top:-26px;font:500 12px var(--mono);color:var(--ink-3)}
html[data-design="canvas"] .topbar{padding:10px 12px;border-bottom:1px solid var(--line)}
html[data-design="canvas"] .app{border:0;border-radius:0 0 14px 14px}


/* =====================================================================
   CANVAS home page: the section rhythm borrowed from a design-studio
   site. Hero word on a grid, statement, three blue cards, the app,
   a dark block, a highlighted-text section and tilted cards.
   ===================================================================== */
.cv{display:none}
html[data-design="canvas"]{--blue:#0A57D6;--grid:#ECECEE}
html[data-design="canvas"] .hero,html[data-design="canvas"] .state,html[data-design="canvas"] .feat,html[data-design="canvas"] .quotewall{display:none}
html[data-design="canvas"] .cv{display:block}
html[data-design="canvas"] body{font-feature-settings:"ss01","cv11"}
/* header: transparent, logo left, one pill on the right */
html[data-design="canvas"] .nav{position:fixed;left:0;right:0;top:0}
html[data-design="canvas"] .nav .bar{background:transparent;backdrop-filter:none;height:84px;padding:0 20px}
html[data-design="canvas"] .nav .menu .ghost{display:none}
html[data-design="canvas"] .nav .brand .prod{display:none}
html[data-design="canvas"] .btn-ink{border-radius:999px;padding:9px 16px;font-size:14px}
html[data-design="canvas"] .cv-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-weight:600;font-size:17px;padding:15px 44px;border-radius:999px;letter-spacing:-.01em;transition:transform .2s,background .2s}
html[data-design="canvas"] .cv-btn:hover{background:#0848B3;transform:translateY(-1px)}
/* 1. hero: one giant word on the grid */
html[data-design="canvas"] .cv-hero{position:relative;min-height:max(100vh,720px);display:grid;place-content:center;justify-items:center;text-align:center;overflow:hidden;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:60px 60px;background-position:-1px 28px}
html[data-design="canvas"] .cv-word{position:relative;margin:0;font-size:clamp(64px,15vw,220px);line-height:.9;letter-spacing:-.06em;font-weight:800;color:var(--ink);padding:0 .04em 0 0}
html[data-design="canvas"] .cv-word::before{content:"";position:absolute;inset:-6% -4%;border:1px dashed #94A3B8;pointer-events:none;
  --sq:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect x='.5' y='.5' width='8' height='8' fill='white' stroke='%2394A3B8'/%3E%3C/svg%3E");
  background:var(--sq) left top no-repeat,var(--sq) right top no-repeat,var(--sq) left bottom no-repeat,var(--sq) right bottom no-repeat,var(--sq) 50% 0 no-repeat,var(--sq) 50% 100% no-repeat,var(--sq) 0 50% no-repeat,var(--sq) 100% 50% no-repeat}
html[data-design="canvas"] .cv-sub{margin:44px 0 0;font-size:clamp(15px,1.4vw,19px);color:var(--ink-3);position:relative;z-index:2}
html[data-design="canvas"] .cv-toggle{position:absolute;left:50%;top:21%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:9px 14px;font-size:13.5px;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.08)}
.cv-toggle .sw{width:40px;height:22px;border-radius:999px;background:#3B82F6;position:relative;display:block}
.cv-toggle .sw::after{content:"";position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff}
.cv-tile{position:absolute;width:62px;height:62px;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 24px rgba(0,0,0,.08)}
.cv-tile img{width:32px;height:32px;object-fit:contain}
.cv-hero .t1{left:31%;top:24%}.cv-hero .t2{right:25%;top:19%}.cv-hero .t3{left:21%;top:45%}.cv-hero .t4{left:49%;top:80%}.cv-hero .t5{right:18%;top:60%}
.cv-win{position:absolute;background:rgba(255,255,255,.9);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:22px 14px 14px;display:grid;gap:7px;align-content:start}
.cv-win::before{content:"";position:absolute;left:10px;top:8px;width:30px;height:6px;background:radial-gradient(circle,#D4D4D8 2.5px,transparent 3px) 0 0/10px 6px}
.cv-win span,.cv-win b{display:block;height:9px;border-radius:4px;background:#EDEDF0}
.cv-win b{height:44px;width:44px;border-radius:50%}
.cv-win.w1{left:2%;top:25%;width:230px;height:170px;transform:rotate(7deg)}
.cv-win.w2{left:25%;top:66%;width:240px;height:150px;transform:rotate(-5deg)}
.cv-shot{position:absolute;overflow:hidden;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.18);border:6px solid #fff}
.cv-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.cv-shot.s1{right:-4%;top:23%;width:360px;height:250px;transform:rotate(-4deg)}
.cv-cur{position:absolute;font:600 12px/1 "Inter",sans-serif;color:#fff;padding:5px 8px;border-radius:5px;z-index:3}
.cv-cur::before{content:"";position:absolute;left:-12px;top:-9px;width:14px;height:14px;background:inherit;clip-path:polygon(0 0,100% 55%,55% 62%,40% 100%)}
.cv-hero .k1{left:19%;top:20%;background:#D12FC0}.cv-hero .k2{left:59%;top:30%;background:#5B4DF0}.cv-hero .k3{left:34%;top:73%;background:#17B26A}.cv-hero .k4{right:19%;top:77%;background:#F04438}
.cv-msg{position:absolute;display:flex;gap:10px;align-items:center;background:#fff;border-radius:16px;padding:9px 18px 9px 10px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 30px rgba(0,0,0,.1);font-size:13px;min-width:210px;text-align:left;z-index:2}
.cv-msg:empty{display:none}
.cv-msg i{width:30px;height:30px;border-radius:50%;background:#000;display:grid;place-items:center;flex:none;overflow:hidden}.cv-msg i img{width:18px;height:18px;background:#fff;border-radius:3px}
.cv-msg b{font-size:12.5px}.cv-msg small{color:var(--ink-3);margin-left:6px;font-size:11.5px}.cv-msg p{margin:2px 0 0;font-weight:500;max-width:220px}
.cv-hero .m1{right:6%;top:42%}.cv-hero .m2{left:9%;top:82%}
/* 2. statement with scroll-linked reveal */
html[data-design="canvas"] .cv-say{padding:170px var(--gutter) 150px;text-align:center}
html[data-design="canvas"] .cv-say h2{margin:0 auto;max-width:18ch;font-size:clamp(40px,6.6vw,96px);line-height:.98;letter-spacing:-.05em;font-weight:800}
html[data-design="canvas"] .cv-reveal{margin:34px auto 0;max-width:24ch;font-size:clamp(22px,2.6vw,38px);line-height:1.12;font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.cv-reveal span{color:#EDEDEF;transition:color .35s}.cv-reveal span.on{color:var(--ink)}
/* 3. three blue cards */
html[data-design="canvas"] .cv-cards{padding:0 20px 120px}
.cv-cards .row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1440px;margin:0 auto}
.cv-cards .bl{height:440px;border-radius:14px;padding:50px 52px;color:#fff;background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.5px) 0 0/6px 6px,radial-gradient(70% 60% at 20% 100%,rgba(90,150,255,.45),transparent 70%),linear-gradient(165deg,#0A3FD6,#0027A6)}
.cv-cards h3{margin:0 0 22px;font-size:clamp(26px,2.5vw,36px);line-height:1.04;letter-spacing:-.04em;font-weight:700}
.cv-cards .bl p{margin:0;font-size:16.5px;line-height:1.45;color:rgba(255,255,255,.82);max-width:30ch}
.cv-cards small{display:block;margin:22px 4px 0;color:var(--ink-3);font-size:14.5px;line-height:1.45;max-width:38ch}
/* 4. the app on the canvas */
html[data-design="canvas"] .frame{padding-top:30px}
/* 5. dark block with a laptop */
html[data-design="canvas"] .cv-dark{background:#000;padding:110px 20px 90px;margin-top:40px}
.cv-dark .box{max-width:1160px;margin:0 auto;background:#111;border-radius:30px;padding:76px 70px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;overflow:hidden;position:relative;min-height:520px}
.cv-dark h2{margin:0 0 34px;color:#fff;font-size:clamp(40px,5vw,64px);letter-spacing:-.045em;font-weight:700;position:relative;display:inline-block;line-height:1.1}
.cv-dark h2.selbox::before,.cv-emp .sel::before{content:"";position:absolute;inset:-12px -16px;border:1px dashed #555;pointer-events:none;
  --sq:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect x='.5' y='.5' width='8' height='8' fill='%23111' stroke='%23777'/%3E%3C/svg%3E");
  background:var(--sq) left top no-repeat,var(--sq) right top no-repeat,var(--sq) left bottom no-repeat,var(--sq) right bottom no-repeat,var(--sq) 50% 0 no-repeat,var(--sq) 50% 100% no-repeat}
.cv-dark .big{margin:0 0 22px;color:#F2F2F4;font-size:clamp(22px,2.3vw,30px);line-height:1.18;font-weight:600;letter-spacing:-.03em;max-width:21ch}
.cv-dark .small{margin:0 0 40px;color:#8E8E93;font-size:16.5px;line-height:1.45;max-width:36ch}
.cv-dark .laptop{position:relative;margin-right:-190px}
.cv-dark .scr{background:#000;border:8px solid #2a2a2c;border-radius:16px 16px 0 0;overflow:hidden;aspect-ratio:16/10}
.cv-dark .scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.cv-dark .base{height:14px;background:linear-gradient(#3a3a3c,#1d1d1f);border-radius:0 0 14px 14px;margin:0 -18px}
.cv-dark .cap{max-width:1160px;margin:26px auto 0;color:#8E8E93;font-size:14px;max-width:46ch;margin-left:max(0px,calc((100% - 1160px)/2))}
/* 6. highlighted-text section with employer tiles and live bubbles */
html[data-design="canvas"] .cv-emp{background:var(--surface-2);padding:60px 0 0}
html[data-design="canvas"] .cv-emp .stage{position:relative;min-height:760px;display:grid;place-content:center;justify-items:center;gap:34px;text-align:center;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:60px 60px;background-color:#fff;overflow:hidden;padding:0 20px}
.cv-emp h2{margin:0;font-size:clamp(38px,6.2vw,92px);letter-spacing:-.055em;line-height:1;font-weight:800;position:relative;z-index:2}
.cv-emp .sel{position:relative;background:#CCE6FF;color:#0E2B4A;padding:0 .06em;display:inline-block}
.cv-emp .sel::before{inset:0;border:0;border-left:3px solid #0A57D6;border-right:3px solid #0A57D6;background:none}
.cv-emp .sel::after{content:"";position:absolute;right:-8px;bottom:-9px;width:12px;height:12px;border-radius:50%;background:#0A57D6}
.cv-emp .sel::before{left:-8px;right:-8px;top:0;bottom:0}
.cv-emp .pf{position:absolute;width:92px;background:#fff;border-radius:12px;padding:6px 6px 8px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 26px rgba(0,0,0,.09)}
.cv-emp .pf img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:22px;background:#F5F5F6;border-radius:8px}
.cv-emp .pf em{display:block;margin-top:6px;font:500 8.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;font-style:normal;color:var(--ink-2)}
.cv-emp .p1{left:9%;top:17%}.cv-emp .p2{left:31%;top:6%}.cv-emp .p3{right:11%;top:11%}.cv-emp .p4{left:15%;bottom:12%}.cv-emp .p5{left:42%;bottom:5%}.cv-emp .p6{right:9%;bottom:17%}
.cv-emp .e1{left:22%;top:34%}.cv-emp .e2{right:5%;top:27%}.cv-emp .e3{right:22%;bottom:6%}
/* 7. details: tilted role cards */
html[data-design="canvas"] .cv-det{padding:150px 20px 170px}
.cv-det .wrapx{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.cv-det h2{margin:0 0 30px;font-size:clamp(40px,5.6vw,80px);letter-spacing:-.055em;line-height:.98;font-weight:800}
.cv-det p{margin:0 0 34px;color:var(--ink-3);font-size:clamp(17px,1.6vw,21px);line-height:1.4;max-width:34ch}
.cv-det .vis{position:relative;height:520px}
.cv-det .rc{position:absolute;width:290px;background:#fff;border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 44px rgba(0,0,0,.14);border:1px solid var(--line)}
.cv-det .rc:empty{display:none}
.cv-det .r1{left:0;top:80px;transform:rotate(-8deg)}.cv-det .r2{left:110px;top:20px;z-index:2;transform:rotate(1deg);width:310px}.cv-det .r3{left:190px;top:210px;transform:rotate(7deg);z-index:1}
.rc .top{display:flex;gap:9px;align-items:center;font-size:13px}.rc .top img{width:26px;height:26px;object-fit:contain;border:1px solid var(--line);border-radius:7px;padding:3px}
.rc h4{margin:14px 0 12px;font-size:19px;line-height:1.15;letter-spacing:-.03em;font-weight:700}
.rc .chips{display:flex;gap:6px;flex-wrap:wrap}.rc .chips span{font:500 11px var(--mono);background:var(--surface-2);border-radius:999px;padding:4px 9px;color:var(--ink-2)}
.cv-det .tt1{left:-6px;top:20px;z-index:3}.cv-det .d1{left:40px;bottom:6px;z-index:4}
/* 8. the rest of the page in the same voice */
html[data-design="canvas"] .logos{padding-top:90px}
html[data-design="canvas"] .logos p{font-weight:700;letter-spacing:-.03em;color:var(--ink)}
html[data-design="canvas"] .students{background:var(--surface-2);padding:100px 0}
html[data-design="canvas"] .students .sec{font-size:clamp(40px,5.6vw,80px);line-height:.98}
html[data-design="canvas"] .method article{border-radius:14px}
html[data-design="canvas"] footer{border-top:0;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:40px 0 48px;background:#fff}
/* responsive */
@media (max-width:1100px){
  .cv-hero .cv-win,.cv-hero .cv-shot,.cv-hero .t3,.cv-hero .t4,.cv-hero .m2,.cv-hero .k1,.cv-hero .k3{display:none!important}
  .cv-cards .row{grid-template-columns:1fr}.cv-cards .bl{height:340px}
  .cv-dark .box{grid-template-columns:1fr;padding:44px 28px}.cv-dark .laptop{margin:30px -60px 0 0}
  .cv-det .wrapx{grid-template-columns:1fr}.cv-det .vis{height:480px}
  .cv-emp .p2,.cv-emp .p5,.cv-emp .e1,.cv-emp .e3{display:none}
}
@media (max-width:640px){
  .cv-hero .cv-tile,.cv-hero .cv-msg,.cv-hero .cv-cur,.cv-hero .cv-toggle{display:none!important}
  .cv-emp .pf,.cv-emp .cv-msg{display:none}.cv-emp .stage{min-height:520px}
  .cv-det .rc{width:240px}.cv-det .r2{left:60px;width:260px}.cv-det .r3{left:90px}.cv-det .tt1{display:none}
}

.cv-credit{display:none}html[data-design="canvas"] .cv-credit{display:block}
.cv-tile .em{font-size:30px;line-height:1}
.cv-emp .pf .ini{display:grid;place-items:center;width:100%;aspect-ratio:1;background:#F5F5F6;border-radius:8px;font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.cv-msg i{background:#000;color:#fff;font-style:normal;font-weight:700;font-size:13px}
.rc .top i{width:26px;height:26px;border-radius:50%;background:#000;color:#fff;font-style:normal;font-weight:700;font-size:12px;display:grid;place-items:center}
.cv-det .rc h4{text-transform:none;color:var(--ink);font-size:19px;letter-spacing:-.03em;font-family:inherit;margin:14px 0 12px}
.cv-det .txt p{margin:0 0 34px;color:var(--ink-3);font-size:clamp(17px,1.6vw,21px);line-height:1.4;max-width:34ch}
.cv-det p{margin:0}
.cv-det .cv-msg p{margin:2px 0 0;color:var(--ink);font-size:13px;line-height:1.3;max-width:220px}
html[data-design="canvas"] .logos{padding-top:30px}
html[data-design="canvas"] .cv-det{padding-bottom:100px}

/* =====================================================================
   CANVAS motion. Everything here sits under Canvas and respects
   prefers-reduced-motion.
   ===================================================================== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
@property --p{syntax:'<number>';inherits:true;initial-value:0}
@keyframes cvPop{from{opacity:0;translate:0 22px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes cvFade{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@keyframes cvBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes cvTrama{from{background-position:0 0}to{background-position:60px 30px}}
@keyframes cvSel{from{--p:0}to{--p:1}}
@keyframes cvUp{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}

/* halftone layer on the blue cards and the laptop screen (moves only when motion is allowed) */
html[data-design="canvas"] .cv-cards .bl{position:relative;overflow:hidden;background:radial-gradient(70% 60% at 20% 100%,rgba(90,150,255,.45),transparent 70%),linear-gradient(165deg,#0A3FD6,#0027A6)}
html[data-design="canvas"] .cv-cards .bl>*{position:relative;z-index:1}
html[data-design="canvas"] .cv-cards .bl::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.17) 1px,transparent 1.5px);background-size:6px 6px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000 30%,transparent 85%);mask-image:radial-gradient(120% 90% at 70% 10%,#000 30%,transparent 85%)}
html[data-design="canvas"] .cv-dark .scr{position:relative}
html[data-design="canvas"] .cv-dark .scr::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(10,87,214,.16) 1px,transparent 1.6px);background-size:7px 7px;pointer-events:none;mix-blend-mode:multiply}

/* highlight that sweeps across "hiring right now", with handles at both ends */
html[data-design="canvas"] .cv-emp .sel{--p:1;background:linear-gradient(#CCE6FF,#CCE6FF) no-repeat 0 0/calc(var(--p) * 100%) 100%;color:#0E2B4A;padding:0 .04em}
html[data-design="canvas"] .cv-emp .sel::before,html[data-design="canvas"] .cv-emp .sel::after{content:"";position:absolute;inset:auto;border:0;width:14px;pointer-events:none}
html[data-design="canvas"] .cv-emp .sel::before{left:-7px;top:-12px;bottom:-2px;background:linear-gradient(#0A57D6,#0A57D6) 50% 0/3px 100% no-repeat,radial-gradient(circle,#0A57D6 6px,transparent 6.5px) 50% 0/14px 14px no-repeat}
html[data-design="canvas"] .cv-emp .sel::after{left:calc(var(--p) * 100% - 7px);right:auto;top:-2px;bottom:-12px;height:auto;border-radius:0;background:linear-gradient(#0A57D6,#0A57D6) 50% 0/3px 100% no-repeat,radial-gradient(circle,#0A57D6 6px,transparent 6.5px) 50% 100%/14px 14px no-repeat}

/* role-card deck positions (JS cycles pos0 → pos1 → pos2) */
html[data-design="canvas"] .cv-det .rc{transition:left .8s cubic-bezier(.6,0,.2,1),top .8s cubic-bezier(.6,0,.2,1),transform .8s cubic-bezier(.6,0,.2,1),box-shadow .8s;cursor:grab;user-select:none}
html[data-design="canvas"] .cv-det .rc.pos0{left:110px;top:20px;transform:rotate(1deg);z-index:3;width:310px}
html[data-design="canvas"] .cv-det .rc.pos1{left:0;top:80px;transform:rotate(-8deg);z-index:1;width:290px}
html[data-design="canvas"] .cv-det .rc.pos2{left:190px;top:210px;transform:rotate(7deg);z-index:2;width:290px}
@media (max-width:640px){
  html[data-design="canvas"] .cv-det .rc.pos0{left:60px;width:260px}
  html[data-design="canvas"] .cv-det .rc.pos1,html[data-design="canvas"] .cv-det .rc.pos2{width:240px}
  html[data-design="canvas"] .cv-det .rc.pos2{left:90px}
}

/* the hero caret and the header logo caret */
html[data-design="canvas"] .cv-word span::after{content:"";display:inline-block;width:.045em;height:.74em;background:#0A57D6;margin-left:.03em;vertical-align:-.02em}
html[data-design="canvas"] .nav .brand{position:relative}
html[data-design="canvas"] .nav .brand::after{content:"";width:2px;height:20px;background:var(--ink);margin-left:-6px}

@media (prefers-reduced-motion:no-preference){
  /* header fades in, logo caret blinks */
  html[data-design="canvas"] .nav .brand,html[data-design="canvas"] .nav .menu{animation:cvFade .9s cubic-bezier(.2,.7,.1,1) .1s backwards}
  html[data-design="canvas"] .nav .brand::after{animation:cvBlink 1.1s steps(1) infinite}
  html[data-design="canvas"] .cv-word span::after{animation:cvBlink 1.1s steps(1) infinite}
  /* hero pieces arrive one by one */
  html[data-design="canvas"] .cv-word{animation:cvPop 1s cubic-bezier(.2,.7,.1,1) .05s backwards}
  html[data-design="canvas"] .cv-sub{animation:cvPop .9s cubic-bezier(.2,.7,.1,1) .35s backwards}
  html[data-design="canvas"] .cv-hero :is(.cv-toggle,.cv-tile,.cv-win,.cv-shot,.cv-cur,.cv-msg){animation:cvPop .8s cubic-bezier(.2,.7,.1,1) backwards}
  html[data-design="canvas"] .cv-hero .cv-toggle{animation-delay:.5s}
  html[data-design="canvas"] .cv-hero .w1{animation-delay:.55s}html[data-design="canvas"] .cv-hero .w2{animation-delay:.7s}html[data-design="canvas"] .cv-hero .s1{animation-delay:.65s}
  html[data-design="canvas"] .cv-hero .t1{animation-delay:.8s}html[data-design="canvas"] .cv-hero .t2{animation-delay:.9s}html[data-design="canvas"] .cv-hero .t3{animation-delay:1s}html[data-design="canvas"] .cv-hero .t4{animation-delay:1.1s}html[data-design="canvas"] .cv-hero .t5{animation-delay:1.2s}
  html[data-design="canvas"] .cv-hero .k1{animation-delay:1.3s}html[data-design="canvas"] .cv-hero .k2{animation-delay:1.45s}html[data-design="canvas"] .cv-hero .k3{animation-delay:1.6s}html[data-design="canvas"] .cv-hero .k4{animation-delay:1.75s}
  html[data-design="canvas"] .cv-hero .m1{animation-delay:1.9s}html[data-design="canvas"] .cv-hero .m2{animation-delay:2.2s}
  /* halftone drift */
  html[data-design="canvas"] .cv-cards .bl::after{animation:cvTrama 7s linear infinite}
  html[data-design="canvas"] .cv-dark .scr::after{animation:cvTrama 9s linear infinite}
  /* sections rise in when they reach the screen */
  html[data-design="canvas"] .cv-cards article,html[data-design="canvas"] .cv-dark .box,html[data-design="canvas"] .cv-det .wrapx{opacity:0}
  html[data-design="canvas"] .cv-cards article.in,html[data-design="canvas"] .cv-dark .box.in,html[data-design="canvas"] .cv-det .wrapx.in{opacity:1;animation:cvUp .9s cubic-bezier(.2,.7,.1,1) backwards}
  html[data-design="canvas"] .cv-cards article:nth-child(2).in{animation-delay:.12s}html[data-design="canvas"] .cv-cards article:nth-child(3).in{animation-delay:.24s}
  /* employers section: tiles and bubbles pop in, then the highlight sweeps */
  html[data-design="canvas"] .cv-emp .stage :is(.pf,.cv-msg){opacity:0}
  html[data-design="canvas"] .cv-emp .stage.in :is(.pf,.cv-msg){opacity:1;animation:cvPop .7s cubic-bezier(.2,.7,.1,1) backwards}
  html[data-design="canvas"] .cv-emp .stage.in .p2{animation-delay:.1s}html[data-design="canvas"] .cv-emp .stage.in .p3{animation-delay:.2s}html[data-design="canvas"] .cv-emp .stage.in .p4{animation-delay:.3s}html[data-design="canvas"] .cv-emp .stage.in .p5{animation-delay:.4s}html[data-design="canvas"] .cv-emp .stage.in .p6{animation-delay:.5s}
  html[data-design="canvas"] .cv-emp .stage.in .e1{animation-delay:.7s}html[data-design="canvas"] .cv-emp .stage.in .e2{animation-delay:.95s}html[data-design="canvas"] .cv-emp .stage.in .e3{animation-delay:1.2s}
  html[data-design="canvas"] .cv-emp .sel{--p:0}
  html[data-design="canvas"] .cv-emp .sel.in{animation:cvSel 1.3s cubic-bezier(.6,0,.2,1) .4s forwards}
  /* details section: the bubble arrives after the cards */
  html[data-design="canvas"] .cv-det .wrapx.in .cv-msg{animation:cvPop .7s cubic-bezier(.2,.7,.1,1) .8s backwards}
}
.dmenu .dsep{margin:6px 6px 2px;padding-top:8px;border-top:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
/* hero as a sentence instead of one word */
html[data-design="canvas"] .cv-word.long{font-size:clamp(44px,7vw,108px);line-height:.98;letter-spacing:-.055em;max-width:14ch;text-align:center;padding:0 .04em}
html[data-design="canvas"] .cv-word.long::before{inset:-5% -3%}
html[data-design="canvas"] .cv-word.long{font-size:clamp(40px,6.1vw,94px);max-width:13ch}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .cv-sub{max-width:46ch;margin-left:auto;margin-right:auto}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .t3{display:none}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .m1{top:70%;right:5%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .s1{top:9%;right:-3%;width:310px;height:210px}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .t5{top:76%;right:30%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .t1{left:27%;top:17%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .t2{right:22%;top:14%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .k2{left:62%;top:22%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .w1{left:-1%;top:30%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .k4{right:10%;top:62%}
/* life-science props in the Canvas hero */
.cv-sci{position:absolute;z-index:1;filter:drop-shadow(0 10px 24px rgba(0,0,0,.08))}
.cv-sci svg{display:block}
.cv-sci em{display:block;margin-top:6px;font:500 10.5px var(--mono,monospace);font-style:normal;color:#A1A1AA;text-transform:lowercase}
.cv-hero .plate{left:2%;top:26%;transform:rotate(7deg)}
.cv-hero .chrom{left:24%;top:66%;transform:rotate(-5deg)}
.cv-hero .mol{right:27%;top:70%;filter:none;opacity:.55}
.cv-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 auto 34px;position:relative;z-index:2;max-width:640px}
.cv-chips span{font:500 12px var(--mono,monospace);color:var(--ink-2);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:5px 11px}
/* blue-card illustrations */
.cv-cards .bl{display:flex;flex-direction:column}
.cv-cards .bl .ill{margin-top:auto;width:100%;max-width:320px;height:auto;opacity:.92}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .plate{left:-1%;top:30%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .mol{right:30%;top:80%}
@media (max-width:1100px){.cv-hero .plate,.cv-hero .chrom,.cv-hero .mol{display:none}}
@media (prefers-reduced-motion:no-preference){
  html[data-design="canvas"] .cv-chips{animation:cvPop .8s cubic-bezier(.2,.7,.1,1) .2s backwards}
  html[data-design="canvas"] .cv-hero .cv-sci{animation:cvPop .8s cubic-bezier(.2,.7,.1,1) backwards}
  html[data-design="canvas"] .cv-hero .plate{animation-delay:.55s}html[data-design="canvas"] .cv-hero .chrom{animation-delay:.7s}html[data-design="canvas"] .cv-hero .mol{animation-delay:.95s}
}
.cv-hero .chrom{left:27%;top:71%}
.cv-hero .mol{right:9%;top:85%}
.cv-hero .k3{left:15%;top:64%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .mol{right:9%;top:85%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .k3{left:15%;top:64%}

/* ---- Canvas, round 2: order, hero sentence, footer ---- */
body[data-view] .cv{display:none!important}
/* page order in Canvas: hero, employer logos, map, blue cards, dark block, highlighted line, role cards, sign-up, footer */
html[data-design="canvas"] body{display:flex;flex-direction:column}
html[data-design="canvas"] body>*{flex:none}
html[data-design="canvas"] .cv-hero{order:1}
html[data-design="canvas"] .logos{order:2}
html[data-design="canvas"] .frame{order:3}
html[data-design="canvas"] .cv-cards{order:4}
html[data-design="canvas"] .cv-dark{order:5}
html[data-design="canvas"] .cv-emp{order:6}
html[data-design="canvas"] .cv-det{order:7}
html[data-design="canvas"] .students{order:8}
html[data-design="canvas"] footer{order:9}
/* hero + logo strip fill one screen, so the next scroll lands on the map */
html[data-design="canvas"] .cv-hero{min-height:max(calc(100vh - 170px),600px);padding-top:70px}
html[data-design="canvas"] .logos{padding:22px 0 18px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-design="canvas"] .logos p{font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-3);margin:0 0 12px;font-family:var(--mono)}
html[data-design="canvas"] .frame{padding-top:40px}
html[data-design="canvas"] .cv-cards{padding-top:110px}
/* the long hero sentence */
html[data-design="canvas"] .cv-word.longer{font-size:clamp(34px,4.6vw,70px);max-width:19ch;line-height:1.02}
html[data-design="canvas"] .cv-hero:has(.cv-word.longer) .cv-sub{margin-top:34px;max-width:52ch;font-size:clamp(15px,1.3vw,18px)}
html[data-design="canvas"] .cv-hero:has(.cv-word.longer) .cv-chips{margin-bottom:28px}
/* highlighted line on two rows */
html[data-design="canvas"] .cv-emp h2{line-height:1.08}
/* plain footer */
html[data-design="canvas"] footer{font-family:"Inter",sans-serif;font-size:13px;text-transform:none;letter-spacing:normal;padding:32px 0 44px;border-top:1px solid var(--line)}
/* long-sentence hero: keep the props clear of the subtitle */
html[data-design="canvas"] .cv-hero:has(.cv-word.longer) .chrom{left:30%;top:79%}
html[data-design="canvas"] .cv-hero:has(.cv-word.longer) .t5{right:21%;top:84%}
html[data-design="canvas"] .cv-hero:has(.cv-word.longer) .t4{left:52%;top:84%}
html[data-design="canvas"] .cv-hero:has(.cv-word.longer) .m2{left:6%;top:80%}
/* header stays readable over the map */
html[data-design="canvas"] .nav .bar{background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);height:72px}
html[data-design="canvas"] .frame{padding-top:96px}
html[data-design="canvas"] .cv-hero{padding-top:84px}
/* highlighted-line bubble moved off the headline */
html[data-design="canvas"] .cv-emp .e1{left:2%;top:54%}
html[data-design="canvas"] .cv-hero:has(.cv-word.longer) .chrom{left:31%;top:81%;transform:rotate(-5deg) scale(.8);transform-origin:left top}
html[data-design="canvas"] .cv-hero:has(.cv-word.longer) .chrom{top:84%;transform:rotate(-4deg) scale(.72)}

/* ---- Canvas, round 3: logos below the map, wider hero ---- */
html[data-design="canvas"] .frame{order:2}
html[data-design="canvas"] .logos{order:3;margin-top:40px}
html[data-design="canvas"] .cv-hero{min-height:max(100vh,660px)}
/* wider headline: fewer lines, more room around it */
html[data-design="canvas"] .cv-word.longer{max-width:23ch;font-size:clamp(34px,4.5vw,70px)}
html[data-design="canvas"] .cv-hero:has(.cv-word.longer) .cv-sub{max-width:60ch}
/* floating pieces pushed out to the edges */
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .plate{left:-3%;top:31%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .k1{left:12%;top:13%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .t1{left:24%;top:12%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .k2{left:68%;top:17%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .t2{right:20%;top:9%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .s1{right:-5%;top:8%;width:280px;height:190px}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .k3{left:5%;top:68%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .m2{left:3%;top:82%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .chrom{left:25%;top:80%;transform:rotate(-4deg) scale(.72);transform-origin:left top}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .t4{left:48%;top:85%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .t5{right:27%;top:84%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .k4{right:4%;top:44%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .m1{right:2%;top:58%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .mol{right:7%;top:79%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .m1{right:2%;top:70%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .mol{right:13%;top:84%}
html[data-design="canvas"] .cv-hero:has(.cv-word.long) .s1{top:12%}

/* =====================================================================
   PHONES AND TABLETS (both designs). Desktop is untouched.
   ===================================================================== */
.nav{transition:transform .3s cubic-bezier(.2,.7,.1,1)}
@media (max-width:900px){
  /* header: slides away while scrolling down, so it never covers the map */
  html.nav-away .nav{transform:translateY(-130%)}
  .nav .btn-ink,#authBtn{white-space:nowrap}
  /* taller map, list underneath */
  .app{grid-template-rows:min(64vh,560px) auto}
  #map{min-height:340px}
  /* count pills: icon and number only, on one row */
  .overlay{flex-wrap:nowrap;right:auto;gap:6px;left:10px;bottom:10px}
  .overlay .pillbtn{font-size:12.5px;padding:7px 10px;white-space:nowrap}
  .overlay .lw{display:none}
  /* employer details open as a full-screen sheet */
  .drawer{position:fixed;inset:0;width:auto;height:auto;border-radius:0;border:0;z-index:70;transform:translateY(100%);box-shadow:none}
  .drawer.open{transform:none}
  .drawer .ribbon{border-radius:0;padding-top:max(6px,env(safe-area-inset-top))}
  .drawer .head{position:sticky;top:0;background:var(--surface);z-index:2}
  .drawer .x{width:40px;height:40px;font-size:18px}
  html:has(.drawer.open){overflow:hidden}
  /* filters open as a bottom sheet */
  #fPanel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:78vh;border-radius:20px 20px 0 0;z-index:70;padding:18px 18px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.2)}
  #fPanel::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:-6px auto 12px}
  html:has(#fPanel:not([hidden])){overflow:hidden}
  .fopt{padding:8px 0}.fopt input{width:20px;height:20px}
}
@media (max-width:760px){
  /* the design switch is reachable with ?design=original or ?design=canvas */
  .dsw{display:none}
  .nav .bar{height:56px;padding:0 10px 0 16px}
  .nav .btn-ink,#authBtn{padding:8px 14px;font-size:14px}
  .brand img{height:19px}
  /* Original hero: shorter, so the map comes sooner */
  .hero{padding:52px 0 30px}
  .hero h1{font-size:clamp(30px,8.6vw,40px)}
  .hero .lede{font-size:15.5px;margin-top:18px}
  .free-pill{font-size:13px;padding:8px 13px;margin-top:16px}
  .stats{gap:6px;margin-top:14px}
  .stat{padding:5px 11px 5px 9px;font-size:12.5px}.stat b{font-size:15px}.stat .e{font-size:14px}
  .frame{padding-top:16px}
}

/* ---- Canvas on phones and tablets: compact hero ---- */
@media (max-width:1100px){
  html[data-design="canvas"] .cv-hero{min-height:0;padding:104px 20px 56px;display:flex;flex-direction:column;align-items:center}
  html[data-design="canvas"] .cv-hero .cv-toggle{position:static;transform:none;order:-2;margin:0 0 18px}
  html[data-design="canvas"] .cv-hero .cv-chips{order:-1;margin-bottom:22px}
  html[data-design="canvas"] .cv-hero .cv-sci,html[data-design="canvas"] .cv-hero .cv-shot,html[data-design="canvas"] .cv-hero .cv-cur,
  html[data-design="canvas"] .cv-hero .t3,html[data-design="canvas"] .cv-hero .t4,html[data-design="canvas"] .cv-hero .t5,html[data-design="canvas"] .cv-hero .m2{display:none!important}
  html[data-design="canvas"] .cv-hero .t1{display:grid!important;left:7%;top:96px;right:auto}
  html[data-design="canvas"] .cv-hero .t2{display:grid!important;right:7%;top:88px;left:auto}
  html[data-design="canvas"] .cv-hero .m1{display:flex;position:relative;left:auto;right:auto;top:auto;margin:30px auto 0;max-width:100%}
  html[data-design="canvas"] .cv-hero .m1:empty{display:none}
  html[data-design="canvas"] .cv-word.long,html[data-design="canvas"] .cv-word.longer{font-size:clamp(32px,6.4vw,58px);max-width:20ch}
  html[data-design="canvas"] .cv-word::before{inset:-10px -8px}
  html[data-design="canvas"] .cv-hero .cv-sub{margin-top:26px;max-width:52ch}
  html[data-design="canvas"] .frame{padding-top:24px}
}
@media (max-width:640px){
  html[data-design="canvas"] .nav .bar{height:56px}
  html[data-design="canvas"] .cv-hero{padding:84px 16px 40px}
  html[data-design="canvas"] .cv-hero .cv-tile{width:46px;height:46px;border-radius:12px}
  html[data-design="canvas"] .cv-hero .cv-tile img{width:24px;height:24px}
  html[data-design="canvas"] .cv-hero .cv-tile .em{font-size:22px}
  html[data-design="canvas"] .cv-hero .t1{left:4%;top:70px}
  html[data-design="canvas"] .cv-hero .t2{right:4%;top:66px}
  html[data-design="canvas"] .cv-hero .cv-toggle{font-size:12.5px;padding:7px 11px}
  html[data-design="canvas"] .cv-chips{gap:5px}
  html[data-design="canvas"] .cv-chips span{font-size:11px;padding:4px 9px}
  html[data-design="canvas"] .cv-word.long,html[data-design="canvas"] .cv-word.longer{font-size:clamp(28px,8.4vw,36px);line-height:1.04}
  html[data-design="canvas"] .cv-hero .cv-sub{font-size:14.5px;line-height:1.5}
  html[data-design="canvas"] .cv-msg{min-width:0;font-size:12.5px}
  /* later Canvas sections */
  html[data-design="canvas"] .cv-cards{padding:70px 14px 70px}
  html[data-design="canvas"] .cv-cards .bl{height:auto;min-height:300px;padding:30px 26px}
  html[data-design="canvas"] .cv-dark{padding:60px 14px 50px}
  html[data-design="canvas"] .cv-dark .box{padding:36px 22px;min-height:0;border-radius:22px}
  html[data-design="canvas"] .cv-dark .laptop{margin:24px -40px 0 0}
  html[data-design="canvas"] .cv-dark .cap{padding:0 6px}
  html[data-design="canvas"] .cv-emp .stage{min-height:440px}
  html[data-design="canvas"] .cv-emp h2{font-size:clamp(34px,10vw,46px)}
  html[data-design="canvas"] .cv-det{padding:80px 16px 80px}
  html[data-design="canvas"] .cv-det .vis{height:400px}
  html[data-design="canvas"] .cv-btn{font-size:16px;padding:14px 32px}
}
@media (max-width:1100px){
  html[data-design="canvas"] .cv-hero *{translate:none!important}
  html[data-design="canvas"] .cv-hero .m1{left:auto!important;right:auto!important;top:auto!important}
  html[data-design="canvas"] .cv-hero .t1{left:7%!important;top:96px!important;right:auto!important}
  html[data-design="canvas"] .cv-hero .t2{right:7%!important;top:88px!important;left:auto!important}
  html[data-design="canvas"] .cv-emp .stage *{translate:none!important}
}
@media (max-width:640px){
  html[data-design="canvas"] .cv-hero .t1{left:4%!important;top:70px!important}
  html[data-design="canvas"] .cv-hero .t2{right:4%!important;top:66px!important}
}
@media (max-width:900px){ .overlay{z-index:3} }
@media (max-width:640px){
  html[data-design="canvas"] .cv-hero .cv-toggle{margin-bottom:34px}
  html[data-design="canvas"] .cv-hero .t1{top:72px!important}
  html[data-design="canvas"] .cv-hero .t2{top:68px!important}
}
@media (max-width:1100px){
  html[data-design="canvas"] .cv-hero .cv-toggle{display:flex!important}
  html[data-design="canvas"] .cv-hero .m1{display:flex!important}
  html[data-design="canvas"] .cv-hero .m1:empty{display:none!important}
}
/* the design menu is only for previews: localhost or a ?design= link */
.dsw{display:none}
html.show-dsw .dsw{display:block}
@media (max-width:760px){ html.show-dsw .dsw{display:none} }