/* ===== Crafti feature demos — copy this block ===== */
/* No mask/fade: the demo encodes are re-tinted so their sheet colour IS the page colour (#F5F2EC). */
.features{background:var(--paper,#F5F2EC);padding:24px 20px 96px}
.features-inner{max-width:1240px;margin:0 auto}
.features-head{text-align:center;max-width:640px;margin:0 auto 8px}
.features-head h2{font-size:clamp(26px,3vw,36px)}
.features-head p{color:#6b645a;margin:8px 0 0}
.feat-group{margin-top:56px}
.feat-group>h3{font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a8176;margin:0 0 4px;text-align:center}
.feat-grid{display:grid;gap:28px 32px}
.feat-grid--primary{grid-template-columns:repeat(2,1fr);gap:36px 48px}
.feat-grid--secondary{grid-template-columns:repeat(3,1fr)}
.feat-grid--more{grid-template-columns:repeat(4,1fr);gap:20px 24px}
.feat{margin:0;min-width:0}
.tile-media{position:relative;aspect-ratio:1280/800}          /* every demo is 1280x800: space reserved, no layout shift */
.tile-media>picture{position:absolute;inset:0}
.tile-media img,.tile-media>video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.tile-media>video{opacity:0;transition:opacity .35s}
.tile-media.is-playing>video{opacity:1}
.feat h4{font:600 17px/1.25 "Iowan Old Style","Palatino Linotype",Georgia,serif;margin:2px 0 4px;color:#2f2b26}
.feat-grid--more .feat h4{font-size:15px}
.feat p{margin:0;font-size:14px;line-height:1.45;color:#6b645a}
.feat-grid--more .feat p{font-size:13px}
.feat-grid--primary .feat h4{font-size:20px}
.ai{display:inline-flex;align-items:center;gap:3px;margin-left:6px;vertical-align:2px;font:600 10px/1 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.12em;color:#b0791a}
.ai svg{width:9px;height:9px}
@media (max-width:1024px){.feat-grid--primary{gap:28px 28px}.feat-grid--secondary{grid-template-columns:repeat(2,1fr)}.feat-grid--more{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.feat-grid--primary,.feat-grid--secondary,.feat-grid--more{grid-template-columns:1fr;gap:28px}.feat-group{margin-top:40px}
  .feat-grid--more .feat h4{font-size:17px}.feat-grid--more .feat p{font-size:14px}}
@media (prefers-reduced-motion:reduce){.tile-media:not(.user-play)>video{display:none}}
/* ===== end feature demos ===== */
/* header without the edge fade (user preference): matched background only */
.hero-media--nofade{-webkit-mask-image:none;mask-image:none}
/* user-defined order (inventory customOrder=true): one flowing grid, Primary 2-up, others 3-up */
.feat-grid--custom{grid-template-columns:repeat(6,1fr);gap:36px 40px;margin-top:48px}
.feat-grid--custom .span-2{grid-column:span 2}.feat-grid--custom .span-3{grid-column:span 3}
.feat-grid--custom .span-4{grid-column:span 4}.feat-grid--custom .span-6{grid-column:span 6}
.feat-grid--custom .feat--primary h4{font-size:20px}
@media (max-width:1024px){.feat-grid--custom{grid-template-columns:repeat(2,1fr)}.feat-grid--custom .feat{grid-column:span 1}}
@media (max-width:600px){.feat-grid--custom{grid-template-columns:1fr}}
.feat-grid--custom .span-6{justify-self:center;width:min(100%,820px)}
/* one feature per row (current layout): wide demo + quiet text, alternating sides on desktop, stacked on phones */
.feat-rows{display:flex;flex-direction:column;gap:clamp(56px,7vw,112px);margin-top:clamp(32px,4vw,56px)}
.feat-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);align-items:center;gap:clamp(28px,4vw,64px)}
.feat-row:nth-child(even){grid-template-columns:minmax(0,3fr) minmax(0,7fr)}
.feat-row:nth-child(even) .tile-media{order:2}

.feat-text h3{font:600 clamp(20px,1.9vw,26px)/1.2 "Iowan Old Style","Palatino Linotype",Georgia,serif;margin:0 0 8px;color:#2f2b26;letter-spacing:0}
.feat-text p{margin:0;font-size:16px;line-height:1.5;color:#6b645a;max-width:34ch}
@media (max-width:760px){
  .feat-row,.feat-row:nth-child(even){grid-template-columns:1fr;gap:14px}
  .feat-row:nth-child(even) .tile-media{order:0}
  .feat-text p{max-width:none;font-size:15px}
}
/* stack layout (current): heading above, the demo across the full content width, one-line subtitle below */
.feat-stack{display:flex;flex-direction:column;gap:clamp(180px,22vw,360px);margin-top:clamp(40px,5vw,72px)}
.feat-full{text-align:center}
.feat-full .feat-title{font:600 clamp(22px,2.2vw,30px)/1.2 "Iowan Old Style","Palatino Linotype",Georgia,serif;margin:0 auto clamp(14px,1.8vw,24px);max-width:720px;color:#2f2b26}
.feat-full .feat-sub{margin:clamp(12px,1.5vw,20px) auto 0;font-size:clamp(15px,1.3vw,17px);line-height:1.5;color:#6b645a;max-width:60ch}
/* full row width, but never taller than 80% of the viewport: width follows from the cap, aspect ratio kept */
.feat-full .tile-media{width:min(100%, calc(80svh * var(--ar)));margin:0 auto}
/* white-sheet demos: white x page colour = page colour, in any colour pipeline */
.tile-media--multiply img,.tile-media--multiply>video{mix-blend-mode:multiply}
/* canvas presentation (assets/canvas-video.js): the <video> only decodes; the canvas shows it via the CSS colour path */
.cv>video{opacity:0 !important}
.cv>.cv-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .3s}
.cv.cv-on>.cv-canvas{opacity:1}
@media (prefers-reduced-motion:reduce){.cv:not(.user-play)>.cv-canvas{display:none}}
.more-wrap{display:flex;justify-content:center;margin:clamp(110px,13vw,210px) 0 0}
.more-btn{font:500 15px/1 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;letter-spacing:.02em;color:#2f2b26;background:transparent;border:1px solid rgba(47,43,38,.35);border-radius:999px;padding:13px 26px;cursor:pointer;transition:background .2s,border-color .2s}
.more-btn:hover{background:rgba(47,43,38,.06);border-color:rgba(47,43,38,.6)}
.more-btn:focus-visible{outline:2px solid #2f2b26;outline-offset:3px}
.feat-more{margin-top:clamp(110px,13vw,210px)}
.feat-more[hidden]{display:none}
/* feature sidebar */
.feat-nav{position:fixed;left:clamp(12px,2vw,32px);top:50%;transform:translateY(-50%);width:clamp(190px,15vw,240px);max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;z-index:5;opacity:0;pointer-events:none;transition:opacity .3s;font:13px/1.35 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;scrollbar-width:thin}
.feat-nav.show{opacity:1;pointer-events:auto}
.feat-nav .nav-h{margin:0 0 6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8f877b}
.feat-nav .nav-more{margin-top:18px}
.feat-nav ol{list-style:none;margin:0;padding:0;border-left:1px solid rgba(47,43,38,.15)}
.feat-nav a{display:block;padding:7px 0 7px 12px;line-height:1.3;margin-left:-1px;border-left:2px solid transparent;color:#7a7266;text-decoration:none}
.feat-nav a:hover{color:#2f2b26}
.feat-nav a.on{color:#2f2b26;border-left-color:#2f2b26;font-weight:600}
.feat-nav a:focus{outline:none}
.feat-nav a:focus-visible{outline:none;text-decoration:underline;text-underline-offset:3px}
html{scroll-padding-top:24px}
@media (min-width:900px){.features-inner{padding-left:clamp(0px,calc(15vw - 60px),200px)}}
@media (max-width:899px){.feat-nav{display:none}}
.feat-jump{display:none}
@media (max-width:899px){.feat-jump{display:block;position:sticky;top:10px;z-index:5;max-width:1240px;margin:0 auto 8px;text-align:center}
.feat-jump select{font:14px -apple-system,BlinkMacSystemFont,"Inter",sans-serif;color:#6b645a;background:rgba(245,242,236,.92);backdrop-filter:blur(6px);border:1px solid rgba(47,43,38,.25);border-radius:999px;padding:9px 16px;max-width:100%}}

.feat-nav::-webkit-scrollbar{display:none}
.feat-nav button.nav-h{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8f877b;text-align:left}
.feat-nav button.nav-h:hover{color:#2f2b26}
.feat-nav .chev{display:inline-block;transition:transform .2s;font-size:9px}
.feat-nav .nav-more.open .chev{transform:rotate(90deg)}
.feat-nav ol[hidden]{display:none}

/* use the full window height: when the list is long, pin it to the top and tighten the spacing */
.feat-nav.tall{top:16px;transform:none}
.feat-nav.tall a{padding-top:6px;padding-bottom:6px}
.feat-nav.tall.dense{font-size:12.5px}
.feat-nav.tall.dense a{padding-top:5px;padding-bottom:5px}
.feat-nav.tall.dense .nav-more{margin-top:10px}
.feat-nav button.nav-h:focus{outline:none}
.feat-nav button.nav-h:focus-visible{outline:2px solid #2f2b26;outline-offset:2px}
.feat-nav.scrolls{-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent);padding-bottom:28px}
.logo{display:inline-flex;align-items:center;color:#2f2b26}
.logo .logo-svg{height:26px;width:auto;display:block}
@media (max-width:600px){.logo .logo-svg{height:22px}}
.logo .logo-svg{height:20px}
@media (max-width:600px){.logo .logo-svg{height:17px}}
/* Craft Guy peeks over the "More Features" button and pops up a little more on hover / when open */
.more-wrap{position:relative;flex-direction:column;align-items:center}
.more-wrap .peek{display:block;height:44px;overflow:hidden;color:#2f2b26;margin-bottom:-2px;pointer-events:none}
.more-wrap .guy-svg{display:block;height:64px;width:auto;transform:translateY(22px);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.more-wrap:hover .guy-svg,.more-btn:focus-visible~.peek .guy-svg,.more-wrap:has(.more-btn[aria-expanded="true"]) .guy-svg{transform:translateY(4px) rotate(-6deg)}
@media (prefers-reduced-motion:reduce){.more-wrap .guy-svg{transition:none}}
/* softer wordmark that melts into the paper: warm grey ink, multiplied onto the background */
.logo{color:#6b6359;mix-blend-mode:multiply;opacity:.82}
.logo:hover{opacity:1}
/* more breathing room at the top of the page */
.nav{padding-top:clamp(22px,3vw,40px);padding-bottom:clamp(10px,1.5vw,20px)}
.hero-copy{padding-top:clamp(24px,4vw,60px)}
.hero--fit{--chrome:420px}
@media (max-width:600px){.nav{padding-top:20px}.hero-copy{padding-top:28px}}
/* the wordmark rides at the top of the sidebar once the header is gone */
.feat-nav .nav-logo{display:block;width:max-content;margin:0 0 22px;color:#6b6359;mix-blend-mode:multiply;opacity:.82;border:0;padding:0}
.feat-nav .nav-logo:hover{opacity:1}
.feat-nav .nav-logo-svg{display:block;height:16px;width:auto}
.feat-nav.tall .nav-logo{margin-bottom:16px}
/* sidebar anchored top-left, where the header logo was, instead of floating mid-height */
.feat-nav,.feat-nav.tall{top:clamp(22px,3vw,40px);transform:none;max-height:calc(100vh - clamp(22px,3vw,40px) - 16px)}
.feat-nav{left:max(clamp(12px,2vw,32px),calc((100vw - 1240px) / 2 + 20px - 260px))}
/* headline now sits under the drawing */
.hero--fit{--chrome:375px}
.hero-media + .hero-copy{padding-top:clamp(20px,2.5vw,36px);padding-bottom:clamp(24px,3vw,48px)}
.features{padding-top:clamp(40px,6vw,96px)}
/* light separation between the top area and the features */
.features{padding-top:clamp(28px,4vw,64px)}
.features-sep{display:flex;align-items:center;gap:18px;max-width:880px;margin:0 auto clamp(48px,6vw,96px);color:#9a9184;font:500 11px/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;letter-spacing:.18em;text-transform:uppercase}
.features-sep::before,.features-sep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(47,43,38,.09))}
.features-sep::after{background:linear-gradient(90deg,rgba(47,43,38,.09),transparent)}
.feat-stack{margin-top:0}
@media (min-width:900px){.features-inner{padding-left:max(0px,calc(clamp(190px,15vw,240px) + clamp(12px,2vw,32px) + 28px - (100vw - 1240px) / 2))}}
@media (min-width:900px){.features-inner{padding-left:max(0px,calc(max(clamp(12px,2vw,32px),(100vw - 1240px) / 2 + 20px - 260px) + clamp(190px,15vw,240px) + 32px - max(0px,(100vw - 1240px) / 2)))}}
/* sidebar lives in the features section: starts level with the "Features" divider, then sticks top-left while scrolling */
@media (min-width:900px){
  .features{display:grid;grid-template-columns:clamp(190px,15vw,240px) minmax(0,1fr);column-gap:clamp(28px,3vw,56px);max-width:1520px;margin:0 auto;padding-left:clamp(20px,3vw,48px);padding-right:clamp(20px,3vw,48px);align-items:start}
  .feat-nav,.feat-nav.tall{position:sticky;left:auto;top:clamp(22px,3vw,40px);transform:none;opacity:1;pointer-events:auto;grid-column:1;grid-row:1 / span 2;align-self:start;width:auto;max-height:calc(100vh - clamp(22px,3vw,40px) - 16px)}
  .features-inner,.features-inner{grid-column:2;padding-left:0 !important;max-width:1240px;margin:0 auto;width:100%}
  .feat-nav .nav-logo{display:none}
  .feat-nav.stuck .nav-logo{display:block}
}
@media (min-width:900px){.features{max-width:1240px;padding-left:20px;padding-right:20px;box-sizing:content-box;column-gap:clamp(32px,3vw,48px)}}
@media (min-width:900px){.features{max-width:1200px}}
/* feature headings: warm dark grey instead of near-black */
.feat-full .feat-title{color:#5a534a}
/* mascot: More Features peek (hair only at rest, fully out on hover/focus) */
.more-wrap .peek{display:block;height:58px;overflow:hidden;color:#2f2b26;margin-bottom:-1px;pointer-events:none}
.more-wrap .peek-guy{display:block;width:54px;height:56px;transform:translateY(36px);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.more-wrap .peek-guy svg{width:100%;height:100%;display:block}
.more-wrap.out .peek-guy{transform:translateY(2px)}
.more-wrap.opened:not(.out) .peek-guy{transform:translateY(20px)}
/* closing note */
.closing{display:flex;flex-direction:column;align-items:center;gap:14px;margin:clamp(120px,14vw,220px) auto clamp(40px,6vw,90px);text-align:center;color:#5a534a}
.closing-guy{display:block;width:72px;height:75px;color:#5a534a;opacity:.85}
.closing-guy svg{width:100%;height:100%;display:block}
.closing-line{margin:0;font:600 clamp(20px,2vw,26px)/1.3 "Iowan Old Style","Palatino Linotype",Georgia,serif}
/* lower-right corner peek */
.corner-guy{position:fixed;right:clamp(14px,2.2vw,34px);bottom:0;width:46px;height:40px;padding:0;border:0;background:none;cursor:pointer;overflow:hidden;z-index:6;color:#5a534a;opacity:0;pointer-events:none;transition:opacity .4s}
.corner-guy.show{opacity:.55;pointer-events:auto}
.corner-guy:hover,.corner-guy:focus-visible{opacity:.95}
.corner-guy>span{display:block;width:46px;height:48px;transform:translateY(22px);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.corner-guy:hover>span,.corner-guy:focus-visible>span{transform:translateY(-2px)}
.corner-guy:hover{height:52px}
.corner-guy svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){.more-wrap .peek-guy,.corner-guy>span{transition:none}}
/* Craft Guy inside the "Start a project" button */
.cta--guy{display:inline-flex;align-items:center;gap:10px;padding:10px 22px 10px 14px;transition:transform .2s,background .2s}
.cta--guy .cta-guy{display:block;width:24px;height:25px;color:#fff;transform:translateY(-1px)}
.cta--guy .cta-guy svg{width:100%;height:100%;display:block}
.cta--guy:hover{background:#3d3831;transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.cta--guy{transition:none}.cta--guy:hover{transform:none}}
/* corner guy: no clipping box (the window edge hides his lower half), no size jump, no native tooltip */
.corner-guy,.corner-guy:hover{height:58px;width:56px;overflow:visible;right:clamp(18px,2.4vw,38px)}
.corner-guy>span{width:50px;height:52px;margin:0 auto;transform:translateY(30px);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.corner-guy:hover>span,.corner-guy:focus-visible>span{transform:translateY(2px)}
.corner-guy::after{content:"Back to top";position:absolute;right:62px;bottom:16px;white-space:nowrap;font:500 11px/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;letter-spacing:.06em;color:#7a7266;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;pointer-events:none}
.corner-guy:hover::after,.corner-guy:focus-visible::after{opacity:1;transform:none}
/* Craft Guy beside "Let's Build", in the heading's ink */
.h1-guy{display:inline-flex;align-items:center;gap:.28em}
.h1-guy .title-guy{display:block;width:.92em;height:.96em;color:#5a534a;transform:translateY(-.04em)}
.h1-guy .title-guy svg{width:100%;height:100%;display:block}
.hero-copy h1{color:#5a534a}
/* sidebar call to action: clean outline button under "More Features" */
.feat-nav .nav-cta{display:inline-block;margin:22px 0 4px;padding:9px 18px;border:1px solid rgba(47,43,38,.45);border-left:1px solid rgba(47,43,38,.45);border-radius:999px;color:#2f2b26;font-weight:500;font-size:13px;line-height:1;text-decoration:none;background:transparent;transition:background .2s,border-color .2s}
.feat-nav .nav-cta:hover{background:rgba(47,43,38,.06);border-color:#2f2b26}
.feat-nav .nav-cta:focus-visible{outline:2px solid #2f2b26;outline-offset:2px}
.feat-nav .nav-cta.on{font-weight:500}
/* "Let's Build" heading: all caps sans (try ?h=archivo · ?h=montserrat · ?h=serif) */
html[data-h="archivo"] .hero-copy h1{font-family:"Archivo",system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(30px,3.8vw,48px)}
html[data-h="montserrat"] .hero-copy h1{font-family:"Montserrat",system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(28px,3.6vw,46px)}
html[data-h="archivo"] .h1-guy,html[data-h="montserrat"] .h1-guy{gap:.38em}
html[data-h="archivo"] .h1-guy .title-guy,html[data-h="montserrat"] .h1-guy .title-guy{width:1.05em;height:1.1em}
/* space between the More/Fewer Features button and the first extra feature */
.feat-stack.feat-more{margin-top:clamp(110px,13vw,210px)}
/* subheading on one line on desktop and tablet (wraps naturally on phones) */
.hero-copy{max-width:none}
.hero-copy p{max-width:none}
@media (min-width:760px){.hero-copy p{white-space:nowrap}}
/* divider: just a hairline next to the sidebar (the sidebar already says "Features"); keep the label where there is no sidebar */
@media (min-width:900px){.features-sep span{display:none}.features-sep{gap:0}}
/* longer subtitles: aim for about three lines */
.feat-full .feat-sub{max-width:min(100%,92ch);font-size:clamp(15px,1.15vw,16.5px);line-height:1.6;text-wrap:pretty}
/* don't shrink the header drawing just to squeeze the button above a short window: never narrower than ~72% of the width */
.hero--fit .hero-media{width:min(100%, var(--max,1280px), max(calc((100svh - var(--chrome,300px)) * var(--arn,2.175)), 72vw))}
@media (max-width:600px){.hero--fit .hero-media{width:100%}}
/* first feature starts right under the divider, level with the top of the sidebar list */
@media (min-width:900px){.features-sep{margin-bottom:18px}}
@media (min-width:900px){.features-sep{margin-bottom:52px}}
/* divider a bit more visible on low-contrast monitors */
.features-sep::before{background:linear-gradient(90deg,rgba(47,43,38,0),rgba(47,43,38,.16) 35%)}
.features-sep::after{background:linear-gradient(90deg,rgba(47,43,38,.16) 65%,rgba(47,43,38,0))}
@media (min-width:900px){.features-sep::before{background:linear-gradient(90deg,rgba(47,43,38,0),rgba(47,43,38,.16) 18%,rgba(47,43,38,.16) 82%,rgba(47,43,38,0))}.features-sep::after{display:none}}
/* wide screens: same visible weight as the labelled divider on smaller screens (solid hairline, soft ends) */
@media (min-width:900px){.features-sep{height:auto;padding:5px 0}.features-sep::before{height:1px;background:linear-gradient(90deg,rgba(47,43,38,0),rgba(47,43,38,.19) 10%,rgba(47,43,38,.19) 90%,rgba(47,43,38,0))}}
/* corner guy: on hover he pops straight up with a little bounce instead of tilting */
.corner-guy:hover>span,.corner-guy:focus-visible>span{transform:translateY(0);animation:guy-hop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes guy-hop{0%{transform:translateY(30px)}60%{transform:translateY(-5px)}100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.corner-guy:hover>span{animation:none}}
/* divider spans the whole features area (sidebar + content) */
.features-sep{max-width:1240px}
@media (max-width:899px){.features-sep{margin-left:auto;margin-right:auto;max-width:880px}}
@media (min-width:900px){
  .features-sep{grid-column:1 / -1;grid-row:1;max-width:none;width:100%;margin:0 0 52px}
  .feat-nav,.feat-nav.tall{grid-row:2}
  .features-inner{grid-row:2}
}
/* Craft Guy hides behind "Start a project" and pops up over its top edge on hover */
.cta-wrap{position:relative;display:inline-block}
.cta-wrap .cta{position:relative;z-index:1}
.cta-peek{position:absolute;left:50%;bottom:calc(100% - 6px);width:52px;height:56px;margin-left:-26px;overflow:hidden;pointer-events:none;color:#5a534a}
.cta-peek-guy{display:block;width:46px;height:48px;margin:0 auto;transform:translateY(56px);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.cta-peek-guy svg{width:100%;height:100%;display:block}
.cta-wrap.out .cta-peek-guy{transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){.cta-peek-guy{transition:none}}
/* pop out sideways from behind the right end of the button instead (clear of the subheading) */
.cta-peek{left:auto;right:-6px;bottom:50%;margin:0 0 -22px;width:44px;height:44px;overflow:visible;z-index:0}
.cta-peek-guy{width:40px;height:42px;transform:translateX(-46px) rotate(0deg);opacity:0;transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.cta-wrap.out .cta-peek-guy{transform:translateX(30px);opacity:1}
/* sidebar "Start a project": same slide-out; the outline button gets a paper fill so he stays hidden behind it */
.feat-nav .nav-cta-wrap{display:inline-block;margin:22px 0 4px}
.feat-nav .nav-cta-wrap .nav-cta{margin:0;position:relative;z-index:1;background:var(--paper,#F5F2EC)}
.feat-nav .nav-cta-wrap .nav-cta:hover{background:#ece8e0}
.feat-nav .nav-cta-wrap .cta-peek{width:36px;height:36px;right:-4px;margin-bottom:-18px}
.feat-nav .nav-cta-wrap .cta-peek-guy{width:30px;height:32px;transform:translateX(-36px);}
.feat-nav .nav-cta-wrap.out .cta-peek-guy{transform:translateX(24px)}
/* feature headings a touch softer: lighter warm grey and a slightly lighter weight */
.feat-full .feat-title{color:#6e665b;font-weight:500}
.feat-full .feat-title{font-weight:600;color:#6e665b}
/* he faces right, so he now slides out from the LEFT end and looks at the button */
.cta-peek{right:auto;left:-6px}
.cta-peek-guy{transform:translateX(46px);opacity:0}
.cta-wrap.out .cta-peek-guy{transform:translateX(-34px);opacity:1}
.feat-nav .nav-cta-wrap .cta-peek{right:auto;left:-4px}
.feat-nav .nav-cta-wrap .cta-peek-guy{transform:translateX(36px)}
.feat-nav .nav-cta-wrap.out .cta-peek-guy{transform:translateX(-26px)}
/* give the sidebar a little room on its left so Craft Guy isn't clipped when he slides out (layout unchanged) */
@media (min-width:900px){.feat-nav,.feat-nav.tall{padding-left:40px;margin-left:-40px}}
/* Craft Guy beside "LET'S BUILD": hidden until "Start a project" is hovered; absolutely placed so the heading never shifts */
.hero-copy h1.h1-guy{position:relative;display:inline-block;gap:0}
.h1-guy .title-guy{position:absolute;right:100%;top:50%;width:1.05em;height:1.1em;margin:calc(-.55em - .04em) .35em 0 0;color:#5a534a;opacity:0;transform:translateY(.35em) scale(.85);transition:opacity .25s,transform .45s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.h1-guy.guy-in .title-guy{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.h1-guy .title-guy{transition:opacity .2s}}
/* sidebar "Start a project": Craft Guy lives inside the outline button, in the ink colour */
.feat-nav .nav-cta--guy{display:inline-flex;align-items:center;gap:8px;margin:22px 0 4px;padding:6px 16px 6px 10px;background:transparent}
.feat-nav .nav-cta--guy .nav-cta-guy{display:block;width:22px;height:23px;color:#2f2b26}
.feat-nav .nav-cta--guy .nav-cta-guy svg{width:100%;height:100%;display:block;overflow:visible}
/* "Start a project" hover: lifts a touch, warms up, soft shadow, and a small arrow slides in */
.hero-copy .cta{position:relative;display:inline-flex;align-items:center;gap:0;transition:background .25s,transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s,gap .25s,padding .25s}
.hero-copy .cta::after{content:"→";display:inline-block;width:0;opacity:0;overflow:hidden;transform:translateX(-6px);transition:width .25s,opacity .2s,transform .25s}
.hero-copy .cta:hover,.hero-copy .cta:focus-visible{background:#4a4136;transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(47,43,38,.55);gap:8px}
.hero-copy .cta:hover::after,.hero-copy .cta:focus-visible::after{width:1em;opacity:1;transform:none}
.hero-copy .cta:active{transform:translateY(0);box-shadow:0 3px 8px -4px rgba(47,43,38,.5)}
.hero-copy .cta:focus-visible{outline:2px solid #2f2b26;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hero-copy .cta,.hero-copy .cta::after{transition:none}.hero-copy .cta:hover{transform:none}}
/* bigger sidebar button with a bigger Craft Guy */
.feat-nav .nav-cta--guy{gap:10px;padding:8px 20px 8px 12px;font-size:14px}
.feat-nav .nav-cta--guy .nav-cta-guy{width:30px;height:31px}

/* display font options for "Let's Build" (?h=<key>) */
html[data-h="fraunces"] .hero-copy h1{font-family:"Fraunces",Georgia,serif;font-weight:600;text-transform:none;letter-spacing:.01em;font-size:clamp(36px,4.6vw,60px);line-height:1.05}
html[data-h="young"] .hero-copy h1{font-family:"Young Serif",Georgia,serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(34px,4.4vw,56px);line-height:1.05}
html[data-h="dmserif"] .hero-copy h1{font-family:"DM Serif Display",Georgia,serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(36px,4.6vw,60px);line-height:1.05}
html[data-h="instrument"] .hero-copy h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(42px,5.4vw,70px);line-height:1.05}
html[data-h="caprasimo"] .hero-copy h1{font-family:"Caprasimo",Georgia,serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(34px,4.4vw,56px);line-height:1.05}
html[data-h="bricolage"] .hero-copy h1{font-family:"Bricolage Grotesque",Georgia,serif;font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:clamp(36px,4.6vw,60px);line-height:1.05}
html[data-h="bigshoulders"] .hero-copy h1{font-family:"Big Shoulders Display",Georgia,serif;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(40px,5.2vw,68px);line-height:1.05}
html[data-h="bebas"] .hero-copy h1{font-family:"Bebas Neue",Georgia,serif;font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(44px,5.6vw,74px);line-height:1.05}
html[data-h="unbounded"] .hero-copy h1{font-family:"Unbounded",Georgia,serif;font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(28px,3.6vw,46px);line-height:1.05}
html[data-h="syne"] .hero-copy h1{font-family:"Syne",Georgia,serif;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(32px,4.2vw,54px);line-height:1.05}
html[data-h="spacegrotesk"] .hero-copy h1{font-family:"Space Grotesk",Georgia,serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(30px,3.8vw,50px);line-height:1.05}
html[data-h="archivoblack"] .hero-copy h1{font-family:"Archivo Black",Georgia,serif;font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(30px,3.8vw,50px);line-height:1.05}
/* more breathing room between the header video and "Let's Build" */
.hero-media + .hero-copy{padding-top:clamp(36px,4.5vw,68px)}
html[data-h="syne"] .h1-guy .title-guy{width:1.05em;height:1.1em}

/* feature heading font options (?fh=<key>) */
html[data-fh="syne"] .feat-full .feat-title{font-family:"Syne",sans-serif;font-weight:600;letter-spacing:-.005em}
html[data-fh="bricolage"] .feat-full .feat-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;letter-spacing:-.01em}
html[data-fh="spacegrotesk"] .feat-full .feat-title{font-family:"Space Grotesk",sans-serif;font-weight:500;letter-spacing:-.01em}
html[data-fh="manrope"] .feat-full .feat-title{font-family:"Manrope",sans-serif;font-weight:600;letter-spacing:-.01em}
html[data-fh="dmsans"] .feat-full .feat-title{font-family:"DM Sans",sans-serif;font-weight:600;letter-spacing:-.01em}
html[data-fh="outfit"] .feat-full .feat-title{font-family:"Outfit",sans-serif;font-weight:500;letter-spacing:0}
html[data-fh="jakarta"] .feat-full .feat-title{font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;letter-spacing:-.01em}
html[data-fh="worksans"] .feat-full .feat-title{font-family:"Work Sans",sans-serif;font-weight:500;letter-spacing:0}
html[data-fh="fraunces"] .feat-full .feat-title{font-family:"Fraunces",Georgia,serif;font-weight:500;letter-spacing:0}
/* Syne is wide: let feature headings wrap cleanly and give descenders room */
html[data-fh="syne"] .feat-full .feat-title{line-height:1.28;overflow-wrap:break-word;text-wrap:balance;padding:0 .1em .06em;font-size:clamp(21px,2vw,28px)}
/* phones/tablets: jumps land below the sticky "Jump to a feature" bar so headings aren't hidden under it */
@media (max-width:899px){html{scroll-padding-top:72px}.feat-full{scroll-margin-top:72px}}
/* clear disclosure triangle on the LEFT of "More Features", rotates down when open */
.feat-nav button.nav-h.nav-more{gap:7px}
.feat-nav .chev{display:inline-flex;width:10px;height:10px;font-size:0;color:#5a534a;transition:transform .2s}
.feat-nav .chev svg{display:block}
.feat-nav .nav-more.open .chev{transform:rotate(90deg)}

/* more feature-heading options (?fh=<key>) */
html[data-fh="sora"] .feat-full .feat-title{font-family:"Sora",sans-serif;font-weight:600;letter-spacing:-.01em;font-stretch:normal;line-height:1.25;padding:0;font-size:clamp(20px,1.9vw,27px)}
html[data-fh="unbounded"] .feat-full .feat-title{font-family:"Unbounded",sans-serif;font-weight:500;letter-spacing:0;font-stretch:normal;line-height:1.25;padding:0;font-size:clamp(20px,1.9vw,27px)}
html[data-fh="archivoexp"] .feat-full .feat-title{font-family:"Archivo Expanded",sans-serif;font-weight:600;letter-spacing:0;font-stretch:125%;line-height:1.25;padding:0;font-size:clamp(20px,1.9vw,27px)}
html[data-fh="epilogue"] .feat-full .feat-title{font-family:"Epilogue",sans-serif;font-weight:600;letter-spacing:-.01em;font-stretch:normal;line-height:1.25;padding:0;font-size:clamp(20px,1.9vw,27px)}
html[data-fh="lexend"] .feat-full .feat-title{font-family:"Lexend",sans-serif;font-weight:500;letter-spacing:-.005em;font-stretch:normal;line-height:1.25;padding:0;font-size:clamp(20px,1.9vw,27px)}
html[data-fh="lexendexa"] .feat-full .feat-title{font-family:"Lexend Exa",sans-serif;font-weight:500;letter-spacing:-.01em;font-stretch:normal;line-height:1.25;padding:0;font-size:clamp(20px,1.9vw,27px)}
html[data-fh="familjen"] .feat-full .feat-title{font-family:"Familjen Grotesk",sans-serif;font-weight:600;letter-spacing:0;font-stretch:normal;line-height:1.25;padding:0;font-size:clamp(20px,1.9vw,27px)}
html[data-fh="redhat"] .feat-full .feat-title{font-family:"Red Hat Display",sans-serif;font-weight:600;letter-spacing:-.01em;font-stretch:normal;line-height:1.25;padding:0;font-size:clamp(20px,1.9vw,27px)}
html[data-fh="krona"] .feat-full .feat-title{font-family:"Krona One",sans-serif;font-weight:400;letter-spacing:-.01em;font-stretch:normal;line-height:1.25;padding:0;font-size:clamp(20px,1.9vw,27px)}
/* More Features toggle: bigger, darker triangle, centred on the caps; no box after a mouse click */
.feat-nav button.nav-h.nav-more{display:flex;align-items:center;gap:8px;line-height:1;color:#6b6359}
.feat-nav .chev{width:12px;height:12px;color:#2f2b26;flex:none}
.feat-nav .chev svg{width:12px;height:12px}
.feat-nav button.nav-h.nav-more:focus:not(:focus-visible){outline:none;box-shadow:none}
.feat-nav button.nav-h.nav-more:hover{color:#2f2b26}
/* Archivo Expanded headings, a touch lighter */
html[data-fh="archivoexp"] .feat-full .feat-title{font-weight:500}
html[data-fh="archivoexp"] .feat-full .feat-title{font-weight:400}
html[data-fh="archivoexp"] .feat-full .feat-title{color:#857c70}
/* phones/tablets: jump menu sits close under the divider, with clear space before the first feature heading */
@media (max-width:899px){.features-sep{margin-bottom:18px}.feat-jump{margin-bottom:44px}}
/* footer (placeholder content from work/footer.json) */
.site-footer{margin-top:clamp(80px,10vw,160px);border-top:1px solid rgba(47,43,38,.18);color:#6b645a;font:14px/1.55 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif}
.ft-inner{max-width:1240px;margin:0 auto;padding:clamp(40px,5vw,64px) 20px 28px;display:grid;grid-template-columns:minmax(220px,1.2fr) 1fr 2.4fr;gap:clamp(28px,4vw,64px)}
.ft-logo{display:inline-block;color:#6b6359;mix-blend-mode:multiply}.ft-logo-svg{height:18px;width:auto;display:block}
.ft-man{margin:14px 0 12px;max-width:34ch;color:#857c70}
.ft-hello{color:#2f2b26;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(47,43,38,.35)}.ft-hello:hover{border-color:#2f2b26}
.ft-h{margin:0 0 12px;font:500 11px/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8f877b}.ft-h a{color:inherit;text-decoration:none}.ft-h a:hover{color:#2f2b26}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin:0 0 8px}
.site-footer li a,.ft-legal a,.ft-social a,.ft-copy a{color:#6b645a;text-decoration:none}.site-footer li a:hover,.ft-legal a:hover,.ft-social a:hover,.ft-copy a:hover{color:#2f2b26;text-decoration:underline;text-underline-offset:3px}
.ft-col--wide ul{columns:2;column-gap:32px}.ft-col--wide li{break-inside:avoid;font-size:13px}
.ft-bottom{max-width:1240px;margin:0 auto;padding:18px 20px 40px;border-top:1px solid rgba(47,43,38,.1);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:12.5px;color:#8f877b}
.ft-legal,.ft-social{display:flex;flex-wrap:wrap;gap:6px 18px}
@media (max-width:900px){.ft-inner{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}.ft-col--wide{grid-column:1/-1}}
@media (max-width:560px){.ft-inner{grid-template-columns:1fr}.ft-col--wide ul{columns:1}.ft-bottom{flex-direction:column}}
/* footer sign-off: Craft Guy beside the copyright */
.ft-copy{display:inline-flex;align-items:center;gap:10px}
.ft-guy{display:block;width:26px;height:27px;color:#6b6359}
.ft-guy svg{width:100%;height:100%;display:block;overflow:visible}
.ft-bottom{align-items:center}
/* Crafti Pro pricing (static preview; see work/pricing.json) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pricing{padding:clamp(80px,10vw,150px) 20px 0;scroll-margin-top:24px}
.pro-card{max-width:520px;margin:0 auto;padding:clamp(28px,4vw,40px) clamp(22px,4vw,40px);border:1px solid rgba(47,43,38,.16);border-radius:18px;background:#f9f7f2;box-shadow:0 18px 50px -30px rgba(47,43,38,.35);color:#4f4940;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;display:flex;flex-direction:column;gap:24px}
.pro-title{margin:0;display:flex;justify-content:center;color:#2f2b26}
.pro-logo{display:block;width:min(260px,80%);height:auto}
.pro-desc{margin:0;text-align:center;color:#6b645a}
.pro-benefits{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pro-benefits li{display:flex;align-items:flex-start;gap:10px;overflow-wrap:anywhere}
.pro-check{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#ece7dd;color:#2f2b26;margin-top:1px}
.pro-plans{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pro-plan{position:relative;display:flex;gap:10px;align-items:flex-start;padding:16px 14px;border:1px solid rgba(47,43,38,.2);border-radius:12px;background:#f5f2ec;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s}
.pro-plan:hover{border-color:rgba(47,43,38,.45)}
.pro-plan input{appearance:none;flex:none;width:16px;height:16px;margin:3px 0 0;border:1.5px solid #a39b8e;border-radius:50%;background:#fff;display:grid;place-content:center}
.pro-plan input::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .12s}
.pro-plan input:checked{border-color:#2f2b26;background:#2f2b26}.pro-plan input:checked::before{transform:scale(1)}
.pro-plan input:focus-visible{outline:2px solid #2f2b26;outline-offset:2px}
.pro-plan:has(input:checked){border-color:#2f2b26;background:#fff;box-shadow:0 0 0 1px #2f2b26}
.pro-plan-label{display:block;color:#6b645a;font-size:12px;margin-bottom:4px}
.pro-plan-price{display:block;font-size:18px;font-weight:600;line-height:1.3;color:#2f2b26}
.pro-badge{display:inline-block;margin-top:8px;padding:3px 7px;border-radius:5px;background:#edf2ed;color:#42604b;font-size:11px;font-weight:500;line-height:1.4}
.pro-saving{display:block;margin-top:8px;color:#526357;font-size:12px;font-weight:500}
.pro-subscribe{height:48px;border:0;border-radius:999px;background:#2f2b26;color:#fff;font:600 15px/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;cursor:pointer;transition:background .25s,transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.pro-subscribe:hover{background:#4a4136;transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(47,43,38,.55)}
.pro-subscribe:focus-visible{outline:2px solid #2f2b26;outline-offset:3px}
.pro-note{margin:-12px 0 0;text-align:center;font-size:12.5px;color:#8f877b}
@media (max-width:380px){.pro-plans{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pro-subscribe{transition:none}.pro-subscribe:hover{transform:none}}
.pro-badge{white-space:nowrap}@media (max-width:440px){.pro-plan{padding:14px 10px;gap:8px}}
.pricing-page .pricing{padding-top:clamp(40px,6vw,88px)}
@media (max-width:600px){.nav ul{display:flex;gap:14px;font-size:14px}.nav{gap:12px}}
/* pricing as a modal */
.pricing-modal{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.pricing-modal::backdrop{background:rgba(47,43,38,.38);backdrop-filter:blur(4px)}
.pricing-modal .pricing{padding:0}
.pricing-modal .pro-card{max-width:none;margin:0;box-shadow:0 24px 80px rgba(47,43,38,.28);position:relative}
.pm-close{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#8f877b;font:400 24px/1 -apple-system,sans-serif;cursor:pointer}
.pm-close:hover{background:#ece7dd;color:#2f2b26}.pm-close:focus-visible{outline:2px solid #2f2b26;outline-offset:2px}
.pricing-modal[open]{animation:pm-in .22s ease-out}@keyframes pm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pricing-modal[open]{animation:none}}
/* top nav links in the display font (Syne caps) */
.nav ul a{font:700 13px/1 "Syne",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#5a534a}
.nav ul a:hover{color:#2f2b26}
.nav ul{gap:clamp(18px,2.2vw,32px)}
@media (max-width:600px){.nav ul a{font-size:11.5px;letter-spacing:.06em}.nav ul{gap:14px}}
/* medium widths (900–1199px): narrower sidebar and tighter gap so the content keeps room */
@media (min-width:900px) and (max-width:1199px){.features{grid-template-columns:180px minmax(0,1fr);column-gap:28px;padding-left:16px;padding-right:16px}.feat-nav{font-size:12.5px}}
/* brand-update banner (visitors redirected from craftyamigo.com); sits in the flow so it pushes the page down */
.brand-banner{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:11px 52px;background:#2f2b26;color:#f5f2ec;font:500 14px/1.4 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;text-align:center;transition:opacity .2s,margin .22s}
.brand-banner p{margin:0}.brand-banner strong{font-weight:700;color:#fff}.brand-banner .bb-old{text-decoration:line-through;text-decoration-thickness:1px;opacity:.75}
.bb-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#f5f2ec;font:400 22px/1 -apple-system,sans-serif;cursor:pointer}
.bb-close:hover{background:rgba(255,255,255,.12)}.bb-close:focus-visible{outline:2px solid #f5f2ec;outline-offset:2px}
.brand-banner.bb-out{opacity:0}
.brand-banner .bb-more{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}.brand-banner .bb-more:hover{text-decoration-thickness:2px}.brand-banner .bb-more:focus-visible{outline:2px solid #f5f2ec;outline-offset:2px;border-radius:3px}
@media (max-width:600px){.brand-banner{font-size:13px;padding:10px 46px 10px 16px;text-align:left;justify-content:flex-start}}
/* Header uses the full available width (up to --max) instead of shrinking to fit short windows */
.hero--fit .hero-media{width:min(100%, var(--max,1280px))}

/* Tap-to-play when autoplay is refused (iOS Low Power Mode) or skipped (reduced motion / Save-Data) */
.tile-media.needs-tap{cursor:pointer}
.tile-media.needs-tap::after{content:"";position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(47,43,38,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23F5F2EC'/%3E%3C/svg%3E") 55% 50%/26px no-repeat;box-shadow:0 4px 14px rgba(47,43,38,.25);pointer-events:none;z-index:3}

/* feature sidebar: never show a scrollbar (the earlier thin value overrode none); it still scrolls, with the .scrolls bottom fade */
.feat-nav,.feat-nav.tall{scrollbar-width:none}

/* Subscribe is a link to the app's checkout */
a.pro-subscribe{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff}
a.pro-subscribe:hover{color:#fff}
.pro-manage{margin:-8px 0 0;text-align:center;font-size:13px;color:#8f877b}
.pro-manage a{color:#4d6352;text-decoration:underline;text-underline-offset:3px}

/* illustrated footer (homepage and the material landing pages): the moon scene under the links, its sky fading into the page */
.site-footer--art .ft-bottom{padding-bottom:12px}
.ft-art{position:relative;margin-top:clamp(-24px,-2vw,0px);overflow:hidden;pointer-events:none}
.ft-art img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(#0000 0,#000 32%);mask-image:linear-gradient(#0000 0,#000 32%)}
@media (max-width:700px){.ft-art img{width:auto;height:300px;max-width:none;margin-left:-8%}}
/* the copyright / legal row sits lower, on the illustration's faded sky (180px at 1440px wide) */
.site-footer--art .ft-bottom{position:relative;z-index:1;margin-top:clamp(48px,12.5vw,180px);margin-bottom:calc(-1 * clamp(48px,12.5vw,180px));border-top-color:rgba(47,43,38,.08)}

/* Header video side fade only when there is page beside it: while the video spans the full width its left and right
   edges stay sharp; on wider pages the fade grows with the side gap, up to 64px (measured on .hero, so scrollbars don't count) */
.hero{container-type:inline-size}
.hero .hero-media:not(.hero-media--nofade){
  --fxl:clamp(0px, calc((100cqw - min(100cqw, var(--max,1280px))) / 2), 64px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fxl),#000 calc(100% - var(--fxl)),transparent),
                     linear-gradient(180deg,transparent,#000 var(--ft,6%),#000 calc(100% - var(--fb,8%)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--fxl),#000 calc(100% - var(--fxl)),transparent),
                     linear-gradient(180deg,transparent,#000 var(--ft,6%),#000 calc(100% - var(--fb,8%)),transparent);
}
/* footer art as a box (still + looping video share the size, crop and sky fade) */
.ft-art{aspect-ratio:2560/1084;-webkit-mask-image:linear-gradient(#0000 0,#000 32%);mask-image:linear-gradient(#0000 0,#000 32%)}
.ft-art img,.ft-art>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 100%;-webkit-mask-image:none;mask-image:none;margin:0;max-width:none}
.ft-art>video{opacity:0;transition:opacity .4s}
.ft-art.is-playing>video{opacity:1}
@media (max-width:700px){.ft-art{aspect-ratio:auto;height:300px}}
@media (prefers-reduced-motion:reduce){.ft-art>video{display:none}}
/* Header videos fill the page up to 1920px wide (the 2560 renditions cover it); the side fade only starts beyond that */
.hero--A .hero-media{--max:1920px}
/* 900px and up (where the feature sidebar replaces "Jump to a feature"): the nav sits over the top of the header video (on its light sky), so the video starts at the top
   of the page and needs no top fade. Phones keep the nav above the video with the fade. */
@media (min-width:900px){
  .hero{position:relative}
  .hero > .nav{position:absolute;top:0;left:0;right:0;z-index:2}   /* side inset: nav-align.js */
  .hero .hero-media:not(.hero-media--nofade){--ft:0%}
}

/* pricing popup: Free | Pro tabs */
.pricing-modal:focus,.pricing-modal:focus-visible{outline:none}
.pm-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:min(300px,calc(100% - 64px));margin:0 auto;padding:4px;border-radius:999px;background:#ece7dd}
.pm-tabs button{border:0;border-radius:999px;padding:10px 0;background:transparent;font:600 14px/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;color:#6b645a;cursor:pointer;transition:background .15s,color .15s}
.pm-tabs button:hover{color:#2f2b26}
.pm-tabs button[aria-selected="true"]{background:#fff;color:#2f2b26;box-shadow:0 1px 3px rgba(47,43,38,.15)}
.pm-tabs button:focus-visible{outline:2px solid #2f2b26;outline-offset:2px}
.pm-tab-price{margin-left:4px;padding:2px 7px;border-radius:999px;background:#edf2ed;color:#42604b;font-size:12px;font-weight:600}
.pm-panel{display:flex;flex-direction:column;gap:24px}
.pm-panel[hidden]{display:none}
.pro-logo--free{width:min(200px,64%)}
.free-price{margin:0;text-align:center;font-size:34px;font-weight:600;line-height:1;color:#2f2b26}
.free-price span{display:block;margin-top:8px;font-size:13px;font-weight:400;color:#8f877b}
.pm-logo{display:block;width:min(190px,60%);height:auto;margin:0 auto -6px;color:#2f2b26}
/* the popup keeps its top edge when switching Free | Pro (the panels differ in height), so the logo and tabs stay put */
.pricing-modal[open]{margin-top:max(12px,calc((100dvh - 760px) / 2));margin-bottom:auto}
/* pricing popup Free tab: the free features in labelled sets, as compact chips */
.pm-groups{display:grid;gap:14px}
.pm-group{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:start}
.pm-group-title{margin:5px 0 0;font:600 10.5px/1.2 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8f877b}
.pm-group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pm-group li{padding:4px 10px;border-radius:999px;background:#ece7dd;color:#3f3a33;font-size:13px;line-height:1.35}
@media (max-width:480px){.pm-group{grid-template-columns:1fr;gap:6px}.pm-group-title{margin:0}}
/* free features as plain dot-separated text, not pills */
.pm-group ul{display:block;line-height:1.55}
.pm-group li{display:inline;padding:0;border-radius:0;background:none;color:#4f4940;font-size:14px}
.pm-group li:not(:last-child)::after{content:", "}
.pm-group-title{margin-top:4px}
/* hero tagline ⇄ prompt bubble (hero-prompt.js): both sit in one grid cell, so swapping never moves the button below */
.hero-line{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;width:100%;margin:6px auto 12px}
.hero-line>*{grid-area:1/1}
.hero-copy .hero-line p{margin:0;transition:opacity .45s,transform .45s}
.hero-line.hp-on p{opacity:0;transform:translateY(-6px)}
.hero-prompt{display:flex;align-items:center;width:min(500px,100%);box-sizing:border-box;padding:12px 22px;background:#fbf8f2;border:1px solid rgba(47,43,38,.16);border-radius:999px;box-shadow:0 8px 20px -14px rgba(47,43,38,.5),inset 0 1px 0 #fff;color:#4a4136;font-size:clamp(15px,1.3vw,17px);line-height:1.3;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transition:opacity .45s,transform .45s,visibility 0s .45s}
.hero-line.hp-on .hero-prompt{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s}
.hp-text{white-space:nowrap;overflow:hidden;min-width:0;min-height:1.3em}
.hp-caret{flex:none;width:1.5px;height:1.15em;margin-left:1px;background:#4a4136;animation:hp-blink 1s steps(1) infinite}
@keyframes hp-blink{50%{opacity:0}}
@media (max-width:600px){.hero-prompt{font-size:14px;padding:11px 18px}}