/* ===== 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:#2f2b26;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,.18))}
.features-sep::after{background:linear-gradient(90deg,rgba(47,43,38,.18),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,.32) 35%)}
.features-sep::after{background:linear-gradient(90deg,rgba(47,43,38,.32) 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,.32) 18%,rgba(47,43,38,.32) 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,.38) 10%,rgba(47,43,38,.38) 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{color:#6b645a;text-decoration:none}.site-footer li a:hover,.ft-legal a:hover,.ft-social 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}
@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}