/* hoplyy studio layer: the hopping stage, live demos, work panels and specialty layouts.
   Builds on marketing-base.css (tokens, Fredoka) and marketing-refresh.css. */
:root {
  --burrow: #0F3D2E;      /* the stage: deep green so the demos glow */
  --burrow-2: #155040;
  --burrow-ink: #E7F6EF;
  --burrow-muted: #A9D4C3;
  --dandelion: #F7DF72;   /* the bunny's spotlight color: hints, DRAW!, stickers */
  --demo-ink: #1F2A26;
  --demo-muted: #66736D;
  --demo-line: #E3E9E5;
}

/* Section labels: sentence case in the display face, led by the hop arc. */
.eyebrow { text-transform:none; letter-spacing:0; font-family:var(--font-display); font-weight:500; font-size:17px; color:var(--hop-deep); display:flex; align-items:center; gap:10px; }
.eyebrow::before { content:""; width:26px; height:11px; flex:none; background:currentColor; opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M3 37 Q50 -6 97 37' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-dasharray='9 11'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M3 37 Q50 -6 97 37' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-dasharray='9 11'/%3E%3C/svg%3E") center/contain no-repeat; }
.eyebrow svg { display:none; }
.cta-card .eyebrow { justify-content:center; }
.section-heading h2 { font-size:clamp(34px,4.4vw,58px); line-height:1.04; letter-spacing:-.02em; }

/* ---------------------------------------------------------------- home hero ---- */
.home-hero { max-width:1280px; margin:0 auto; padding:148px 24px 46px; }
.home-hero h1 { font-size:clamp(48px,6.4vw,92px); line-height:.98; letter-spacing:-.035em; font-weight:600; max-width:14.5em; text-wrap:balance; }
.home-hero .hero-side { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px 40px; margin-top:30px; }
.home-hero .sub { font-size:19px; color:var(--ink-2); max-width:600px; text-wrap:pretty; }
.home-hero .hero-ctas { justify-content:flex-start; margin:0; gap:10px; }
@media (prefers-reduced-motion: no-preference) {
  .home-hero h1 { animation:hero-rise .9s var(--spring) both; }
  .home-hero .hero-side { animation:hero-rise .9s .12s var(--spring) both; }
  .studio-wrap.lead { animation:hero-rise 1s .22s var(--spring) both; }
}
@keyframes hero-rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }

/* ---------------------------------------------------------------- the stage ---- */
.studio-wrap { max-width:1328px; margin:0 auto; padding:0 24px; }
.studio { position:relative; background:var(--burrow); color:var(--burrow-ink); border-radius:36px; padding:22px 40px 40px; overflow:hidden; isolation:isolate;
  background-image:radial-gradient(circle at 1px 1px, rgba(231,246,239,.07) 1px, transparent 0); background-size:22px 22px; }
.studio::before { content:""; position:absolute; inset:auto -10% -55% 30%; height:90%; background:radial-gradient(closest-side, rgba(43,196,142,.28), transparent); z-index:-1; pointer-events:none; }
.stones { position:relative; display:flex; justify-content:space-between; gap:10px; padding:58px 2% 8px; }
.stone { position:relative; z-index:1; font:500 17px/1 var(--font-display); color:var(--burrow-muted); background:rgba(231,246,239,.06); border:1.5px solid rgba(231,246,239,.16); border-radius:999px; padding:12px 22px; cursor:pointer; transition:background .25s, color .25s, border-color .25s, transform .3s var(--spring); }
.stone:hover { color:var(--burrow-ink); border-color:rgba(231,246,239,.4); transform:translateY(-2px); }
.stone[aria-selected=true] { background:var(--hop); color:#0B2C21; border-color:transparent; font-weight:600; }
.stone:focus-visible { outline:3px solid var(--dandelion); outline-offset:4px; }
.stone-arcs { position:absolute; inset:0; overflow:visible; pointer-events:none; }
.stone-arcs path { fill:none; stroke:rgba(43,196,142,.55); stroke-width:2.5; stroke-dasharray:6 9; stroke-linecap:round; }
.studio-bunny { position:absolute; left:0; top:0; width:58px; color:var(--hop); z-index:2; pointer-events:none; opacity:0; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)); transition:opacity .3s; }
.studio-bunny.in { opacity:1; }
.studio-bunny use { transform-box:fill-box; transform-origin:center; transition:transform .2s; }
.studio-bunny.flip use { transform:scaleX(-1); }
.studio-bunny circle, .studio-bunny use { --paper:var(--burrow); }
.studio-panel { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:44px; align-items:center; margin-top:30px; }
.studio-panel[hidden] { display:none; }
@media (min-width:1101px) { .studio:not(.studio-solo) .studio-panel { min-height:548px; } }
.studio-solo .studio-panel { margin-top:8px; }
.studio-solo .studio-info h3 { display:none; }
.studio-solo .studio-info .studio-icon + h3 + p { margin-top:20px; }
@media (prefers-reduced-motion: no-preference) { .studio-panel:not([hidden]) .studio-demo { animation:demo-in .5s var(--spring) both; } .studio-panel:not([hidden]) .studio-info { animation:demo-in .45s ease both; } }
@keyframes demo-in { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
.studio-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:rgba(43,196,142,.16); color:var(--hop); }
.studio-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.studio-info h3 { font-size:clamp(32px,3.2vw,44px); line-height:1.05; letter-spacing:-.02em; color:#fff; margin:20px 0 14px; }
.studio-info>p { color:var(--burrow-muted); font-size:16.5px; line-height:1.6; }
.studio-info ul { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:9px; }
.studio-info li { position:relative; padding-left:22px; font-size:15px; color:var(--burrow-ink); }
.studio-info li::before { content:""; position:absolute; left:2px; top:.48em; width:9px; height:9px; border-radius:50%; background:var(--hop); box-shadow:0 0 0 4px rgba(43,196,142,.16); }
.studio-hint { margin-top:24px !important; color:var(--dandelion) !important; font-family:var(--font-display); font-size:16px !important; }
.studio-link { display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:var(--burrow-ink); font-weight:600; text-decoration:none; border-bottom:2px solid var(--hop); padding-bottom:3px; }
.studio-link::after { content:""; width:10px; height:10px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); transition:transform .25s var(--spring); }
.studio-link:hover::after { transform:translate(3px) rotate(45deg); }
.studio-demo { min-width:0; }
.studio-demo .demo { min-height:452px; }

/* ----------------------------------------------------------- shared demo kit ---- */
.demo { position:relative; background:#FBFCFA; color:var(--demo-ink); border-radius:24px; padding:22px; box-shadow:0 2px 0 rgba(255,255,255,.4) inset, 0 40px 90px rgba(0,0,0,.38); font-size:14px; }
.demo button { font:inherit; cursor:pointer; color:inherit; }
.demo button:focus-visible, .demo input:focus-visible, .demo select:focus-visible { outline:3px solid var(--hop); outline-offset:2px; }

/* apps: one job, synced */
.demo-apps { display:grid; grid-template-columns:1fr 216px; gap:22px; align-items:center; background:linear-gradient(160deg,#F4F8F6,#E8F1EC); }
.apps-office { background:#fff; border:1px solid var(--demo-line); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(15,61,46,.08); }
.apps-office-bar { display:flex; justify-content:space-between; font:600 15px var(--font-display); margin-bottom:12px; }
.apps-office-bar span:last-child { color:var(--demo-muted); font-weight:500; }
.apps-day { display:grid; gap:8px; }
.apps-slot { display:grid; grid-template-columns:44px 1fr; gap:10px; align-items:center; font-size:12.5px; color:var(--demo-muted); }
.apps-block { border-radius:10px; padding:10px 12px; background:#F1F4F2; color:var(--demo-muted); font-size:13px; }
.apps-block.live { display:flex; justify-content:space-between; align-items:center; gap:8px; background:#E4F7EF; color:var(--demo-ink); border-left:4px solid var(--hop); transition:background .35s, border-color .35s; }
.apps-block.live em { font-style:normal; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:99px; background:#fff; white-space:nowrap; }
.apps-block.pulse { animation:block-pulse .6s ease; }
@keyframes block-pulse { 0% { box-shadow:0 0 0 0 rgba(43,196,142,.55); } 100% { box-shadow:0 0 0 14px rgba(43,196,142,0); } }
.demo-apps[data-step="1"] .apps-block.live { background:#FFF6D6; border-color:#E8B92F; }
.demo-apps[data-step="2"] .apps-block.live { background:#E0F0FF; border-color:#3D8BD9; }
.demo-apps[data-step="3"] .apps-block.live { background:#E4F7EF; border-color:var(--hop-deep); }
.demo-apps[data-step="4"] .apps-block.live { background:var(--burrow); color:#fff; border-color:var(--hop); }
.apps-track { list-style:none; padding:0; margin:16px 0 0; display:flex; gap:6px; }
.apps-track li { flex:1; font-size:10.5px; color:var(--demo-muted); text-align:center; padding-top:12px; position:relative; }
.apps-track li::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; border-radius:9px; background:#E3E9E5; transition:background .35s; }
.apps-track li.on::before { background:var(--hop); }
.apps-track li.now { color:var(--demo-ink); font-weight:600; }
.apps-phone { position:relative; background:#14201B; color:#fff; border-radius:34px; padding:34px 14px 16px; border:6px solid #0B1511; box-shadow:0 24px 50px rgba(15,61,46,.35); min-height:380px; display:flex; flex-direction:column; }
.apps-phone-notch { position:absolute; top:8px; left:50%; width:62px; height:16px; margin-left:-31px; border-radius:99px; background:#0B1511; }
.apps-phone-title { font:600 18px var(--font-display); margin-bottom:12px; }
.apps-job { background:#1F2F28; border-radius:16px; padding:14px; display:grid; gap:4px; }
.apps-job strong { font:600 17px var(--font-display); }
.apps-job>span { font-size:12px; color:#A9C2B8; }
.apps-job-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#A9C2B8; margin-bottom:6px; }
.apps-chip { font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px; background:#33463D; color:#fff; transition:background .3s, color .3s; }
.demo-apps[data-step="1"] .apps-chip { background:#E8B92F; color:#2A2205; }
.demo-apps[data-step="2"] .apps-chip { background:#3D8BD9; }
.demo-apps[data-step="3"] .apps-chip, .demo-apps[data-step="4"] .apps-chip { background:var(--hop); color:#0B2C21; }
.apps-action { margin-top:14px; width:100%; border:0; border-radius:14px; padding:13px 10px; background:var(--hop); color:#0B2C21 !important; font-weight:700 !important; transition:transform .2s var(--spring), background .2s; }
.apps-action:hover { transform:translateY(-2px); background:#3BD69E; }
.apps-action:active { transform:scale(.97); }
.apps-phone-rows { margin-top:auto; display:grid; gap:8px; padding-top:14px; }
.apps-phone-rows i { height:44px; border-radius:14px; background:#1A2822; }
.apps-toast { position:absolute; left:22px; bottom:-18px; max-width:min(380px,70%); background:var(--dandelion); color:#2A2205; font-weight:600; font-size:13px; padding:11px 15px; border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,.25); opacity:0; transform:translateY(8px) rotate(-1.5deg); transition:opacity .3s, transform .4s var(--spring); pointer-events:none; }
.apps-toast.show { opacity:1; transform:rotate(-1.5deg); }

/* games: quick draw */
.demo-games { display:flex; flex-direction:column; overflow:hidden; padding:0; background:linear-gradient(180deg,#9FD6EC 0%,#F6E3B4 62%,#E9C98C 100%); color:#3B2416; }
.duel-scene { position:absolute; inset:0; pointer-events:none; }
.duel-sun { position:absolute; width:120px; height:120px; border-radius:50%; background:#FFE9A3; right:12%; top:18%; box-shadow:0 0 0 18px rgba(255,233,163,.35), 0 0 0 40px rgba(255,233,163,.18); }
.duel-ground { position:absolute; left:0; right:0; bottom:0; height:30%; background:#E2BC7A; border-top:3px solid #C99B57; }
.duel-cactus { position:absolute; bottom:24%; width:44px; fill:none; stroke:#4E7A3A; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.duel-cactus.c1 { left:8%; height:110px; }
.duel-cactus.c2 { right:9%; height:80px; width:34px; }
.duel-button { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; margin:22px 22px 0; min-height:300px; border:0; border-radius:20px; background:rgba(255,250,236,.22); touch-action:manipulation; user-select:none; -webkit-user-select:none; transition:background .15s; }
.duel-button:focus-visible { outline:3px solid #3B2416 !important; outline-offset:-6px !important; }
.duel-big { font:700 clamp(46px,6vw,78px)/1 var(--font-display); letter-spacing:-.02em; color:#3B2416; }
.duel-small { font-size:15px; max-width:30ch; text-align:center; color:#5C4330; }
.demo-games[data-state=wait] .duel-button { background:rgba(59,36,22,.08); }
.demo-games[data-state=wait] .duel-big { animation:steady 1.2s ease-in-out infinite; }
@keyframes steady { 50% { transform:scale(.97); opacity:.75; } }
.demo-games[data-state=draw] .duel-button { background:#B8322A; }
.demo-games[data-state=draw] .duel-big { color:var(--dandelion); font-size:clamp(64px,8vw,104px); animation:draw-pop .25s var(--spring); }
.demo-games[data-state=draw] .duel-small { color:#FFE9D9; }
@keyframes draw-pop { from { transform:scale(.6) rotate(-6deg); } to { transform:none; } }
.demo-games[data-state=early] .duel-big { color:#B8322A; }
.demo-games[data-state=result] .duel-button { background:rgba(255,250,236,.5); }
.demo-games[data-state=result] .duel-big { color:var(--burrow); }
.duel-best { position:relative; z-index:1; margin:14px 24px 0; font:600 15px var(--font-display); color:#3B2416; }
.duel-more { position:relative; z-index:1; margin:6px 24px 20px; font-size:13px; color:#5C4330; }
.duel-more a { color:#3B2416; font-weight:600; }

/* hubspot: build a page */
.demo-hubspot { display:grid; grid-template-columns:200px 1fr; gap:20px; }
.hs-label { font:600 15px var(--font-display); margin-bottom:10px; }
.hs-modules { display:grid; gap:7px; }
.hs-modules button { text-align:left; border:1px solid var(--demo-line); background:#fff; border-radius:11px; padding:9px 12px; font-size:13.5px; display:flex; justify-content:space-between; align-items:center; transition:border-color .2s, transform .2s var(--spring); }
.hs-modules button::after { content:"+"; font:600 17px var(--font-display); color:var(--hop-deep); }
.hs-modules button:hover:not(:disabled) { border-color:var(--hop); transform:translateX(3px); }
.hs-modules button:disabled { opacity:.45; cursor:not-allowed; }
.hs-crm { margin-top:16px; padding:14px; border-radius:14px; background:#FFF4EC; border:1px solid #F7DCC9; }
.hs-crm p:first-child { font-size:13px; }
.hs-crm [data-hs-count] { display:inline-block; font:700 22px var(--font-display); color:#C2410C; margin-right:2px; }
.hs-crm [data-hs-count].bump { animation:bump .45s var(--spring); }
@keyframes bump { 40% { transform:scale(1.5); } }
.hs-send { margin-top:9px; width:100%; border:0; border-radius:10px; padding:9px; background:#C2410C; color:#fff !important; font-weight:600; font-size:13px; }
.hs-send:disabled { background:#E9D5C8; color:#8A6B58 !important; cursor:not-allowed; }
.hs-crm-note { margin-top:8px; font-size:12px; color:#7A5644; line-height:1.4; }
.hs-browser { background:#fff; border:1px solid var(--demo-line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; min-height:400px; }
.hs-bar { display:flex; align-items:center; gap:5px; padding:10px 12px; border-bottom:1px solid var(--demo-line); font-size:11.5px; color:var(--demo-muted); }
.hs-bar i { width:8px; height:8px; border-radius:50%; background:#E3E9E5; }
.hs-bar span { margin-left:10px; }
.hs-page { list-style:none; margin:0; padding:12px; display:grid; gap:9px; align-content:start; flex:1; }
.hs-page[data-empty=true]::before { content:"Add a module to start your page"; display:grid; place-items:center; min-height:300px; border:2px dashed var(--demo-line); border-radius:12px; color:var(--demo-muted); }
.hs-page li { position:relative; border-radius:11px; transition:transform .35s var(--spring), opacity .3s; }
.hs-page li.enter { opacity:0; transform:scale(.9) translateY(-8px); }
.hs-page li:hover { outline:2px solid var(--hop); outline-offset:2px; }
.hs-tag { position:absolute; left:8px; top:-7px; font-size:10px; font-weight:600; background:var(--hop); color:#0B2C21; padding:1px 7px; border-radius:6px; opacity:0; transition:opacity .2s; }
.hs-page li:hover .hs-tag, .hs-page li:focus-within .hs-tag { opacity:1; }
.hs-remove { position:absolute; right:6px; top:6px; width:24px; height:24px; border-radius:50%; border:0; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15); font-size:15px; line-height:1; opacity:0; transition:opacity .2s; }
.hs-page li:hover .hs-remove, .hs-remove:focus-visible { opacity:1; }
@media (hover:none) { .hs-remove, .hs-tag { opacity:1; } }
.hs-page b { display:block; height:8px; border-radius:9px; background:#D4DCD8; }
.hs-page b.s { width:60%; height:6px; background:#E5EBE8; }
.hs-page .pill { display:block; width:64px; height:16px; border-radius:99px; background:var(--hop); }
.m-hero { background:linear-gradient(135deg,#E4F7EF,#F3FBF7); padding:20px 18px; border-radius:11px; display:grid; gap:9px; }
.m-hero b:first-child { width:70%; height:14px; background:#23282C; opacity:.85; }
.m-logos { display:flex; justify-content:space-between; gap:8px; padding:10px 14px; background:#F7F9F8; border-radius:11px; }
.m-logos i { flex:1; height:14px; border-radius:5px; background:#DDE4E0; }
.m-features { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:10px; }
.m-features div { display:grid; gap:6px; }
.m-features i { width:20px; height:20px; border-radius:7px; background:var(--hop); opacity:.75; }
.m-quote { display:flex; gap:12px; align-items:center; padding:12px 14px; background:#FFF8DD; border-radius:11px; }
.m-quote>i { width:30px; height:30px; border-radius:50%; background:#F2C94C; flex:none; }
.m-quote div { flex:1; display:grid; gap:6px; }
.m-form { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; padding:12px; background:#F3F6F4; border:1.5px solid var(--hop); border-radius:11px; }
.m-form b.field { height:22px; border-radius:7px; background:#fff; border:1px solid #D4DCD8; }
.m-cta { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px; border-radius:11px; background:var(--burrow); }
.m-cta b { width:50%; background:rgba(255,255,255,.6) !important; }

/* sanity: edit once, see it everywhere */
.demo-sanity { display:grid; grid-template-columns:220px 1fr; gap:20px; background:linear-gradient(160deg,#F7F7FB,#EEF0F7); }
.sn-studio { background:#fff; border:1px solid #E1E3EE; border-radius:16px; padding:14px; display:grid; gap:11px; align-content:start; box-shadow:0 10px 30px rgba(40,40,80,.08); }
.sn-studio-bar { display:flex; justify-content:space-between; font:600 15px var(--font-display); }
.sn-studio-bar span:last-child { font-weight:500; color:#7A7F99; }
.sn-studio label { display:grid; gap:5px; font-size:12px; font-weight:600; color:#5A5F78; }
.sn-studio input[type=text], .sn-studio select { font:inherit; font-size:14px; font-weight:500; color:var(--demo-ink); border:1px solid #D9DCEA; border-radius:9px; padding:8px 10px; background:#FAFAFD; width:100%; }
.sn-studio fieldset { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.sn-studio legend { font-size:12px; font-weight:600; color:#5A5F78; margin-bottom:5px; }
.sn-swatch { display:block !important; }
.sn-swatch input { position:absolute; opacity:0; }
.sn-swatch span { display:inline-flex; align-items:center; gap:6px; padding:5px 9px 5px 6px; border:1px solid #D9DCEA; border-radius:99px; font-size:12px; cursor:pointer; }
.sn-swatch span::before { content:""; width:14px; height:14px; border-radius:50%; background:var(--c); }
.sn-swatch input:checked + span { border-color:var(--demo-ink); box-shadow:0 0 0 1px var(--demo-ink); }
.sn-swatch input:focus-visible + span { outline:3px solid var(--hop); outline-offset:2px; }
.sn-outputs { display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:auto auto; gap:14px; align-content:center; }
.sn-outputs figure { margin:0; position:relative; }
.sn-outputs figcaption { font-size:11.5px; font-weight:600; color:#7A7F99; margin-top:6px; }
.sn-outputs figure.flash > div { animation:sn-flash .5s ease; }
@keyframes sn-flash { 0% { box-shadow:0 0 0 3px rgba(43,196,142,.7); } 100% { box-shadow:0 0 0 3px rgba(43,196,142,0); } }
.sn-thumb { background:var(--c,#2BC48E); border-radius:10px; position:relative; transition:background .3s; }
.sn-thumb::after { content:""; position:absolute; inset:28% 30%; border-radius:50% 50% 12px 12px; background:rgba(255,255,255,.55); }
.sn-badge { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:99px; background:#DFF5EC; color:#0E6B4A; }
.sn-badge[data-kind=bestseller] { background:#FFF0C7; color:#8A5A00; }
.sn-badge[data-kind=sold-out] { background:#F1F1F4; color:#7A7F99; }
.sn-web { grid-row:span 2; }
.sn-web > div:first-child { background:#fff; border:1px solid #E1E3EE; border-radius:14px 14px 0 0; border-bottom:0; }
.sn-web-bar { display:flex; align-items:center; gap:5px; padding:9px 11px; font-size:11px; color:#7A7F99; border-bottom:1px solid #EEF0F6; }
.sn-web-bar i { width:7px; height:7px; border-radius:50%; background:#E1E3EE; }
.sn-web-bar span { margin-left:8px; }
.sn-web-body { background:#fff; border:1px solid #E1E3EE; border-top:0; border-radius:0 0 14px 14px; padding:14px; display:grid; gap:12px; box-shadow:0 14px 30px rgba(40,40,80,.08); }
.sn-web-body .sn-thumb { height:120px; }
.sn-web-body > div:last-child { display:grid; gap:4px; justify-items:start; }
.sn-web-body strong { font:600 20px/1.15 var(--font-display); }
.sn-price { font-weight:700; }
.sn-buy { margin-top:6px; font-size:12px; font-weight:700; background:var(--demo-ink); color:#fff; padding:7px 12px; border-radius:99px; }
.demo-sanity.sold-out .sn-buy { background:#E1E3EE; color:#7A7F99; }
.sn-app-body { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; background:#14201B; color:#fff; border-radius:18px; padding:12px; border:5px solid #0B1511; }
.sn-app-body .sn-thumb { height:42px; }
.sn-app-body strong { display:block; font:600 14px var(--font-display); }
.sn-app-body span { font-size:12px; color:#A9C2B8; }
.sn-app-body .sn-badge { color:#0E6B4A; }
.sn-screen-body { background:var(--c,#2BC48E); color:#fff; border-radius:12px; padding:14px; border:6px solid #23282C; display:grid; gap:2px; justify-items:start; transition:background .3s; min-height:96px; }
.sn-screen-body strong { font:700 19px/1.1 var(--font-display); }
.sn-screen-body span:not(.sn-badge) { font:600 22px var(--font-display); }
.sn-screen-body .sn-badge { background:rgba(255,255,255,.9); }

/* wordpress: blocks and style variations */
.demo-wordpress { display:grid; grid-template-columns:200px 1fr; gap:20px; }
.wp-label { font:600 15px var(--font-display); margin:0 0 9px; }
.wp-label + .wp-blocks { margin-bottom:18px; }
.wp-blocks { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.wp-blocks li { display:grid; grid-template-columns:1fr 28px 28px; gap:4px; align-items:center; background:#fff; border:1px solid var(--demo-line); border-radius:10px; padding:5px 5px 5px 11px; font-size:13.5px; }
.wp-blocks button { width:28px; height:28px; border:0; border-radius:8px; background:#F1F4F2; font-size:14px; }
.wp-blocks button:hover { background:#DFF5EC; }
.wp-blocks li:first-child [data-wp-move="-1"], .wp-blocks li:last-child [data-wp-move="1"] { opacity:.3; }
.wp-styles { display:grid; gap:6px; }
.wp-styles button { border:1px solid var(--demo-line); background:#fff; border-radius:10px; padding:8px 11px; text-align:left; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.wp-styles button::before { content:""; width:16px; height:16px; border-radius:5px; flex:none; }
.wp-styles [data-wp-style=fresh]::before { background:linear-gradient(135deg,#2BC48E 50%,#FBFCFA 50%); border:1px solid #D4DCD8; }
.wp-styles [data-wp-style=midnight]::before { background:linear-gradient(135deg,#F7DF72 50%,#161B2E 50%); }
.wp-styles [data-wp-style=sunny]::before { background:linear-gradient(135deg,#E2553B 50%,#FFF3C4 50%); border:1px solid #F0D98A; }
.wp-styles button[aria-pressed=true] { border-color:var(--demo-ink); box-shadow:0 0 0 1px var(--demo-ink); }
.wp-preview { --bg:#FBFCFA; --fg:#1F2A26; --accent:#2BC48E; --soft:#E4F7EF; --head:var(--font-display); border-radius:16px; overflow:hidden; border:1px solid var(--demo-line); background:var(--bg); color:var(--fg); transition:background .45s, color .45s; min-height:400px; }
.wp-preview[data-style=midnight] { --bg:#161B2E; --fg:#EEF0FA; --accent:#F7DF72; --soft:#232A45; --head:Georgia, "Times New Roman", serif; }
.wp-preview[data-style=sunny] { --bg:#FFF6D6; --fg:#3A1F12; --accent:#E2553B; --soft:#FFE6A6; --head:var(--font-display); }
.wp-site-bar { display:flex; align-items:center; gap:14px; padding:12px 16px; font-size:12px; border-bottom:1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.wp-site-bar b { font-family:var(--head); font-size:15px; margin-right:auto; }
.wp-canvas { padding:16px 18px 20px; display:grid; gap:12px; }
.wp-canvas h4 { margin:0; font:600 26px/1.08 var(--head); letter-spacing:-.01em; transition:font-family .2s; }
.wp-canvas p { margin:0; font-size:13.5px; opacity:.8; }
.wp-img { height:92px; border-radius:12px; background:var(--soft); display:flex; align-items:flex-end; justify-content:center; gap:10px; padding:0 20px 14px; transition:background .45s; }
.wp-img i { width:58px; height:34px; border-radius:30px 30px 8px 8px; background:var(--accent); opacity:.85; transition:background .45s; }
.wp-img i:nth-child(2) { height:44px; width:66px; }
.wp-btns { display:flex; gap:8px; }
.wp-btns span { font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:99px; background:var(--accent); color:var(--bg); transition:background .45s; }
.wp-btns span.ghost { background:transparent; color:var(--fg); border:1.5px solid currentColor; }
.wp-canvas blockquote { margin:0; padding-left:12px; border-left:3px solid var(--accent); font:500 16px var(--head); }

/* ------------------------------------------------------------ work panels ---- */
.work-head { max-width:1280px; margin:0 auto; padding:0 24px; }
.work-stack { max-width:1328px; margin:36px auto 0; padding:0 24px; display:grid; gap:30px; }
.work-panel { --pi:#1F2A26; --pm:#55625C; --pa:var(--hop-deep); position:sticky; top:calc(92px + var(--i, 0) * 16px); min-height:560px; border-radius:36px; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; align-items:center; padding:56px; overflow:hidden; color:var(--pi); box-shadow:0 -14px 40px rgba(15,40,30,.08); }
.work-panel h3 { font-size:clamp(36px,4vw,60px); line-height:1; letter-spacing:-.025em; margin:14px 0 18px; color:var(--pi); }
.work-kind { font:500 16px var(--font-display); color:var(--pa); }
.work-panel p { color:var(--pm); font-size:16.5px; line-height:1.6; max-width:46ch; }
.work-facts-row { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 28px; padding:0; list-style:none; }
.work-facts-row li { font-size:13.5px; font-weight:600; padding:7px 13px; border-radius:99px; background:color-mix(in srgb, var(--pi) 7%, transparent); color:var(--pi); }
.work-cta { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:99px; background:var(--pi); color:var(--pbg, #fff); font-weight:600; text-decoration:none; transition:transform .25s var(--spring); }
.work-cta:hover { transform:translateY(-3px); }
.work-media { perspective:1400px; }
.work-frame { display:block; --rx:0deg; --ry:0deg; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .25s ease-out; border-radius:18px; overflow:hidden; box-shadow:0 40px 80px rgba(20,30,25,.28); }
.work-frame img { display:block; width:100%; height:auto; }
.work-panel[data-work=pillar] { background:#FFF1E6; --pa:#C2410C; --pbg:#FFF1E6; }
.work-panel[data-work=tenpaces] { background:linear-gradient(180deg,#BFE3F2 0%,#F6E5BC 70%); --pi:#3B2416; --pm:#6A4B35; --pa:#A3352B; --pbg:#F6E5BC; }
.work-panel[data-work=doodle-harvest], .work-panel[data-work=doodle-duel], .work-panel[data-work=games] { background:#FBFAF5 repeating-linear-gradient(180deg,transparent 0 31px,#DFE6F2 31px 32px); --pa:#C2302A; --pbg:#FBFAF5; }
.work-panel[data-work=furststaffing] { background:#0E2341; --pi:#F3F6FB; --pm:#B5C2D6; --pa:#7FD1B0; --pbg:#0E2341; }
.work-panel .feature-list { color:var(--pm); margin-bottom:26px; }
.work-panel .feature-list li::before { background:var(--pa); }
.work-panel.static { position:relative; top:auto; }

/* --------------------------------------------------------- directory rows ---- */
.directory { list-style:none; margin:0; padding:0; border-bottom:1px solid var(--hairline); }
.directory a { display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr) 40px; gap:26px; align-items:center; padding:28px 18px; border-top:1px solid var(--hairline); text-decoration:none; border-radius:0; transition:background .3s, border-radius .3s; }
.directory a:hover, .directory a:focus-visible { background:var(--hop-soft); border-radius:24px; }
.directory .build-icon { width:56px; height:56px; border-radius:18px; }
.directory .build-icon svg { width:28px; height:28px; }
.directory strong { font:600 clamp(28px,3.4vw,46px)/1 var(--font-display); letter-spacing:-.02em; transition:transform .35s var(--spring); }
.directory a:hover strong { transform:translateX(8px); }
.directory span.desc { color:var(--ink-2); font-size:16px; line-height:1.55; }
.directory .go { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--hairline); transition:background .3s, transform .35s var(--spring), border-color .3s; }
.directory .go::after { content:""; width:10px; height:10px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:translate(-2px,2px) rotate(45deg); }
.directory a:hover .go { background:var(--hop); border-color:var(--hop); transform:rotate(-45deg); }

/* --------------------------------------------------------- specialty pages ---- */
.sp-hero { max-width:1280px; margin:0 auto; padding:140px 24px 40px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:56px; align-items:end; }
.sp-hero .breadcrumbs { grid-column:1 / -1; margin-bottom:-28px; }
.sp-hero h1 { font-size:clamp(44px,6.4vw,92px); line-height:.97; letter-spacing:-.035em; font-weight:600; text-wrap:balance; }
.sp-hero .hl-inline { color:inherit; }
.sp-hero .lede { font-size:18.5px; color:var(--ink-2); line-height:1.6; }
.sp-hero .hero-ctas { justify-content:flex-start; margin-top:24px; gap:10px; }
@media (prefers-reduced-motion: no-preference) { .sp-hero h1 { animation:hero-rise .9s var(--spring) both; } .sp-hero .sp-side { animation:hero-rise .9s .12s var(--spring) both; } }
.spec { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:start; }
.spec-head { position:sticky; top:120px; }
.spec-head h2 { font-size:clamp(34px,4.2vw,56px); line-height:1.04; letter-spacing:-.02em; margin-top:14px; }
.spec-head p:not(.eyebrow) { color:var(--ink-2); margin-top:18px; max-width:38ch; }
.spec-list { list-style:none; margin:0; padding:0; }
.spec-list li { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:28px; padding:26px 0; border-top:1px solid var(--hairline); }
.spec-list li:last-child { border-bottom:1px solid var(--hairline); }
.spec-list h3 { font-size:23px; line-height:1.2; }
.spec-list p { color:var(--ink-2); font-size:16px; }
.spec-list a { display:inline-block; margin-top:10px; font-weight:600; font-size:15px; text-underline-offset:5px; }
.hop-path-wrap { position:relative; margin-top:44px; }
.hop-path { position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.hop-path-arcs { position:absolute; left:0; right:0; top:0; width:100%; height:52px; overflow:visible; }
.hop-path-arcs path { fill:none; stroke:var(--hop); stroke-width:3; stroke-dasharray:7 10; stroke-linecap:round; opacity:.7; }
.hop-stop { position:relative; padding-top:68px; }
.hop-stop::before { content:""; position:absolute; top:40px; left:50%; width:22px; height:22px; margin-left:-11px; border-radius:50%; background:var(--hop); box-shadow:0 0 0 7px var(--hop-soft-2); }
.hop-stop .hopnum { display:block; text-align:center; font:500 15px var(--font-display); color:var(--hop-deep); }
.hop-stop h3 { text-align:center; font-size:26px; margin:6px 0 10px; }
.hop-stop p { text-align:center; color:var(--ink-2); font-size:15.5px; line-height:1.55; max-width:30ch; margin:0 auto; }

/* ------------------------------------------------------------ responsive ---- */
@media (max-width:1100px) {
  .studio { padding:18px 26px 32px; }
  .studio-panel { grid-template-columns:1fr; gap:26px; }
  .studio-info { max-width:680px; }
  .studio-info ul { grid-template-columns:repeat(3,auto); justify-content:start; column-gap:26px; }
  .work-panel { grid-template-columns:1fr; padding:40px; min-height:0; gap:30px; }
  .work-media { order:-1; }
}
@media (max-width:860px) {
  .home-hero { padding-top:118px; }
  .sp-hero { grid-template-columns:1fr; gap:26px; padding-top:118px; }
  .sp-hero .breadcrumbs { margin-bottom:0; }
  .stones { padding:50px 0 6px; flex-wrap:wrap; justify-content:center; gap:10px 8px; }
  .stone { padding:10px 15px; font-size:15.5px; }
  .demo-apps, .demo-hubspot, .demo-sanity, .demo-wordpress { grid-template-columns:1fr; }
  .apps-phone { max-width:260px; justify-self:center; min-height:0; }
  .apps-phone-rows { display:none; }
  .apps-toast { position:static; max-width:none; margin-top:-6px; }
  .hs-modules { grid-template-columns:repeat(3,1fr); }
  .hs-browser { min-height:300px; }
  .wp-blocks { grid-template-columns:1fr; }
  .wp-styles { grid-template-columns:repeat(3,1fr); }
  .spec { grid-template-columns:1fr; gap:24px; }
  .spec-head { position:static; }
  .hop-path { grid-template-columns:1fr 1fr; row-gap:10px; }
  .hop-path-arcs { display:none; }
  .directory a { grid-template-columns:52px minmax(0,1fr) 40px; gap:16px; padding:22px 8px; }
  .directory span.desc { grid-column:2 / 3; grid-row:2; font-size:15px; }
  .directory .go { grid-column:3; grid-row:1 / span 2; }
  .directory .build-icon { grid-row:1 / span 2; width:48px; height:48px; }
  .work-panel { position:relative; top:auto; }
}
@media (max-width:540px) {
  .home-hero h1 { font-size:46px; }
  .sp-hero h1 { font-size:44px; }
  .studio-wrap, .work-stack { padding:0 12px; }
  .studio { border-radius:26px; padding:12px 16px 24px; }
  .studio-info .studio-icon, .studio-info ul { display:none; }
  .studio-info h3 { margin-top:6px; }
  .demo { padding:16px; border-radius:20px; }
  .studio-demo .demo { min-height:0; }
  .duel-button { min-height:250px; margin:16px 16px 0; }
  .hs-modules { grid-template-columns:1fr 1fr; }
  .sn-outputs { grid-template-columns:1fr; }
  .sn-web { grid-row:auto; }
  .work-panel { padding:26px 20px; border-radius:26px; }
  .spec-list li { grid-template-columns:1fr; gap:8px; }
  .hop-path { grid-template-columns:1fr; }
  .hop-stop { padding-top:0; padding-left:44px; }
  .hop-stop::before { top:4px; left:0; margin-left:0; }
  .hop-stop .hopnum, .hop-stop h3, .hop-stop p { text-align:left; margin-left:0; }
}
@media (prefers-reduced-motion: reduce) { .work-frame { transform:none !important; } }