.fk-ui{--fk-mark:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG8AAABRCAYAAADctfi9AAAACXBIWXMAAAPoAAAD6AG1e1JrAAAHwklEQVR4nO2dMW8cRRSA758gOSKVpRi5S2WaQEFHihROUqVIA4UVGqMguXSQoCByUKQrEYUhbiiCJYsEFDsBIUwkBzB2gg5kYhyb+GTvndfeh571xhovu3s7897M7N35SU9OVqd9M/Ptzrx5b2a2BgC1Cug4AHwJAE9J9wCgBQA79LdNitefAMAK/X6CafcaANwAgAcAcBcAGqQbALBGf5foGv5mAQA+AYDRCrRZLZThKQD4m4BISIugThXYPEUNPw8AqwAQaQ9FDACbdC2i/6evx5pGdB2hzgHA9V6HN0MVTsCtJADQpDcT7d4GgGcaDNXwEvDUPWKyuQgAk70Cb4iezgPHwIpApiG5ghdpukNd7EA3whuiccn1W1Yke1pj+oanfrcLALMA8Eo3wBsmhyMktJgaNKoAPFWO5wSxsvDqAaElWkO1KwhvU+tOxZwbqS4SnywIPK5FXQBPXf++CvDGAzojKPsFoKoMD6+vA8BIKHgPA3eTcQdQVYcX0fRizDe8nyGcqIaKewCe0roveFiQUG/bfqoh2j0Cr20D0BTc88Dgoh6G16ZokBN4i4HBtfsAXmQC0MQ5gcBzuH6BF5WNj5YBN+HZq8RKbAPAltYwPuAtUe8yS3HJOUoDfQEAywDw0iM89EKvcOENewAXU6ONa3ZHqAKbDuGtU6bjouG4/wGllf50CC+ih+UUBx7exIUklM+7kGN3Xau0JLwWvVlnTT27HB2lN9YFvI6RmKKCYT7MhaxQSC3P7oJWASl4EXWDrwpBS+s56j2k4eG190zhDTroLtsFb5reXcbC8Ja5YSjDN3FdGN62KTxcUiApj0tWfk0Y3rQnaFkRKCl47bx0UpZhHMClJDGIHIxlDP628HYrsEjoc0F4zayEbpbRbUFwugfZSRtC8JoWHqQrvah5zRx4EU1ZCuFdCATuao7bbQqvWSFwSkeF4D1Pr4lJG0L3XUJMwKH+KACvWYGuMk8/EoC3mR770kYSj86J0pGCaIUJvMkKQCrSeQF4W3nw7guAiywqNSsAb74CcMroSyY8/PthFjxcHMMRfGsvW1Roiwlv1/X6SEG9IgBvKQ0PIx5caVhU5mKqYDbw6hWAYqIrTHhHvZtUKOyAgtimFZljwtuuAAybUBoH3lHITI9scOSJZUXWmPDqFYBho0tMeHM6PPwhRwYtK9FmwGt5aOQ6BZyxq/vKckwvGi5s4a0peNjwHGlaVuA6E97vDqEVLdnfs5jHFqW9bOC1FTycQHLknmXhv2bCu+kA2pBBL3SXaWuWCe8s3uQRE15Rbq5IHzPh1Ryo6fCh9gDa6BgT3iW8ya9ML9O28BsMeA0H4GxWx2HXepphkwPvY24WoRkI3rwDeLZ7Lr5h2Gxw4WGEwlZWmF2ULbxZYXDvM9rgWLzRUJcZ8H7oVnhjwvBuMdpgR8BpCQKv6PSFfoGHcgLvBB6cvHlw8ub11Zj3LfThmBcK3rSDcFgIeIsh4XHmedsVmir8GwgeZ553R93AVuJAk/TbwvBw/5+tcALkTe4knRMeCxXbHBWGx5GfLG2OMsNj74bMKpyzhLcqDG6GWf9PLe1OM+G9hTc5zyz8pkBG2QTe1QqNdyhvMkNjtvCOMukHgTLpA5SULAtP2lEZZq5VTSztvp4CZQrvhQ4PB06OcBKTAyVWTOO/7wiDqwnstbf1tueY8A6X/6mb4bjFkX2BhhyjQu1qFVil7VKu9tclzHovWtg8naqjDbwbOjyJDSYPHTWwK70nUOdOm0Xzdv62mfAOFxlLzXWAnmKbtZshdFBgnD90Ggz1jRxQJvCeqftJnye2UQEwtRL6h0BdH1nY/UtgufvRWlX9xmdARmYqAKdWoJiDlJDzhnZvC+wSaurHe0jPeWw2VvrU14S2sZnObd+mhufCO+YgSWeUlcSMsJkrPSMwrtusIBihXa2RALxjXneWMVwR3GsAhwXB7TGCEBx436Xvn2UQB0QpwQJc6gHPUpe6wV48NZ+TgPe/U5vyDEuMfUoS6o5DgBsXfONMUmA3czxFW3iZwYA84+cdnID01DO4FZCXyyW6yay95xx4uTt/fVf+gLm+v4zecnRSYaPEVGArBxIHXm5Mt1NDuDp2v0UHGEhC+4zu60KKust6RqxSCt7hPjxbeK4PSj2gAtrOCyfo7BjX33ZIl2+SvL9mRiZECl6Le96mzyOK1XHET8nmFGX5p6grvEXXn1DFEk/l+o2y3g8o/KdA5eUgpeB1/GxN2Sf8H+hPSTIa3ge8UksbTbooLEC/SRwAXukcoekYgwb6ReIA8IySuzbRCjTey5Jo33HwCe/oZCNX8GoUr5SMwFQNXEtrYF/wjMHZwpNatFQ1STImyD7gWW/R5sBT60BCfmLUhVfpC16Tu2yfC69GE9hudmT2U5B8wHshsWRfAp5SzoaV0B9QjD3CW5Bqc0l4KlzV7gJoOykX3Qe8Bq0eq1UVntIph0FiCadk0yO8hoP9FU7h6RCjCgBLUo3sA95G0adkugGe0gsUcPb1ZeeEshXvpPZ9u4a3Ra6/aPcYGl7aO1VH9UrKDt03L710jRYWrwvDWyMnxPtnAULAy+pa1YGkqjGTDs5GixrtF8v1MfhpF9zYgguE8TNn2MXpp89mwcPfoOIDgFF/J+OYCbz/ANNbTQwgcO6oAAAAAElFTkSuQmCC)}
/* Florink product-screen kit. Every selector carries the fk- prefix.
   Sizes, weights, radii and colours below are the client portal's own (apps/web on origin/main): /* taste-skill-ignore: product screen */
   type scale from apps/web/tailwind.config.js, tokens from apps/web/styles/globals.css. */ /* taste-skill-ignore: product screen */
@font-face{font-family:"Pretendard Std";src:url("/assets/PretendardStdVariable.64a2b711.woff2") format("woff2");font-weight:45 920;font-display:swap} /* taste-skill-ignore: product screen */

/* ---------- scale box: fixed design size, fitted to the container width ---------- */
.fk-fit{--fk-w:1280;--fk-h:800;position:relative;display:block;width:100%;aspect-ratio:var(--fk-w)/var(--fk-h);overflow:hidden;container-type:inline-size;background:#f7f9fb} /* taste-skill-ignore: product screen */
.fk-stage{position:absolute;left:0;top:0;width:calc(var(--fk-w)*1px);height:calc(var(--fk-h)*1px);overflow:hidden;transform-origin:0 0;transform:scale(var(--fk-s,tan(atan2(100cqw,calc(var(--fk-w)*1px)))))} /* taste-skill-ignore: product screen */

/* ---------- crop: --x --y are design px of the top-left corner, --zoom is screen px per design px, --h is the design height shown ---------- */
.fk-crop{--x:0;--y:0;--zoom:1;--h:400;position:relative;display:block;width:100%;height:calc(var(--h)*var(--zoom)*1px);overflow:hidden} /* taste-skill-ignore: product screen */
.fk-crop>.fk-fit{position:absolute;left:calc(var(--x)*var(--zoom)*-1px);top:calc(var(--y)*var(--zoom)*-1px);width:calc(var(--fk-w)*var(--zoom)*1px);max-width:none} /* taste-skill-ignore: product screen */
/* top-left of the dashboard page at phone width: the smallest text, 11px, lands at 13px */
.fk-crop-dash-page{--x:276;--y:82;--zoom:1.19;--h:376} /* taste-skill-ignore: product screen */
/* .fk-crop-fit: same idea, but --view design px fill the container width at any size */
.fk-crop-fit{--view:640;height:auto;aspect-ratio:var(--view)/var(--h)} /* taste-skill-ignore: product screen */
.fk-crop-fit>.fk-fit{left:calc(-100%*var(--x)/var(--view));top:0;margin-top:calc(-100%*var(--y)/var(--view));width:calc(100%*var(--fk-w)/var(--view))} /* taste-skill-ignore: product screen */
/* just the review dialog, out of the 1280 desktop-confirm */
.fk-crop-confirm{--x:176;--y:31;--view:928;--h:738} /* taste-skill-ignore: product screen */

/* ---------- laptop: screen 1280, lid 1312, base 1400 design units ---------- */
.fk-laptop{--u:calc(100cqw/1400);position:relative;display:block;width:100%;container-type:inline-size;isolation:isolate;padding:0} /* taste-skill-ignore: product screen */
.fk-laptop>.fk-fit,.fk-laptop>.fk-crop{width:calc(1280*var(--u));margin:calc(17*var(--u)) auto calc(32*var(--u));border-radius:calc(9*var(--u)) calc(9*var(--u)) calc(2*var(--u)) calc(2*var(--u));overflow:hidden;box-shadow:0 0 0 calc(1*var(--u)) #000} /* taste-skill-ignore: product screen */
.fk-laptop::before{content:"";position:absolute;z-index:-1;top:0;left:calc(44*var(--u));right:calc(44*var(--u));bottom:calc(14*var(--u));border-radius:calc(26*var(--u)) calc(26*var(--u)) calc(4*var(--u)) calc(4*var(--u)); /* taste-skill-ignore: product screen */
 background:linear-gradient(180deg,#141517 0%,#0c0d0e 100%); /* taste-skill-ignore: product screen */
 box-shadow:inset 0 0 0 calc(1.4*var(--u)) #4d4f54,inset 0 calc(1.4*var(--u)) 0 calc(.6*var(--u)) rgba(255,255,255,.26),inset 0 0 0 calc(2.6*var(--u)) #08080a,0 calc(26*var(--u)) calc(60*var(--u)) calc(-30*var(--u)) rgba(10,14,20,.36)} /* taste-skill-ignore: product screen */
.fk-laptop::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:calc(15*var(--u));border-radius:calc(2*var(--u)) calc(2*var(--u)) calc(16*var(--u)) calc(16*var(--u))/calc(2*var(--u)) calc(2*var(--u)) calc(13*var(--u)) calc(13*var(--u)); /* taste-skill-ignore: product screen */
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 8'%3E%3Cdefs%3E%3ClinearGradient id='a' x2='0' y2='1'%3E%3Cstop stop-color='%230e0f11'/%3E%3Cstop offset='1' stop-color='%23303136'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 0h170c-6 0-6 8-14 8H14C6 8 6 0 0 0z'/%3E%3C/svg%3E") top center/calc(170*var(--u)) calc(8*var(--u)) no-repeat,linear-gradient(180deg,#6d6f75 0,#4b4d52 12%,#303135 46%,#1d1e21 78%,#0f1012 100%); /* taste-skill-ignore: product screen */
 box-shadow:inset 0 calc(.8*var(--u)) 0 rgba(255,255,255,.42),inset calc(1*var(--u)) 0 calc(1*var(--u)) rgba(255,255,255,.12),inset calc(-1*var(--u)) 0 calc(1*var(--u)) rgba(255,255,255,.12),0 calc(1*var(--u)) calc(2*var(--u)) rgba(8,12,18,.4),0 calc(14*var(--u)) calc(26*var(--u)) calc(-10*var(--u)) rgba(8,12,18,.42),0 calc(44*var(--u)) calc(80*var(--u)) calc(-34*var(--u)) rgba(8,12,18,.46)} /* taste-skill-ignore: product screen */

/* ---------- phone: screen 390, bezel 10, titanium 3, buttons stand 4 proud: 424 design units ---------- */
.fk-phone{--u:calc(100cqw/424);position:relative;display:block;width:100%;container-type:inline-size;isolation:isolate} /* taste-skill-ignore: product screen */
.fk-phone>.fk-fit,.fk-phone>.fk-crop{width:calc(390*var(--u));margin:calc(13*var(--u)) auto;border-radius:calc(49*var(--u));overflow:hidden} /* taste-skill-ignore: product screen */
.fk-phone::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(4*var(--u));right:calc(4*var(--u));border-radius:calc(62*var(--u));border:calc(3*var(--u)) solid transparent; /* taste-skill-ignore: product screen */
 background:linear-gradient(#060607,#060607) padding-box,linear-gradient(118deg,#6e7075 0%,#b7b8bc 9%,#7a7c81 21%,#54565b 37%,#8f9196 50%,#55575c 64%,#7d7f84 78%,#c4c5c8 91%,#74767b 100%) border-box; /* taste-skill-ignore: product screen */
 box-shadow:inset 0 0 0 calc(.5*var(--u)) rgba(255,255,255,.2),0 0 0 calc(.5*var(--u)) rgba(0,0,0,.5),0 calc(2*var(--u)) calc(4*var(--u)) rgba(8,12,18,.24),0 calc(14*var(--u)) calc(28*var(--u)) calc(-8*var(--u)) rgba(8,12,18,.32),0 calc(46*var(--u)) calc(90*var(--u)) calc(-26*var(--u)) rgba(8,12,18,.44)} /* taste-skill-ignore: product screen */
.fk-phone::after{content:"";position:absolute;z-index:-2;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 424 870' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='l' x2='1' y2='0'%3E%3Cstop stop-color='%236b6d72'/%3E%3Cstop offset='.5' stop-color='%23b0b2b6'/%3E%3Cstop offset='1' stop-color='%23606267'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x2='1' y2='0'%3E%3Cstop stop-color='%23606267'/%3E%3Cstop offset='.5' stop-color='%23b0b2b6'/%3E%3Cstop offset='1' stop-color='%236b6d72'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23l)'%3E%3Crect x='1' y='152' width='6' height='30' rx='1.6'/%3E%3Crect x='1' y='212' width='6' height='58' rx='1.6'/%3E%3Crect x='1' y='284' width='6' height='58' rx='1.6'/%3E%3C/g%3E%3Crect fill='url(%23r)' x='417' y='236' width='6' height='92' rx='1.6'/%3E%3C/svg%3E") center/100% 100% no-repeat} /* taste-skill-ignore: product screen */
.fk-phone .fk-stage::before{content:"9:41";position:absolute;z-index:6;left:0;right:0;top:0;height:47px;padding:15px 0 0 50px;font:600 16px/20px "Pretendard Std",-apple-system,system-ui,sans-serif;letter-spacing:-.01em;color:#0b1220;font-variant-numeric:tabular-nums; /* taste-skill-ignore: product screen */
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='12' viewBox='0 0 68 12' fill='%230b1220'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.6' y='5.6' width='3' height='6.4' rx='.8'/%3E%3Crect x='9.2' y='3' width='3' height='9' rx='.8'/%3E%3Crect x='13.8' y='.4' width='3' height='11.6' rx='.8'/%3E%3Cpath d='M29.5 2.1c2.3 0 4.4.9 6 2.4l1-1.1A10.1 10.1 0 0 0 29.5.5c-2.7 0-5.2 1-7 2.9l1 1.1c1.6-1.5 3.7-2.4 6-2.4zm0 3.6c1.3 0 2.5.5 3.5 1.4l1-1.1a6.6 6.6 0 0 0-9 0l1 1.1c1-.9 2.2-1.4 3.5-1.4zm0 3.5c-.8 0-1.5.3-2 .8l2 2.1 2-2.1c-.5-.5-1.2-.8-2-.8z'/%3E%3Crect x='42.5' y='.5' width='21' height='11' rx='3.2' fill='none' stroke='%230b1220' stroke-opacity='.4'/%3E%3Crect x='44' y='2' width='18' height='8' rx='2'/%3E%3Cpath d='M65 4v4c.8-.3 1.4-1.1 1.4-2S65.800 4.300 65 4z' fill-opacity='.45'/%3E%3C/svg%3E") right 26px top 19px/68px 12px no-repeat} /* taste-skill-ignore: product screen */
.fk-phone .fk-stage::after{content:"";position:absolute;z-index:6;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844'%3E%3Crect x='134' y='11' width='122' height='34' rx='17' fill='%23050506'/%3E%3Crect x='128' y='831' width='134' height='5' rx='2.5' fill='%230b1220'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat} /* taste-skill-ignore: product screen */

/* ---------- window: frameless rounded app window, hairline edge ---------- */
.fk-window{position:relative;display:block;width:100%;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.09),0 1px 2px rgba(15,23,42,.06),0 6px 14px -6px rgba(15,23,42,.1),0 24px 48px -20px rgba(15,23,42,.18),0 56px 96px -48px rgba(15,23,42,.22)} /* taste-skill-ignore: product screen */
.fk-window::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} /* taste-skill-ignore: product screen */

/* ---------- the portal: tokens, apple-blue skin, light mode ---------- */
.fk-ui{--background:210 20% 98%;--foreground:222 47% 11%;--muted:210 20% 96%;--muted-foreground:215 16% 47%;--border:214 20% 88%;--input:214 20% 88%;--card:0 0% 100%;--primary:221 83% 53%;--primary-foreground:0 0% 100%;--destructive:0 72% 51%;--success:160 84% 39%;--warning:38 92% 50%;--info:199 89% 48%;--chart-1:221 83% 53%;--chart-3:173 58% 39%;--chart-4:262 83% 58%;--chart-5:215 20% 65%;--title-ink:222 47% 20%;--module-amber:32.97 52% 36%;--radius:10px; /* taste-skill-ignore: product screen */
 font-family:"Pretendard Std",-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI",sans-serif;font-size:16px;line-height:1.6;font-weight:400;letter-spacing:-.01em;text-align:left;color:hsl(var(--foreground));font-feature-settings:"cv05","cv08";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;white-space:normal} /* taste-skill-ignore: product screen */
/* The portal's own default skin since 2026-09: warm-indigo. Add fk-skin-indigo on any ancestor. */
.fk-skin-indigo .fk-ui{--background:45 20% 96.08%;--foreground:240 15.56% 17.65%;--muted:48 13.51% 92.75%;--muted-foreground:240 5.02% 42.94%;--border:42.86 11.11% 87.65%;--input:37.5 7.14% 78.04%;--primary:242.17 33.33% 48.82%;--destructive:356.56 50.83% 47.06%;--success:152.96 49.65% 28.04%;--warning:36.5 76.92% 30.59%;--info:213.96 51.96% 40%;--chart-1:242.17 33.33% 48.82%;--chart-3:32.97 48.47% 44.9%;--chart-4:262.22 23.89% 55.69%;--chart-5:215.38 15.79% 48.43%;--title-ink:245 32% 26%;--radius:8px} /* taste-skill-ignore: product screen */
.fk-ui,.fk-ui *,.fk-ui *::before,.fk-ui *::after{box-sizing:border-box} /* taste-skill-ignore: product screen */
:where(.fk-ui) :where(div,span,svg,table,td,th,tr,tbody,thead){margin:0;padding:0;border:0} /* taste-skill-ignore: product screen */
:where(.fk-ui) :where(table){border-collapse:collapse;border-spacing:0} /* taste-skill-ignore: product screen */
:where(.fk-ui) :where(th){font-weight:500} /* taste-skill-ignore: product screen */
.fk-i{display:block;flex:none} /* taste-skill-ignore: product screen */
.fk-num{font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fk-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;border:1px solid hsl(var(--border));background:hsl(var(--muted));font-size:11px;line-height:1;font-weight:500;letter-spacing:0;color:hsl(var(--foreground)/.82);white-space:nowrap} /* taste-skill-ignore: product screen */

/* top bar */
.fk-port{position:absolute;inset:0;background:hsl(var(--background));overflow:hidden} /* taste-skill-ignore: product screen */
.fk-top{position:absolute;z-index:3;left:0;right:0;top:0;height:65px;display:flex;align-items:center;gap:12px;padding:0 16px;background:hsl(var(--card));border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fk-brand{display:flex;align-items:center;gap:8px;flex:none} /* taste-skill-ignore: product screen */
.fk-logo{display:block;width:32px;height:32px;border-radius:var(--radius);background:hsl(var(--primary)) var(--fk-mark) center/20px no-repeat} /* taste-skill-ignore: product screen */
.fk-word{font-size:18px;line-height:1.6;font-weight:700;letter-spacing:-.025em;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fk-top-mid{flex:1;display:flex;justify-content:center;min-width:0} /* taste-skill-ignore: product screen */
.fk-sw{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:448px;height:40px;padding:0 16px;border-radius:999px;background:hsl(var(--primary)/.1);border:1px solid hsl(var(--primary)/.2)} /* taste-skill-ignore: product screen */
.fk-sw-l{display:flex;align-items:center;gap:8px;min-width:0;flex:1} /* taste-skill-ignore: product screen */
.fk-sw-n{font-size:14px;line-height:1.5;font-weight:600;color:hsl(var(--foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* taste-skill-ignore: product screen */
.fk-top-r{display:flex;align-items:center;gap:8px;flex:none} /* taste-skill-ignore: product screen */
.fk-ghost{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--radius);font-size:14px;font-weight:500;line-height:1.5} /* taste-skill-ignore: product screen */
.fk-mode{display:flex;align-items:center;justify-content:center;width:36px;height:36px} /* taste-skill-ignore: product screen */
.fk-ava{display:flex;align-items:center;justify-content:center;width:44px;height:44px} /* taste-skill-ignore: product screen */
.fk-ava>span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:hsl(var(--muted));color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */

/* sidebar */
.fk-side{position:absolute;z-index:2;left:0;top:0;bottom:0;width:260px;display:flex;flex-direction:column;gap:4px;padding:76px 12px 16px;background:hsl(var(--muted));border-right:1px solid hsl(var(--border));overflow:hidden} /* taste-skill-ignore: product screen */
.fk-biz{margin:0 4px 8px;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);background:hsl(var(--muted)/.5)} /* taste-skill-ignore: product screen */
.fk-biz-i{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border-radius:calc(var(--radius) - 2px);background:hsl(var(--primary)/.1);color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fk-biz-t{min-width:0;flex:1} /* taste-skill-ignore: product screen */
.fk-biz-k{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px;font-size:11px;line-height:1;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:hsl(var(--foreground)/.85)} /* taste-skill-ignore: product screen */
.fk-biz-k .fk-tag{height:15px;padding:0 5px;font-size:9.5px;text-transform:none;letter-spacing:0;background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fk-biz-n{font-size:14px;line-height:1.25;font-weight:500;color:hsl(var(--foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* taste-skill-ignore: product screen */
.fk-nav{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px} /* taste-skill-ignore: product screen */
.fk-sec{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:0 10px;border-radius:calc(var(--radius) - 2px);font-size:14px;line-height:1.5;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:hsl(var(--foreground)/.85)} /* taste-skill-ignore: product screen */
.fk-sec .fk-i{color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-sec-up .fk-i{transform:rotate(180deg)} /* taste-skill-ignore: product screen */
.fk-sec+.fk-item{margin-top:4px} /* taste-skill-ignore: product screen */
.fk-sep{height:1px;background:hsl(var(--border));opacity:.3;margin:8px 0;flex:none} /* taste-skill-ignore: product screen */
.fk-item{position:relative;display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 10px;border-radius:calc(var(--radius) - 2px);font-size:14px;line-height:20px;color:hsl(var(--foreground)/.85)} /* taste-skill-ignore: product screen */
.fk-item-i{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-item-on{background:hsl(var(--primary)/.1);font-weight:500;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fk-item-on .fk-item-i{color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fk-item-on::before{content:"";position:absolute;left:0;top:50%;width:2px;height:16px;transform:translateY(-50%);border-radius:0 999px 999px 0;background:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fk-side-end{margin-top:auto;padding-top:8px} /* taste-skill-ignore: product screen */
.fk-side-end .fk-sep{margin:0 0 8px} /* taste-skill-ignore: product screen */

/* page frame and header */
.fk-main{position:absolute;left:260px;right:0;top:65px;bottom:0;overflow:hidden} /* taste-skill-ignore: product screen */
.fk-page{padding:24px;transform:translateY(calc(var(--fk-scroll,0)*-1px));transition:transform var(--fk-scroll-t,0s) cubic-bezier(.22,.8,.2,1)} /* taste-skill-ignore: product screen */
.fk-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} /* taste-skill-ignore: product screen */
.fk-mod{margin-bottom:4px;font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--module-amber))} /* taste-skill-ignore: product screen */
.fk-h1{font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:hsl(var(--title-ink))} /* taste-skill-ignore: product screen */
.fk-sub{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14px;line-height:1.5;font-weight:500;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */

/* dashboard */
.fk-dash{margin-top:16px;display:flex;flex-direction:column;gap:24px} /* taste-skill-ignore: product screen */
.fk-card{border:1px solid hsl(var(--border));border-radius:calc(var(--radius) + 4px);background:hsl(var(--card));color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fk-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} /* taste-skill-ignore: product screen */
.fk-kpi{padding:20px} /* taste-skill-ignore: product screen */
.fk-kpi-l{display:flex;align-items:center;gap:4px;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-kpi-v{margin-top:4px;font-size:24px;line-height:1.4;font-weight:700;letter-spacing:-.01em} /* taste-skill-ignore: product screen */
.fk-kpi-s{margin-top:8px;font-size:11px;line-height:1.625;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-kpi-d{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-kpi-d b{font-weight:500} /* taste-skill-ignore: product screen */
.fk-up{color:hsl(var(--success))} /* taste-skill-ignore: product screen */
.fk-dn{color:hsl(var(--destructive))} /* taste-skill-ignore: product screen */
.fk-note{font-size:11px;line-height:1.625;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-box{padding:24px;overflow:hidden} /* taste-skill-ignore: product screen */
.fk-t{font-size:18px;line-height:1.6;font-weight:600;letter-spacing:-.015em;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fk-th{display:flex;align-items:center;gap:8px;margin-bottom:12px} /* taste-skill-ignore: product screen */
.fk-th .fk-i{color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fk-th2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px} /* taste-skill-ignore: product screen */
.fk-th2 small{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-th2 span.fk-ni{font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-th2 span.fk-ni b{font-weight:600;color:hsl(var(--success))} /* taste-skill-ignore: product screen */
.fk-lines{display:flex;flex-direction:column;gap:8px} /* taste-skill-ignore: product screen */
.fk-line{padding:12px 16px;border-radius:calc(var(--radius) + 4px);border:1px solid;font-size:14px;line-height:1.625;font-weight:500;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-good{border-color:hsl(var(--success)/.3);background:hsl(var(--success)/.1)} /* taste-skill-ignore: product screen */
.fk-info{border-color:hsl(var(--info)/.3);background:hsl(var(--info)/.1)} /* taste-skill-ignore: product screen */
.fk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start} /* taste-skill-ignore: product screen */
.fk-chart{display:block;width:433px;height:280px} /* taste-skill-ignore: product screen */
.fk-chart text{font-family:inherit;font-size:11px;letter-spacing:0;fill:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-chart .fk-lg{font-size:12px} /* taste-skill-ignore: product screen */
.fk-gl{stroke:hsl(var(--border));stroke-width:1;stroke-dasharray:4 3} /* taste-skill-ignore: product screen */
.fk-b1{fill:hsl(var(--chart-1)/.95)} /* taste-skill-ignore: product screen */
.fk-b3{fill:hsl(var(--chart-3)/.95)} /* taste-skill-ignore: product screen */
.fk-l4{fill:none;stroke:hsl(var(--chart-4));stroke-width:2.5;stroke-linejoin:round} /* taste-skill-ignore: product screen */
.fk-l5{fill:none;stroke:hsl(var(--chart-5));stroke-width:2;stroke-dasharray:5 4} /* taste-skill-ignore: product screen */
.fk-m4{fill:hsl(var(--chart-4));stroke:hsl(var(--card));stroke-width:1.5} /* taste-skill-ignore: product screen */
.fk-tbl{width:100%;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fk-tbl thead tr{font-size:12px;color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fk-tbl th{padding:6px 8px;text-align:right} /* taste-skill-ignore: product screen */
.fk-tbl th:first-child{padding-left:0;text-align:left} /* taste-skill-ignore: product screen */
.fk-tbl th:last-child{padding-right:0} /* taste-skill-ignore: product screen */
.fk-tbl td{padding:6px 8px;text-align:right} /* taste-skill-ignore: product screen */
.fk-tbl td:first-child{padding-left:0;text-align:left;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-tbl td:last-child{padding-right:0} /* taste-skill-ignore: product screen */
.fk-tbl tbody tr{border-bottom:1px solid hsl(var(--border)/.2)} /* taste-skill-ignore: product screen */
.fk-tbl td.fk-up,.fk-tbl td.fk-dn{font-weight:500} /* taste-skill-ignore: product screen */
.fk-tbl td.fk-ly{font-weight:400} /* taste-skill-ignore: product screen */
.fk-tbl td.fk-nil{color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-cap{margin-top:12px} /* taste-skill-ignore: product screen */
.fk-rr-s{margin-bottom:16px;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-th.fk-th-t{margin-bottom:4px} /* taste-skill-ignore: product screen */
.fk-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} /* taste-skill-ignore: product screen */
.fk-stat{padding:8px 12px;text-align:center;border-radius:calc(var(--radius) + 4px);border:1px solid hsl(var(--primary)/.2);background:hsl(var(--primary)/.05)} /* taste-skill-ignore: product screen */
.fk-stat-l{margin-bottom:4px;font-size:11px;line-height:1.625;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-stat-v{font-size:16px;line-height:1.6;font-weight:600} /* taste-skill-ignore: product screen */
.fk-res{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} /* taste-skill-ignore: product screen */
.fk-res>div{padding:12px 16px;border-radius:calc(var(--radius) + 4px);border:1px solid hsl(var(--border));background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fk-res>div:first-child{border-color:hsl(var(--primary)/.2);background:hsl(var(--primary)/.05)} /* taste-skill-ignore: product screen */
.fk-res-l{font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-res-v{font-size:18px;line-height:1.6;font-weight:700} /* taste-skill-ignore: product screen */
.fk-res-p{color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fk-src{display:flex;flex-direction:column;gap:12px} /* taste-skill-ignore: product screen */
.fk-src-r{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;line-height:1.5} /* taste-skill-ignore: product screen */
.fk-src-n{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* taste-skill-ignore: product screen */
.fk-src-v{font-weight:600;font-variant-numeric:tabular-nums;flex:none} /* taste-skill-ignore: product screen */
.fk-src-b{display:flex;align-items:center;gap:8px;margin-top:4px} /* taste-skill-ignore: product screen */
.fk-src-t{flex:1;height:6px;border-radius:999px;overflow:hidden;background:hsl(var(--primary)/.15)} /* taste-skill-ignore: product screen */
.fk-src-t i{display:block;height:100%;border-radius:999px;background:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fk-src-c{width:80px;font-size:11px;line-height:1.625;text-align:right;color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* taste-skill-ignore: product screen */

/* page behind a dialog */
.fk-behind{position:absolute;inset:0;filter:blur(4px)} /* taste-skill-ignore: product screen */
.fk-veil{position:absolute;inset:0;z-index:4;background:hsl(var(--background)/.8)} /* taste-skill-ignore: product screen */
.fk-ghostcard{margin-top:24px;height:210px} /* taste-skill-ignore: product screen */
.fk-ghostcard+.fk-ghostcard{height:300px} /* taste-skill-ignore: product screen */
.fk-mtop{position:absolute;z-index:3;left:0;right:0;top:47px;background:hsl(var(--card));border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fk-mtop-r{display:flex;align-items:center;gap:8px;height:64px;padding:0 12px} /* taste-skill-ignore: product screen */
.fk-mtop-sw{padding:10px 12px;border-top:1px solid hsl(var(--border));background:hsl(var(--muted)/.3)} /* taste-skill-ignore: product screen */
.fk-mtop .fk-sw{max-width:none} /* taste-skill-ignore: product screen */
.fk-mpage{position:absolute;left:0;right:0;top:230px;padding:24px 16px} /* taste-skill-ignore: product screen */

/* review and confirm dialog */
.fk-dlg{position:absolute;z-index:5;display:flex;flex-direction:column;gap:16px;padding:24px;background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fk-dlg-c{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center} /* taste-skill-ignore: product screen */
.fk-dlg-d{position:relative;z-index:auto;width:896px} /* taste-skill-ignore: product screen */
/* 781 = 100dvh less 1rem on a 797 viewport under the status bar. The dialog scrolls; padding-top 12 is the real dialog nudged 12px so both ends stay in view */
.fk-dlg-m{left:16px;right:16px;top:55px;height:781px;padding-top:12px;overflow:hidden} /* taste-skill-ignore: product screen */
.fk-dlg-m .fk-dlg-x{top:-4px} /* taste-skill-ignore: product screen */
.fk-dlg-x{position:absolute;right:8px;top:8px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;opacity:.7} /* taste-skill-ignore: product screen */
.fk-dlg-h{display:flex;flex-direction:column;gap:6px} /* taste-skill-ignore: product screen */
.fk-dlg-m .fk-dlg-h{text-align:center} /* taste-skill-ignore: product screen */
.fk-dlg-t{font-size:18px;line-height:1;font-weight:600;letter-spacing:-.025em} /* taste-skill-ignore: product screen */
.fk-dlg-s{font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-dlg-b{display:flex;flex-direction:column;gap:16px} /* taste-skill-ignore: product screen */
.fk-per{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:14px;line-height:1.5} /* taste-skill-ignore: product screen */
.fk-dlg-m .fk-per{grid-template-columns:minmax(0,1fr)} /* taste-skill-ignore: product screen */
.fk-per>div{display:flex;align-items:center;justify-content:space-between;gap:8px} /* taste-skill-ignore: product screen */
.fk-per em{font-style:normal;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-wrap{overflow:hidden;border:1px solid hsl(var(--border));border-radius:var(--radius)} /* taste-skill-ignore: product screen */
.fk-pay{width:100%;min-width:720px;font-size:14px;line-height:1.5;transform:translateX(calc(var(--fk-pan,0)*-1px))} /* taste-skill-ignore: product screen */
.fk-pan .fk-pay{animation:fk-pan 9s cubic-bezier(.45,0,.25,1) infinite} /* taste-skill-ignore: product screen */
@keyframes fk-pan{0%,36%{transform:translateX(0)}50%,86%{transform:translateX(calc(var(--fk-pan-to,561)*-1px))}100%{transform:translateX(0)}} /* taste-skill-ignore: product screen */
@media (prefers-reduced-motion:reduce){.fk-pan .fk-pay{animation:none}} /* taste-skill-ignore: product screen */
.fk-pay thead{background:hsl(var(--muted));color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-pay th{padding:8px 12px;text-align:right} /* taste-skill-ignore: product screen */
.fk-pay th:first-child{text-align:left} /* taste-skill-ignore: product screen */
.fk-pay td{padding:8px 12px;text-align:right;font-variant-numeric:tabular-nums;border-top:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fk-pay td:first-child{text-align:left;white-space:nowrap} /* taste-skill-ignore: product screen */
.fk-dlg-m .fk-pay th{white-space:nowrap} /* taste-skill-ignore: product screen */
/* the app itself lets names and headers wrap at phone width, which pushes Confirm payroll below the fold */
.fk-truewrap .fk-pay td,.fk-truewrap .fk-pay th{white-space:normal} /* taste-skill-ignore: product screen */
.fk-pay td.fk-net{font-weight:500} /* taste-skill-ignore: product screen */
.fk-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:4px;font-size:14px;line-height:1.5} /* taste-skill-ignore: product screen */
.fk-dlg-m .fk-sum{grid-template-columns:repeat(2,minmax(0,1fr))} /* taste-skill-ignore: product screen */
.fk-sum em{font-style:normal;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-sum span{font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fk-sum span.fk-b{font-weight:500} /* taste-skill-ignore: product screen */
.fk-dlg-m .fk-sum span{text-align:right} /* taste-skill-ignore: product screen */
.fk-dlg-m .fk-sum i{display:none} /* taste-skill-ignore: product screen */
.fk-foot{display:flex;justify-content:flex-end;gap:8px} /* taste-skill-ignore: product screen */
.fk-dlg-m .fk-foot{flex-direction:column} /* taste-skill-ignore: product screen */
.fk-dlg-d .fk-foot .fk-btn+.fk-btn{margin-left:8px} /* taste-skill-ignore: product screen */
.fk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:var(--radius);font-size:14px;line-height:1.5;font-weight:500;white-space:nowrap} /* taste-skill-ignore: product screen */
.fk-btn-o{border:1px solid hsl(var(--border));background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fk-btn-p{background:hsl(var(--primary));color:hsl(var(--primary-foreground))} /* taste-skill-ignore: product screen */

/* inquiry list */
.fk-inq{position:absolute;inset:0;background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fk-inq-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px;border-bottom:1px solid hsl(var(--border)/.5)} /* taste-skill-ignore: product screen */
.fk-inq-s{font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-inq-r{display:flex;align-items:flex-start;gap:16px;padding:20px} /* taste-skill-ignore: product screen */
.fk-inq-r+.fk-inq-r{border-top:1px solid hsl(var(--border)/.5)} /* taste-skill-ignore: product screen */
.fk-inq-i{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:calc(var(--radius) + 4px);background:hsl(var(--success)/.1);color:hsl(var(--success))} /* taste-skill-ignore: product screen */
.fk-inq-c{flex:1;min-width:0} /* taste-skill-ignore: product screen */
.fk-inq-m{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-inq-m .fk-d{margin-left:auto} /* taste-skill-ignore: product screen */
.fk-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;line-height:1.5;font-weight:500;background:hsl(var(--success)/.1);color:hsl(var(--success))} /* taste-skill-ignore: product screen */
.fk-inq-t{margin-bottom:6px;font-size:18px;line-height:1.6;font-weight:500;letter-spacing:-.01em} /* taste-skill-ignore: product screen */
.fk-inq-p{margin-bottom:12px;font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-inq-b{display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-inq-b span{display:flex;align-items:center;gap:4px} /* taste-skill-ignore: product screen */
.fk-inq-e{display:flex;align-items:center;flex:none;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */

/* transactions */
.fk-tx{position:absolute;inset:0;padding:24px 24px 0;background:hsl(var(--background));display:flex;flex-direction:column;gap:12px} /* taste-skill-ignore: product screen */
.fk-tx-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} /* taste-skill-ignore: product screen */
.fk-filt{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:12px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fk-lab{display:grid;gap:4px;font-size:14px;line-height:1.5} /* taste-skill-ignore: product screen */
.fk-lab b{font-weight:500} /* taste-skill-ignore: product screen */
.fk-lab-g{flex:1 1 192px;min-width:0} /* taste-skill-ignore: product screen */
.fk-sel{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 10px 0 12px;border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);background:hsl(var(--background));box-shadow:0 1px 2px rgba(0,0,0,.05);font-size:16px;line-height:1.6;white-space:nowrap} /* taste-skill-ignore: product screen */
.fk-sel .fk-i{color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-find{display:flex;flex:2 1 384px;gap:8px;min-width:0} /* taste-skill-ignore: product screen */
.fk-inp{display:flex;align-items:center;gap:8px;flex:1;min-width:0;min-height:44px;padding:0 12px 0 10px;border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);background:hsl(var(--background));box-shadow:0 1px 2px rgba(0,0,0,.05);font-size:16px;line-height:1.6;color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden} /* taste-skill-ignore: product screen */
.fk-q{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);background:hsl(var(--background));box-shadow:0 1px 2px rgba(0,0,0,.05);font-size:14px;line-height:1.5;font-weight:500;white-space:nowrap} /* taste-skill-ignore: product screen */
.fk-tot{order:9;display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;width:100%;padding-top:8px;border-top:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fk-tot>span{display:flex;align-items:baseline;gap:6px} /* taste-skill-ignore: product screen */
.fk-tot em{font-style:normal;font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-tot b{font-size:16px;line-height:1.6;font-weight:600;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fk-tot>.fk-lock{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-grid{flex:1;min-height:0;overflow:hidden;background:hsl(var(--card));border:1px solid hsl(var(--border));border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;font-size:15px;line-height:1.3} /* taste-skill-ignore: product screen */
.fk-grid table{table-layout:fixed;width:656px} /* taste-skill-ignore: product screen */
.fk-grid th{height:44px;padding:0 8px;background:hsl(var(--muted));font-size:14px;text-align:left;border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fk-grid td{height:46px;padding:0 8px;border-bottom:1px solid hsl(var(--border));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle} /* taste-skill-ignore: product screen */
.fk-grid .fk-r{text-align:right;padding-right:12px} /* taste-skill-ignore: product screen */
.fk-grid td.fk-r{font-weight:600;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fk-grid td div{overflow:hidden;text-overflow:ellipsis} /* taste-skill-ignore: product screen */
.fk-grid small{display:block;font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis} /* taste-skill-ignore: product screen */
.fk-grid small.fk-mut{color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fk-grid .fk-mer{font-weight:600} /* taste-skill-ignore: product screen */

/* The product screens on /enterprise (frags.py). Sizes, weights and colours are the components' own on origin/main. */
/* Client portal (apps/web) type scale: xs 12/1.5, sm 14/1.5, base 16/1.6, lg 18/1.6, 2xl 24/1.4. */
/* Florink HR, the employee app (apps/timeclock), its own larger scale: xs 14/20, sm 16/24, base 18/28, lg 20/28, xl 24/32, 4xl 48/1. */
.fe-ui{--module-teal:171.67 41.38% 34.12%} /* taste-skill-ignore: product screen */
.fe-ui h4,.fe-ui h5,.fe-ui h6,.fe-ui p{margin:0} /* taste-skill-ignore: product screen */
.fe-i{display:block;flex:none} /* taste-skill-ignore: product screen */
.fe-mu{color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-port{position:absolute;inset:0;background:hsl(var(--background));overflow:hidden} /* taste-skill-ignore: product screen */

/* components/hr-workspace-nav.tsx */
.fe-ws{display:flex;align-items:center;gap:8px;min-width:0;padding:0 24px;border-bottom:1px solid hsl(var(--border));background:hsl(var(--background))} /* taste-skill-ignore: product screen */
.fe-tabs{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:hidden} /* taste-skill-ignore: product screen */
.fe-tab{display:inline-flex;align-items:center;flex:none;min-height:48px;padding:0 12px;border-bottom:2px solid transparent;font-size:14px;line-height:1.5;font-weight:500;color:hsl(var(--muted-foreground));white-space:nowrap} /* taste-skill-ignore: product screen */
.fe-tab-on{border-color:hsl(var(--primary));color:hsl(var(--primary))} /* taste-skill-ignore: product screen */

/* buttons: shadcn ghost / outline (rounded-md), and the leave panel's own (rounded-lg) */
.fe-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:44px;padding:0 16px;border-radius:8px;font-size:14px;line-height:1.5;font-weight:500;white-space:nowrap;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fe-gh,.fe-more{color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-ol{border:1px solid hsl(var(--input));background:hsl(var(--background))} /* taste-skill-ignore: product screen */
.fe-lb{border:1px solid hsl(var(--border));background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fe-lp{background:hsl(var(--primary));color:hsl(var(--primary-foreground))} /* taste-skill-ignore: product screen */

/* the page frame and components/ui/page-header.tsx */
.fe-page{display:flex;flex-direction:column;gap:20px;padding:24px} /* taste-skill-ignore: product screen */
.fe-ph{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 16px} /* taste-skill-ignore: product screen */
.fe-ph-t{min-width:0} /* taste-skill-ignore: product screen */
.fe-ph-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px} /* taste-skill-ignore: product screen */
.fe-eb{margin-bottom:4px!important;font-size:12px;line-height:1.5;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--module-teal))} /* taste-skill-ignore: product screen */
.fe-h1{font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:hsl(var(--title-ink))} /* taste-skill-ignore: product screen */
.fe-sub{display:flex;align-items:center;gap:8px;margin-top:4px!important;font-size:14px;line-height:1.5;font-weight:500;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */

/* HR Overview: the seven queue tiles (xl:grid-cols-7) */
.fe-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px} /* taste-skill-ignore: product screen */
.fe-tile{display:block;min-width:0;padding:16px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fe-has{box-shadow:inset 0 2px 0 0 hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fe-tile-t{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:2.7em;font-size:13px;line-height:1.35;font-weight:500;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-tile-v{display:block;margin-top:8px;font-size:24px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fe-has .fe-tile-v{color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fe-tile-c{display:block;margin-top:8px;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
/* Needs Attention */
.fe-q{overflow:hidden;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fe-q-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 20px;border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fe-q-h h5{font-size:16px;line-height:1.6;font-weight:600} /* taste-skill-ignore: product screen */
.fe-q-h span{font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-qs+.fe-qs>.fe-qh{border-top:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fe-qh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px;background:hsl(var(--muted)/.3)} /* taste-skill-ignore: product screen */
.fe-qh-l{display:flex;align-items:center;gap:8px;min-width:0} /* taste-skill-ignore: product screen */
.fe-qh h5{font-size:14px;line-height:1.5;font-weight:500} /* taste-skill-ignore: product screen */
.fe-cnt{padding:2px 8px;border-radius:6px;background:hsl(var(--muted));font-size:12px;line-height:1.5;font-weight:500;font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-va{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px;border-radius:6px;font-size:12px;line-height:1.5;font-weight:500;color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fe-ql{margin:0;padding:0 20px;list-style:none} /* taste-skill-ignore: product screen */
.fe-qi{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 8px} /* taste-skill-ignore: product screen */
.fe-qi+.fe-qi{border-top:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fe-qg{display:grid;flex:1;min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;gap:16px} /* taste-skill-ignore: product screen */
.fe-qn{font-size:14px;line-height:1.5;font-weight:500} /* taste-skill-ignore: product screen */
.fe-qd{font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
/* under sm: one row per queue */
.fe-mlist{overflow:hidden;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fe-mrow{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 16px} /* taste-skill-ignore: product screen */
.fe-mrow+.fe-mrow{border-top:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fe-mrow-t{flex:1;min-width:0} /* taste-skill-ignore: product screen */
.fe-mrow-t span{display:block;font-size:14px;line-height:1.5;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* taste-skill-ignore: product screen */
.fe-mrow-t small{display:block;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-mrow b{min-width:2ch;text-align:right;font-size:18px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fe-pri{color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fe-m .fe-ws{padding:0 16px} /* taste-skill-ignore: product screen */
.fe-m .fe-page{padding:24px 16px} /* taste-skill-ignore: product screen */
.fe-m .fe-ph-a{width:100%} /* taste-skill-ignore: product screen */
.fe-m .fe-q-h,.fe-m .fe-qh{padding-inline:16px} /* taste-skill-ignore: product screen */
.fe-m .fe-ql{padding:0 16px} /* taste-skill-ignore: product screen */
.fe-m .fe-qg{grid-template-columns:minmax(0,1fr);gap:4px} /* taste-skill-ignore: product screen */

/* Time Off: leave-panel.tsx, leave-request-row.tsx (companyView, xl grid) */
.fe-navb{display:flex;flex-wrap:wrap;gap:8px} /* taste-skill-ignore: product screen */
.fe-lh{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px} /* taste-skill-ignore: product screen */
.fe-lsub{margin-top:4px!important;font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-acts{display:flex;flex-wrap:wrap;gap:8px} /* taste-skill-ignore: product screen */
.fe-lv{gap:24px} /* taste-skill-ignore: product screen */
.fe-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} /* taste-skill-ignore: product screen */
.fe-stat{padding:16px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fe-stat p{font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-stat b{display:block;margin-top:4px;font-size:24px;line-height:1.4;font-weight:600;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fe-warn{color:hsl(var(--warning))} /* taste-skill-ignore: product screen */
.fe-card{display:flex;flex-direction:column;gap:16px;padding:24px;border:1px solid hsl(var(--border));border-radius:16px;background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.fe-ct{font-size:18px;line-height:1.6;font-weight:600} /* taste-skill-ignore: product screen */
.fe-rq{display:grid;grid-template-columns:minmax(0,1fr) 14rem 9rem 11rem;align-items:center;gap:12px;padding:16px 0} /* taste-skill-ignore: product screen */
.fe-rq:first-child{padding-top:0} /* taste-skill-ignore: product screen */
.fe-rq:last-child{padding-bottom:0} /* taste-skill-ignore: product screen */
.fe-rq+.fe-rq{border-top:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fe-rq-a h5{font-size:16px;line-height:1.6;font-weight:500} /* taste-skill-ignore: product screen */
.fe-note{margin-top:4px!important;font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-xs{margin-top:4px!important;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-rq-b,.fe-rq-c{font-size:14px;line-height:1.5} /* taste-skill-ignore: product screen */
.fe-rq-b b{font-weight:500;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fe-rq-c span{display:block;font-size:12px;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-rq-c b{font-weight:600;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fe-rq-d{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px} /* taste-skill-ignore: product screen */
.fe-ltabs{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fe-ltabs .fe-tab{min-height:44px;padding:0 16px} /* taste-skill-ignore: product screen */
.fe-inp{display:flex;align-items:center;width:16rem;min-height:44px;margin-bottom:8px;padding:8px 12px;border:1px solid hsl(var(--input));border-radius:8px;background:hsl(var(--background));font-size:14px;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-lvm .fe-stats{grid-template-columns:minmax(0,1fr)} /* taste-skill-ignore: product screen */
.fe-lvm .fe-stat{display:flex;align-items:center;justify-content:space-between;gap:12px} /* taste-skill-ignore: product screen */
.fe-lvm .fe-stat b{margin-top:0} /* taste-skill-ignore: product screen */
.fe-lvm .fe-card{padding:16px} /* taste-skill-ignore: product screen */
.fe-lvm .fe-rq{grid-template-columns:minmax(0,1fr);align-items:start} /* taste-skill-ignore: product screen */
.fe-lvm .fe-rq-c span{display:inline;font-size:14px} /* taste-skill-ignore: product screen */
.fe-lvm .fe-rq-d{justify-content:flex-start} /* taste-skill-ignore: product screen */

/* Florink HR, the employee app: bg-slate-50, page max-w-sm, its title in hr-title-ink (page-format.css) */
.eh{background:#F8FAFC;color:#020617} /* taste-skill-ignore: product screen */
.eh-page{position:absolute;left:0;right:0;top:47px;max-width:384px;margin:0 auto;padding:20px 16px 0} /* taste-skill-ignore: product screen */
.eh-flat .eh-page,.eh-flat .ps{top:0} /* taste-skill-ignore: product screen */
.eh-h{margin-bottom:16px;padding-top:4px} /* taste-skill-ignore: product screen */
.eh-biz{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#94A3B8} /* taste-skill-ignore: product screen */
.eh-title{margin-top:2px!important;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.025em;color:hsl(211 100% 42%)} /* taste-skill-ignore: product screen */
.eh-page>*+*{margin-top:16px} /* taste-skill-ignore: product screen */
.eh-clock{padding:20px;border:1px solid #C7D2FE;border-radius:16px;background:#fff;text-align:center;box-shadow:0 10px 15px -3px rgb(226 232 240/.5),0 4px 6px -4px rgb(226 232 240/.5)} /* taste-skill-ignore: product screen */
.eh-time{font-size:48px;line-height:1;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:#1E293B} /* taste-skill-ignore: product screen */
.eh-date{margin-top:2px!important;font-size:14px;line-height:20px;color:#64748B} /* taste-skill-ignore: product screen */
.eh-pill{display:inline-flex;align-items:center;gap:6px;margin:16px 0 24px;padding:6px 12px;border-radius:999px;background:#F1F5F9;font-size:14px;line-height:20px;font-weight:500;color:#475569} /* taste-skill-ignore: product screen */
.eh-pill i{width:6px;height:6px;border-radius:50%;background:#94A3B8} /* taste-skill-ignore: product screen */
.eh-in{display:block;padding:16px 0;border-radius:12px;background:#120A8F;color:#fff;font-size:18px;line-height:28px;font-weight:700;box-shadow:0 4px 6px -1px rgb(199 210 254),0 2px 4px -2px rgb(199 210 254)} /* taste-skill-ignore: product screen */
.eh-card{padding:16px;border:1px solid #F1F5F9;border-radius:12px;background:#fff;box-shadow:0 4px 6px -1px rgb(226 232 240/.3),0 2px 4px -2px rgb(226 232 240/.3)} /* taste-skill-ignore: product screen */
.eh-wk{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} /* taste-skill-ignore: product screen */
.eh-wk h5,.eh-ct{font-size:16px;line-height:24px;font-weight:600;color:#1E293B} /* taste-skill-ignore: product screen */
.eh-ct{margin-bottom:12px!important} /* taste-skill-ignore: product screen */
.eh-wk b{font-size:24px;line-height:32px;font-weight:700;font-variant-numeric:tabular-nums;color:#120A8F} /* taste-skill-ignore: product screen */
.eh-bar{height:8px;margin-bottom:4px;overflow:hidden;border-radius:999px;background:#F1F5F9} /* taste-skill-ignore: product screen */
.eh-bar i{display:block;height:100%;border-radius:999px;background:#120A8F} /* taste-skill-ignore: product screen */
.eh-rem{font-size:10px;line-height:15px;text-align:right;color:#64748B} /* taste-skill-ignore: product screen */
.eh-ens{display:grid;gap:8px} /* taste-skill-ignore: product screen */
.eh-en{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:8px;background:#F8FAFC} /* taste-skill-ignore: product screen */
.eh-en p{font-size:14px;line-height:20px;font-weight:500;color:#334155} /* taste-skill-ignore: product screen */
.eh-en small{display:block;margin-top:2px;font-size:10px;line-height:15px;color:#64748B;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.eh-en b{font-size:16px;line-height:24px;font-weight:700;font-variant-numeric:tabular-nums;color:#334155} /* taste-skill-ignore: product screen */
.eh-sl{margin-bottom:8px!important;padding:0 4px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#94A3B8} /* taste-skill-ignore: product screen */
.eh-tiles{overflow:hidden;border:1px solid #F1F5F9;border-radius:16px;background:#fff;box-shadow:0 4px 6px -1px rgb(226 232 240/.4),0 2px 4px -2px rgb(226 232 240/.4)} /* taste-skill-ignore: product screen */
.eh-tile{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #F8FAFC} /* taste-skill-ignore: product screen */
.eh-chip{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:12px} /* taste-skill-ignore: product screen */
.eh-ix{background:#EEF0FF;color:#120A8F} /* taste-skill-ignore: product screen */
.eh-em{background:#D1FAE5;color:#047857} /* taste-skill-ignore: product screen */
.eh-sk{background:#E0F2FE;color:#0369A1} /* taste-skill-ignore: product screen */
.eh-tt{min-width:0} /* taste-skill-ignore: product screen */
.eh-tt b{display:block;font-size:15px;line-height:22px;font-weight:600;color:#1E293B} /* taste-skill-ignore: product screen */
.eh-tt small{display:block;margin-top:2px;overflow:hidden;font-size:14px;line-height:20px;white-space:nowrap;text-overflow:ellipsis;color:#64748B} /* taste-skill-ignore: product screen */
.eh-chev{margin-left:auto;color:#CBD5E1} /* taste-skill-ignore: product screen */
/* portal-nav.tsx: fixed to the bottom, over the home indicator's 34px */
.eh-nav{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:8px 16px 34px;border-top:1px solid #E2E8F0;background:rgb(255 255 255/.95);box-shadow:0 -8px 24px rgba(15,23,42,.08)} /* taste-skill-ignore: product screen */
.eh-nav>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:384px;margin:0 auto} /* taste-skill-ignore: product screen */
.eh-nb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:56px;border-radius:8px;font-size:11px;line-height:16px;font-weight:500;color:#64748B} /* taste-skill-ignore: product screen */
.eh-nb-on{background:#EEF0FF;color:#120A8F} /* taste-skill-ignore: product screen */
/* portal/paystubs/page.tsx: its own frame, bg-gray-50 */
.ps{position:absolute;left:0;right:0;top:47px;bottom:0;background:#F9FAFB} /* taste-skill-ignore: product screen */
.ps-hd{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #E5E7EB;background:#fff} /* taste-skill-ignore: product screen */
.ps-hd .eh-title{margin:0!important} /* taste-skill-ignore: product screen */
.ps-bk{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;color:#020617} /* taste-skill-ignore: product screen */
.ps-yr{display:flex;gap:8px;padding:12px 16px} /* taste-skill-ignore: product screen */
.ps-y{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;font-size:16px;line-height:24px;font-weight:500} /* taste-skill-ignore: product screen */
.ps-on{background:#059669;color:#fff} /* taste-skill-ignore: product screen */
.ps-l{display:grid;gap:12px;padding:8px 16px} /* taste-skill-ignore: product screen */
.ps-c{overflow:hidden;border:1px solid #E5E7EB;border-radius:12px;background:#fff} /* taste-skill-ignore: product screen */
.ps-s{display:flex;align-items:center;gap:12px;padding:12px 16px} /* taste-skill-ignore: product screen */
.ps-ic{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:8px;background:#ECFDF5;color:#059669} /* taste-skill-ignore: product screen */
.ps-w{flex:1;min-width:0} /* taste-skill-ignore: product screen */
.ps-w b{display:block;font-size:16px;line-height:24px;font-weight:500;color:#111827;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.ps-w small,.ps-n small{display:block;font-size:14px;line-height:20px;color:#6B7280;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.ps-n{flex:none;text-align:right} /* taste-skill-ignore: product screen */
.ps-n b{display:block;font-size:16px;line-height:24px;font-weight:600;color:#111827;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.ps-n small{color:#9CA3AF} /* taste-skill-ignore: product screen */
.ps-chev{color:#9CA3AF} /* taste-skill-ignore: product screen */
.ps-d{display:grid;gap:16px;padding:12px 16px;border-top:1px solid #F3F4F6} /* taste-skill-ignore: product screen */
.ps-d h6{margin-bottom:8px!important;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6B7280} /* taste-skill-ignore: product screen */
.ps-r{display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-size:16px;line-height:24px;color:#4B5563} /* taste-skill-ignore: product screen */
.ps-r+.ps-r{margin-top:4px} /* taste-skill-ignore: product screen */
.ps-r>span:last-child{font-weight:500;color:#111827;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.ps-r .ps-neg{color:#DC2626!important} /* taste-skill-ignore: product screen */
.ps-b{margin-top:4px;padding-top:8px;border-top:1px solid #E5E7EB;font-weight:600;color:#111827} /* taste-skill-ignore: product screen */
.ps-b>span:last-child{font-weight:600} /* taste-skill-ignore: product screen */
.ps-net{display:flex;align-items:center;justify-content:space-between;margin:0 -16px;padding:12px 16px;background:#ECFDF5} /* taste-skill-ignore: product screen */
.ps-net span{font-weight:600;color:#064E3B} /* taste-skill-ignore: product screen */
.ps-net b{font-size:20px;line-height:28px;font-weight:700;color:#047857;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.ps-dl{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 0;border-radius:8px;background:#111827;color:#fff;font-size:16px;line-height:24px;font-weight:500} /* taste-skill-ignore: product screen */

/* components/business-switcher.tsx, open: the pill in the top bar, the popover under it */
.sw-bar{display:flex;align-items:center;justify-content:flex-start;height:65px;padding:0 64px 0 110px;border-bottom:1px solid hsl(var(--border));background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.sw-bar .fk-sw{max-width:448px} /* taste-skill-ignore: product screen */
.sw-open{background:hsl(var(--primary)/.2)!important;border-color:hsl(var(--primary)/.3)!important} /* taste-skill-ignore: product screen */
.sw-hint{flex:none;font-size:11px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.sw-pop{position:absolute;left:110px;top:69px;width:280px;overflow:hidden;border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--card));box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1)} /* taste-skill-ignore: product screen */
.sw-in{display:flex;align-items:center;gap:8px;height:37px;padding:0 12px;border-bottom:1px solid hsl(var(--border));font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.sw-in .fe-i{opacity:.5;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.sw-g{padding:4px} /* taste-skill-ignore: product screen */
.sw-it{display:flex;align-items:center;padding:10px 8px;border-radius:6px;font-size:14px;line-height:1.5;font-weight:500} /* taste-skill-ignore: product screen */
.sw-sel{background:hsl(var(--primary)/.1);color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.sw-ck{margin-right:8px;color:hsl(var(--primary));opacity:0} /* taste-skill-ignore: product screen */
.sw-on{opacity:1} /* taste-skill-ignore: product screen */
.sw-mob .sw-bar{justify-content:center;height:auto;padding:10px 12px;border-top:1px solid hsl(var(--border));background:hsl(var(--muted)/.3)} /* taste-skill-ignore: product screen */
.sw-mob .sw-bar .fk-sw{max-width:none} /* taste-skill-ignore: product screen */
.sw-mob .sw-pop{left:12px;top:65px} /* taste-skill-ignore: product screen */

/* the Balances tab (leave-balance-table.tsx) */
.fe-n0{margin-top:0!important} /* taste-skill-ignore: product screen */
.fe-bt{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5} /* taste-skill-ignore: product screen */
.fe-bt thead tr{border-bottom:1px solid hsl(var(--border));color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-bt thead th{padding:8px 16px;font-weight:500;text-align:right} /* taste-skill-ignore: product screen */
.fe-bt thead th:first-child{padding-left:0;text-align:left} /* taste-skill-ignore: product screen */
.fe-bt tbody tr{border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fe-bt tbody th{padding:8px 16px 8px 0;text-align:left;font-weight:500} /* taste-skill-ignore: product screen */
.fe-bt td{padding:8px 16px;text-align:right;white-space:nowrap} /* taste-skill-ignore: product screen */
.fe-bt td b{font-weight:600;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fe-bt td small{display:block;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fe-ra{padding:4px 0 4px 16px!important} /* taste-skill-ignore: product screen */
.fe-ra span{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:500;color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
/* the switcher's page underneath */
.sw-under{position:absolute;left:0;top:65px;width:1020px} /* taste-skill-ignore: product screen */
.sw-mob .sw-under{left:0;right:0;top:61px;width:auto} /* taste-skill-ignore: product screen */
.sw-mob .sw-under .fe-ws{padding:0 16px} /* taste-skill-ignore: product screen */
.sw-mob .sw-under .fe-page{padding:24px 16px} /* taste-skill-ignore: product screen */
.sw-mob .sw-under .fe-ph-a{width:100%} /* taste-skill-ignore: product screen */

/* round 2: the focused crops */
.fe-crop{padding:0} /* taste-skill-ignore: product screen */
/* the applications list (recruiting-client.tsx) */
.ap{overflow:hidden;border-bottom:1px solid hsl(var(--border));background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.ap-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/.35);font-size:12px;line-height:1.5;font-weight:500;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.ap ul{margin:0;padding:0;list-style:none} /* taste-skill-ignore: product screen */
.ap-r{display:flex;align-items:center;gap:12px;padding:16px;border-left:2px solid transparent} /* taste-skill-ignore: product screen */
.ap-r+.ap-r{border-top:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.ap-new{border-left-color:hsl(var(--primary));background:hsl(var(--primary)/.025)} /* taste-skill-ignore: product screen */
.ap-av{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:16px;font-size:14px;font-weight:600} /* taste-skill-ignore: product screen */
.ap-submitted{background:hsl(var(--primary)/.1);color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.ap-interview{background:hsl(var(--warning)/.1);color:hsl(var(--warning))} /* taste-skill-ignore: product screen */
.ap-t{flex:1;min-width:0} /* taste-skill-ignore: product screen */
.ap-n{display:flex;flex-wrap:wrap;align-items:center;gap:8px} /* taste-skill-ignore: product screen */
.ap-n b{font-size:16px;line-height:1.6;font-weight:500} /* taste-skill-ignore: product screen */
.ap-b{display:inline-flex;align-items:center;gap:6px;flex:none;padding:4px 10px;border-radius:999px;font-size:12px;line-height:1.5;font-weight:500} /* taste-skill-ignore: product screen */
.ap-b i{width:6px;height:6px;border-radius:50%;background:currentColor} /* taste-skill-ignore: product screen */
.ap-j{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.ap-e{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:hsl(var(--muted-foreground));word-break:break-all} /* taste-skill-ignore: product screen */
.ap-iv{display:block;margin-top:8px;font-size:12px;line-height:1.5;color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
/* the roster (roster-table.tsx, roster-ui.tsx) */
.ro{overflow:hidden;background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.ro table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5} /* taste-skill-ignore: product screen */
.ro thead tr{border-bottom:1px solid hsl(var(--border));text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--foreground)/.8)} /* taste-skill-ignore: product screen */
.ro th{padding:12px;font-weight:500;white-space:nowrap} /* taste-skill-ignore: product screen */
.ro th:first-child,.ro td:first-child{padding-left:16px} /* taste-skill-ignore: product screen */
.ro tbody tr{border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.ro td{padding:8px 12px;white-space:nowrap;vertical-align:middle;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.ro-nm{display:flex;align-items:center;gap:12px} /* taste-skill-ignore: product screen */
.ro-nm b{display:block;font-size:14px;font-weight:600} /* taste-skill-ignore: product screen */
.ro-nm small{display:block;font-size:12px;color:hsl(var(--foreground)/.8)} /* taste-skill-ignore: product screen */
.ro-av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;font-size:12px;font-weight:600} /* taste-skill-ignore: product screen */
.ro-in{background:hsl(var(--info)/.15);color:hsl(var(--info))} /* taste-skill-ignore: product screen */
.ro-pr{background:hsl(var(--primary)/.15);color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.ro-su{background:hsl(var(--success)/.15);color:hsl(var(--success))} /* taste-skill-ignore: product screen */
.ro-wa{background:hsl(var(--warning)/.15);color:hsl(var(--warning))} /* taste-skill-ignore: product screen */
.ro-b{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;font-size:11.5px;font-weight:500;white-space:nowrap} /* taste-skill-ignore: product screen */
.ro-ok{background:hsl(var(--success)/.1);color:hsl(var(--success))} /* taste-skill-ignore: product screen */
.ro-sent{background:hsl(var(--info)/.1);color:hsl(var(--info))} /* taste-skill-ignore: product screen */
.ro-cs{display:grid;gap:8px;margin:0;padding:16px;list-style:none} /* taste-skill-ignore: product screen */
.ro-c{display:flex;align-items:center;gap:4px;padding-right:4px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.ro-c>.ro-av{margin-left:12px} /* taste-skill-ignore: product screen */
.ro-ct{flex:1;min-width:0;min-height:56px;display:flex;flex-direction:column;justify-content:center;padding:10px 12px} /* taste-skill-ignore: product screen */
.ro-cn{display:flex;align-items:center;gap:8px} /* taste-skill-ignore: product screen */
.ro-cn b{font-size:14px;font-weight:600} /* taste-skill-ignore: product screen */
.ro-cn i{width:6px;height:6px;border-radius:50%;background:hsl(var(--success))} /* taste-skill-ignore: product screen */
.ro-ct small{display:block;font-size:12px;color:hsl(var(--foreground)/.8)} /* taste-skill-ignore: product screen */
.ro-more{display:grid;place-items:center;width:44px;height:44px;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
/* the decision card alone: rows stacked, as below xl */
.fe-stk{padding:0} /* taste-skill-ignore: product screen */
.fe-stk .fe-card{border:0;border-radius:0;padding:24px} /* taste-skill-ignore: product screen */
.fe-stk .fe-rq{grid-template-columns:minmax(0,1fr);align-items:start} /* taste-skill-ignore: product screen */
.fe-stk .fe-rq-c span{display:inline;font-size:14px} /* taste-skill-ignore: product screen */
.fe-stk .fe-rq-d{justify-content:flex-start} /* taste-skill-ignore: product screen */
.fe-m.fk-fit .fe-stk .fe-card{padding:16px} /* taste-skill-ignore: product screen */
/* the switcher alone */
.sw-t .sw-bar{justify-content:flex-start;padding:0 16px} /* taste-skill-ignore: product screen */
.sw-t .sw-pop{left:16px} /* taste-skill-ignore: product screen */
.sw-mob.sw-t .sw-bar{padding:10px 12px} /* taste-skill-ignore: product screen */
.sw-mob.sw-t .sw-pop{left:12px;top:65px} /* taste-skill-ignore: product screen */

/* === round S, phase 2: the cuts === */
/* the switcher cut that hugs the control (desktop): the pill in the bar is as wide as the list under it, 16px of ground on every side */
.sw-hug .sw-bar{padding:0 16px} /* taste-skill-ignore: product screen */
.sw-hug .sw-pop{left:16px;top:69px} /* taste-skill-ignore: product screen */
/* phone cuts (S11): text the page asks you to read is at least 14px, the small print at least 12px. Sizes only; nothing else moves */
.fe-m .sw-hint{font-size:12px} /* taste-skill-ignore: product screen */
.fe-m .ro-cn b{font-size:15px;line-height:22px} /* taste-skill-ignore: product screen */
.fe-m .ro-ct small{font-size:14px;line-height:20px} /* taste-skill-ignore: product screen */
.eh-flat .eh-biz{font-size:12px} /* taste-skill-ignore: product screen */
.eh-flat .eh-rem{font-size:12px;line-height:18px} /* taste-skill-ignore: product screen */
/* the clock's time is 48px on a 390 phone; in a 354 window it is 42 so it stands inside its card with air on both sides */
.eh-flat .eh-time{font-size:42px} /* taste-skill-ignore: product screen */
/* the pay stub cut: the first stub alone. The page head, the year and the older stubs are above and below the cut */
.eh-one .ps-hd,.eh-one .ps-yr,.eh-one .ps-c+.ps-c{display:none} /* taste-skill-ignore: product screen */
.eh-one .ps-l{padding:16px} /* taste-skill-ignore: product screen */
/* on the narrowest phones the 280px list is as wide as the window allows */
.sw-mob .sw-pop{width:min(280px,calc(100% - 24px))} /* taste-skill-ignore: product screen */
/* the bezel phones (desktop). The app's bottom bar (portal-nav.tsx) is white at 95% and softens what scrolls under it, so no row shows
   through. Drawn here as plain white, which is what the app shows over these pale rows (the filter itself breaks the bezel's rounded clip) */ /* taste-skill-ignore: product screen */
.eh-nav{background:#fff} /* taste-skill-ignore: product screen */
/* the pay period at 12.5px holds one line beside the net pay, so no date runs under the phone's home indicator */
.fk-phone .ps-w small{font-size:12.5px} /* taste-skill-ignore: product screen */

/* === round S, second pass (BRIEF-S3) === */
/* T2: every line inside a cut is at least 13px as drawn, small print included. Sizes only */
.ap-h,.ap-b,.ap-e,.ap-iv{font-size:13px} /* taste-skill-ignore: product screen */
.fe-m .fe-eb,.fe-m .fe-mrow-t small{font-size:13px} /* taste-skill-ignore: product screen */
.fe-stk .fe-xs{font-size:13.5px} /* taste-skill-ignore: product screen */
.ro thead tr{font-size:13px} /* taste-skill-ignore: product screen */
.ro-b{font-size:13px} /* taste-skill-ignore: product screen */
.ro-av{font-size:13px} /* taste-skill-ignore: product screen */
.eh-flat .eh-biz,.eh-flat .eh-rem{font-size:13px} /* taste-skill-ignore: product screen */
.sw-hug .sw-hint{font-size:12px} /* taste-skill-ignore: product screen */
/* T3: with the row's "more" button cropped off, the roster card keeps its own right padding */
.fe-m .ro-c{padding-right:12px} /* taste-skill-ignore: product screen */
/* the bezel phones (desktop) are whole phone screens at 0.8 scale: their smallest print (10 and 11px in the app) is drawn from 12px so it reads */
.fk-phone .eh-biz,.fk-phone .eh-rem,.fk-phone .eh-en small,.fk-phone .eh-nb{font-size:12px;line-height:16px} /* taste-skill-ignore: product screen */

@font-face{font-family:"Pretendard Std";src:url("/assets/PretendardStdVariable.64a2b711.woff2") format("woff2");font-weight:45 920;font-display:swap}
/* /enterprise in k1f's language: one art field (the first screen, as /accountants), then white and mist sheets, each with the real screen that proves it. Phone first. */
:root{
 color-scheme:light;
 --ink:#0E0F12;--ink2:#3A3C43;--ink3:#5D6068;
 --rule:#E3E4E8;--mist:#F5F5F7;--pale:#EDEDF0;
 --blue:#1B4FD6;--blue-lo:#153FAE;
 --teal:#0A7C7E;--tick:#0E8C83;
 --deep:#0A1C7C;--deep-rgb:10,28,124;
 --on-deep:#FFFFFF;--on-deep2:#E6EEFF;
 --tint:#F0F4FD;
 --g:clamp(16px,4.6vw,44px);
 --wrap:1240px;
 --r:clamp(24px,3.6vw,52px);
 --hdr:56px;
 --out:cubic-bezier(.16,1,.3,1);
 --h1:min(13.4vw,clamp(52px,7vw,112px));
 --h2:min(10.6vw,clamp(40px,4.7vw,80px));
 --lead:clamp(18px,1.56vw,24px);
 --b2:clamp(17px,1.32vw,21px);
 --body:clamp(16px,1.2vw,18px);
 /* T5: a sub-feature heading (a feature name over two or three lines of text): 19px at 390, 22px at 1440, weight 600 */
 --sub:clamp(19px,calc(17.9px + .29vw),22px);
 --pad:clamp(56px,7vw,120px);
 /* a phone-width product window is drawn at the window's own width, so the app's text is its real size */
 --mw:288;
 /* the employee app's phone cuts are drawn at 354 (a 390 phone's column) so their type is its real size there, and scale below that */
 --ew:354;
 /* the HR sheet's column gap, shared by its headline row, the three frames, their texts and the three text-only points */
 --cg:clamp(24px,2.6vw,40px);
 /* the laptop's height as a share of its width: (17 + screen height + 32) / 1400 bezel units */
 --lap:.5643;
 /* heights of the phone cuts (measured with tools/s4nat.cjs): the applications list to the line under its third row (the interview line wraps under 390),
    four roster cards and their 16px of ground, the first time off request to its line, the clock and This Week with 16px under them,
    the pay stub from its first row to the foot of Net Pay */
 --hire-h:453;--ro-h:312;--off-h:274;--eh-h:460;--ps-h:512;
}
@media (min-width:1441px){:root{--wrap:min(86.1vw,1516px)}}
@media (min-width:700px){:root{--body:clamp(17px,1.2vw,18px)}}
@media (min-width:360px){:root{--mw:326;--hire-h:419}}
@media (min-width:390px){:root{--mw:354;--hire-h:399}}
@media (min-width:430px){:root{--mw:390;--ew:390}}
@media (min-width:540px){:root{--mw:490}}
@media (min-width:640px){:root{--mw:580}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-tap-highlight-color:rgba(27,79,214,.14)}
html.menu-lock{overflow:hidden}
body{margin:0;background:#fff;color:var(--ink);font:430 var(--body)/1.55 "Pretendard Std",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
main{overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none;touch-action:manipulation}
b{font-weight:640}
i,u{font-style:normal;text-decoration:none}
.c{width:100%;max-width:calc(var(--wrap) + var(--g)*2);margin-inline:auto;padding-inline:max(var(--g),env(safe-area-inset-left)) max(var(--g),env(safe-area-inset-right))}
.num{font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}
.tk,.ar{display:block;flex:none}
h1,h2,h3{font-weight:680;letter-spacing:-.036em;line-height:1.05;color:var(--ink);text-wrap:balance}
h2{font-size:var(--h2);font-weight:680;letter-spacing:-.04em;line-height:1.02}
.hl{display:inline}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* buttons: pills in ink. Blue is kept for meaning */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-size:16px;line-height:1;font-weight:600;letter-spacing:-.012em;white-space:nowrap;transition:background-color .2s ease,color .2s ease,transform .18s var(--out)}
.btn .ar{width:17px;height:17px;transition:transform .35s var(--out)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{border-radius:999px}
.btn-lg{min-height:54px;padding:0 28px;font-size:17px}
.btn-cta{background:var(--ink);color:#fff}
.btn-cta:active{background:#2C2E34}
.btn-line{background:#fff;color:var(--ink);border:1px solid rgba(14,15,18,.12)} /* taste-skill-ignore: the quiet button's edge on a pale field */
.btn-line:active{background:#F1F2F5}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:active{background:#E4E6EC}
@media (hover:hover){
 .btn:hover .ar{transform:translateX(3px)}
 .btn-cta:hover{background:#2A2C32}
 .btn-line:hover{background:#F6F7F9}
 .btn-white:hover{background:#EEF0F4}
}

/* header: k1f's. It stands on the sky at the very top and takes its white back with the first scroll; under scripting its button waits until the hero's has gone behind the bar */
.top{position:sticky;top:0;z-index:30;background:#fff;padding-top:env(safe-area-inset-top)}
.js:not(.menu-lock) .top:not(.solid){background:transparent}
.top .c{display:flex;align-items:center;gap:6px;height:var(--hdr);max-width:none;padding-inline:max(var(--g),env(safe-area-inset-left),calc((100vw - var(--wrap))/2)) max(var(--g),env(safe-area-inset-right),calc((100vw - var(--wrap))/2))}
.mark{display:inline-flex;align-items:center;gap:9px;min-width:44px;min-height:44px;font-size:21px;font-weight:680;letter-spacing:-.03em;margin-right:auto}
.mark img{width:33px;height:24px}
.nav{display:none}
.login{display:none}
.top .btn{order:2}
.menu{order:3}
.menu summary{display:flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 2px 0 10px;font-size:16px;font-weight:560;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:18px;height:11px;border-block:2px solid currentColor}
.menu[open] summary::after{height:18px;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 3l12 12M15 3L3 15' stroke='%230E0F12' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
.menu:not([open]) ul{display:none}
.menu ul{position:fixed;z-index:2;left:0;right:0;top:calc(var(--hdr) + env(safe-area-inset-top));max-height:calc(100dvh - var(--hdr) - env(safe-area-inset-top));overflow-y:auto;padding:4px var(--g) 22px;background:#fff;border-radius:0 0 22px 22px;box-shadow:0 30px 60px -24px rgba(0,0,0,.42)} /* taste-skill-ignore: a real overlay */
.menu[open]::before{content:"";position:fixed;inset:0;top:calc(var(--hdr) + env(safe-area-inset-top));background:rgba(14,15,18,.4)}
.menu li+li a{box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.menu li a{display:flex;align-items:center;min-height:62px;font-size:24px;font-weight:640;letter-spacing:-.028em;transition:color .15s ease}
.menu li a:active{color:var(--ink2)}
.menu li:last-child a{font-size:18px;font-weight:560;color:var(--ink2);letter-spacing:-.012em}
/* the page you are on, the site's one style: underlined in the bar, a blue dot in the menu, heavier in the footer */
.nav a[aria-current=page]{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.menu li a[aria-current=page]::after{content:"";width:8px;height:8px;margin-left:12px;border-radius:50%;background:var(--blue)}

/* ---------- the first screen: the sky, the ring field rising behind the real HR Overview, a white floor under its lower part ---------- */
:root{--ww:min(1040px,calc(100vw - var(--g)*2))}
@media (min-width:1441px){:root{--ww:min(1300px,68vw)}}
.hero{position:relative;overflow:clip;margin-top:calc((var(--hdr) + env(safe-area-inset-top))*-1);padding-top:calc(var(--hdr) + env(safe-area-inset-top));padding-bottom:calc(var(--pad)*.7 + var(--r))}
.hero-copy{position:relative;z-index:4;padding:12px var(--g) 0}
h1{font-size:var(--h1);line-height:1;letter-spacing:-.046em}
.ln{display:block;white-space:nowrap}
/* T5: one lede style, the hero sub's, used only directly under the hero headline (.lede) or a section headline (.lead). T6: it wraps naturally */
.lede,.lead{margin-top:14px;max-width:28em;font-size:clamp(17px,4.6vw,19px);line-height:1.38;font-weight:460;letter-spacing:-.014em;color:var(--ink)}
.lede b{font-weight:640}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ctas .btn{flex:1 1 0;padding:0 12px}
.stage{position:relative;z-index:3;margin-top:calc(var(--g) + 40px);padding-inline:var(--g)}
/* the rings: the home page's glass, smaller; its arc starts just above the screen */
/* the disc: one sharp file, placed by its crown; it carries its own halo, and the sky is the stage family's (shared/system.css). On a phone the file is 390 x 830 units, its crown 70 under its top edge and 52px above the stage */
.rings{position:absolute;z-index:0;left:50%;width:100vw;top:calc(-70*100vw/390 - 52px);aspect-ratio:390/830;transform:translateX(-50%);pointer-events:none}
.rings picture,.rings img{display:block;width:100%;height:100%;max-width:none}
/* the floor: a white sheet that rises behind the screen's lower part */
/* on phones it starts 48px above the panel's foot (the panel is 578 design px tall at the window's scale), so the caption stands wholly on white */
.floor{--fl:calc((100vw - var(--g)*2)*578/var(--mw) - 48px);position:absolute;z-index:1;left:50%;width:100vw;margin-left:-50vw;top:var(--fl,70%);height:200vh;background:#fff;border-radius:50% 50% 0 0/var(--floor-r) var(--floor-r) 0 0} /* the family's arc */
.shot{position:relative;z-index:2}
.shot .cap{position:relative}
.win-d{display:none}

/* product windows: the kit's hairline frame, the app's own white inside */
.pf{position:relative}

/* sheets: each rises over the last on a large rounded edge */
.sheet{position:relative;z-index:2;overflow:hidden;margin-top:calc(var(--r)*-1);padding-block:var(--pad) calc(var(--pad) + var(--r));background:#fff;border-radius:var(--r) var(--r) 0 0}
.sheet.mist{background:var(--mist)}
/* every sheet stands over the one before it (and the first over the hero's floor), so each rounded top shows: equal layers paint in page order */
.sheet{z-index:4}
/* the closing band stands with the sheets, and the footer over it (system.css reads --z-close) */
:root{--z-close:4}
.sec-t h2 .hl{display:block}
.lead{max-width:34em}
.lead a{white-space:nowrap}
/* T5: notes and glosses are 16px on phones and 15px from 700 */
.gl{margin-top:10px;font-size:16px;line-height:1.4;color:var(--ink2)}
/* running text: the body size in the full ink (T5) */
.cos-note{margin-top:14px;max-width:34em;font-size:var(--body);line-height:1.55;color:var(--ink)}

/* everything in the plan: the words, and the plan's list on a white card with the notices promise at its foot */
.plan-g{display:grid;gap:clamp(28px,3vw,48px)}
.st{margin-top:16px;font-size:var(--b2);line-height:1.35;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.plan-b{padding:8px 20px 20px;border-radius:20px;background:#fff}
.inc{display:grid}
.inc li{display:flex;align-items:flex-start;gap:12px;padding-block:13px;font-size:17px;line-height:1.32;font-weight:540;letter-spacing:-.012em}
.inc li+li{box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.inc-vow{margin-top:8px;padding:14px 16px;border-radius:14px;background:var(--deep);color:var(--on-deep2);font-size:17px;line-height:1.42;letter-spacing:-.01em;text-wrap:pretty}
.inc-vow b{font-weight:680;color:#fff}
.plan-n{margin-top:14px;font-size:16px;line-height:1.4;color:var(--ink2)}
.facts{display:grid;gap:10px;margin-top:22px;font-size:17px;line-height:1.3;font-weight:540;letter-spacing:-.01em}
.facts li{display:flex;align-items:flex-start;gap:11px}

/* HR in the same app: six short rows, then the Time Off screen */
.feats{display:grid;margin-top:clamp(26px,3vw,44px)}
.feats li{padding-block:16px 18px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.feats h3{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:660}
.feats p{margin-top:5px;font-size:var(--body);line-height:1.48;color:var(--ink)}
.pf-l{margin-top:clamp(28px,3.4vw,56px)}

/* your team's own app: the words, then Priya's two screens */
.team-g{display:grid;gap:28px}
.sw-l{display:grid;margin-top:20px}
.sw-l li{padding-block:14px 16px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.sw-l h3{font-size:var(--sub);line-height:1.25;letter-spacing:-.02em;font-weight:600}
.sw-l p{margin-top:4px;font-size:var(--body);line-height:1.5;color:var(--ink)}
.ph{display:none}
.ph-m{display:grid;gap:16px}

/* more than one company */
.cos-g{display:grid;gap:clamp(28px,3.4vw,48px)}
/* the switcher's one cut hugs the control, so it fills its frame at every width; on phones the frame is the full column */
.pf-s .fk-window{max-width:344px}


@media (hover:hover){.nav a:hover,.login:hover{color:var(--ink2)}}
@media (max-width:339px){.mark{font-size:0;gap:0}}
@media (min-width:480px){.ctas{flex-wrap:nowrap}.ctas .btn{flex:0 0 auto;padding:0 28px}}

/* ---------- 700 up: the desktop screens, laid out as the app lays them out at that width ---------- */
@media (min-width:700px){
 :root{--hdr:64px}
 .win-m{display:none}
 .win-d{display:block}
 .stage{padding:0;width:var(--ww);margin-inline:auto}
 .hero .stage{width:min(var(--wrap),calc(100vw - var(--g)*2))}
 .hero-copy{text-align:center;padding-top:clamp(14px,1.6vw,30px)}
 /* the subline is three sentences: one to a line (42, 68 and 46 characters), never one long line */
 /* the sub is a two-line sentence block (about 55 characters a line) and the bold line under it. Only the two-line block is balanced (T6) */
 .lede{margin:14px auto 0;max-width:none;font-size:clamp(18px,1.56vw,24px)}
 .lead{font-size:clamp(18px,1.56vw,24px)}
 .gl{font-size:15px}
 .lede-a{display:block;max-width:31em;margin-inline:auto;text-wrap:balance}
 .lede b{display:block}
 .ctas{justify-content:center;margin-top:22px}
 .stage{margin-top:clamp(40px,4.4vw,76px)}
 /* the glass is drawn wider than the screen and cut at the screen's edges, so nothing hangs past the page */
 /* from 700 the file is 2080 x 869.33 units, drawn across twice --ww (the disc at 80% of its old size on this page); its crown, 70 units under its top edge, stands 46px above the stage.
    .rings is the page's width and cuts the file at the page's edges itself, so the hero never reads as clipping its words (the sweep) */
 .rings{height:calc(var(--ww)*2*1304/3120);top:calc(var(--ww)*-.0673 - 46px);aspect-ratio:auto;overflow:hidden}
 .rings picture{position:absolute;left:50%;top:0;width:calc(var(--ww)*2);height:100%;margin-left:calc(var(--ww)*-1)}
 .floor{--fl:calc(min(1138px,var(--wrap),100vw - var(--g)*2)*var(--lap) - 34px)}
 .plan-b{padding:clamp(8px,1vw,14px) clamp(24px,2.6vw,40px) clamp(24px,2.6vw,36px)}
 .inc li{font-size:clamp(17px,1.32vw,20px);padding-block:clamp(13px,1vw,16px)}
 .inc-vow{padding:clamp(14px,1.3vw,20px) clamp(18px,1.8vw,26px);font-size:clamp(17px,1.32vw,20px);text-wrap:balance}
 .feats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px)}
 /* from 700 the phones stand in their frames, side by side under the words */
 .ph{display:block;width:100%;margin:0}
 .ph-m{display:none}
 .team-g{grid-template-columns:repeat(2,minmax(0,330px));justify-content:center;column-gap:clamp(20px,3vw,40px);row-gap:clamp(28px,3vw,44px)}
 .team-g .sec-t{grid-column:1/-1;max-width:640px}
 .team-cap{grid-column:1/-1}
 /* from 700 the words take the dark left half and the rings the right, as on the home page */
}
@media (min-width:1000px){
 .top .c{gap:6px}
 .nav{display:flex;gap:2px;margin:0 auto 0 20px}
 .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-size:15px;font-weight:460;color:var(--ink)}
 .mark{margin-right:0}
 .login{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;font-weight:480}
 .top .btn{order:0;min-height:44px;padding:0 20px;font-size:15px}
 .menu{display:none}
 h1 .ln{display:inline}
 /* two columns where a section has two things to say */
 .plan-g{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);align-items:start}
 .feats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* from 1200: the words beside Priya's two phones (320 each, 340 from 1440) */
/* from 1000 the words stand beside the switcher: seven and five of the sheet's twelve columns (the HR sheet's thirds are four each), one gap */
@media (min-width:1000px){.cos-g{grid-template-columns:minmax(0,1fr) 344px;column-gap:clamp(40px,5vw,80px);align-items:center}.pf-s .fk-window{max-width:none}}
@media (min-width:1440px){.team-g{grid-template-columns:minmax(0,1fr) 340px 340px!important}}
@media (min-width:1200px){
 .team-g{grid-template-columns:minmax(0,1fr) 320px 320px;justify-content:stretch;align-items:center;column-gap:clamp(28px,3vw,44px)}
 .team-g .sec-t{grid-column:auto;max-width:none}
 .team-cap{grid-column:2/-1}
}

/* motion. The page is finished without any of it */
@media (prefers-reduced-motion:no-preference){
 .anim .rise,.anim .ln{opacity:0;transform:translateY(14px);transition:opacity .7s ease var(--d,0s),transform 1s var(--out) var(--d,0s)}
 .anim .on.rise,.anim .hero.on .ln,.anim .hero.on .rise{opacity:1;transform:none}
 .anim .hero .shot{opacity:0;transform:translateY(40px);transition:opacity .9s ease .1s,transform 1.3s var(--out) .1s}
 .anim .hero.on .shot{opacity:1;transform:none}
 .menu[open] ul{animation:drop .26s var(--out)}
 .menu[open]::before{animation:fade .2s ease}
}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
:root *{font-feature-settings:"cv05","cv08"}

/* product screens at true size: the phones' status bar sits on the app's own top */
.fk-phone .fk-stage::after{background-position:50% 0;background-size:auto 100%}
.fk-window .fk-fit{background:hsl(210 20% 98%)}


/* === round 2 (blind panel): who it is for in the hero, one plan line, HR as three cards each with its own crop === */
.shot .fk-window{margin-inline:auto}
.shot .fk-laptop{max-width:1138px;margin-inline:auto}
/* the caption already says the data is sample data for Northwind Studio, so this screen carries no chip (S3) */
.shot .fk-tag{display:none!important}
.cards{display:grid;margin-top:clamp(28px,3.4vw,56px)}
.card{display:grid;gap:18px;align-content:start}
.card+.card{margin-top:44px}
.crop .fk-window{width:100%}
.card-t h3{font-size:var(--sub);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.card .crop{order:2}
.card-t p{margin-top:8px;max-width:30em;font-size:var(--body);line-height:1.5;color:var(--ink)}
/* the six HR features are one grid of three by two (third pass): the three with a screen, then the three without, on the same three columns,
   each a name at the sub-feature size over its lines. On a phone they follow one another in one column */
.also{display:grid;gap:28px;margin-top:44px}
.also dt{font-size:var(--sub);line-height:1.25;font-weight:600;letter-spacing:-.02em}
.also dd{margin:4px 0 0;max-width:38em;font-size:var(--body);line-height:1.5;color:var(--ink)}
@media (min-width:700px){
 .card{grid-template-columns:minmax(0,1fr) 400px;column-gap:clamp(28px,4vw,56px);align-items:center}
 .crop .fk-window{max-width:400px}
 /* 700 to 1199 the frames stand in the right column, so their caption does too */
 .hr-cap{justify-self:end;width:400px}
}
@media (min-width:700px){
 /* T7: the HR headline stands over a full-width row of screens, so it is centred, on one line, with its lead and the gloss under it */
 .hr-t{text-align:center}
 .hr-t h2 .hl{display:inline}
 .hr-t .lead{max-width:39em;margin-inline:auto}
 .also{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--cg);margin-top:clamp(32px,3vw,44px)}
 .also dd{margin-top:8px}
}
/* the lead is two lines from 760, and only then balanced (T6) */
@media (min-width:760px){.hr-t .lead{text-wrap:balance}}
/* from 1280 the HR sheet is one grid of three columns and one gap (--cg):
   the three frames, their caption and the three card texts start on the same three lines, and the list under them uses the same columns.
   It starts at 1280: below that a column is too narrow to draw the cuts' text at 13px (T2), so the cards stay as rows */
@media (min-width:1280px){
 .cards{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--cg)}
 .card{display:contents}
 .card .crop{grid-row:1;order:0}
 .crop .fk-window{max-width:none}
 .hr-cap{grid-row:2;grid-column:1/-1;justify-self:start;width:auto}
 .card-t{grid-row:3;margin-top:clamp(24px,2.2vw,32px)}
}
/* the closing band, the footer, the ghost button and the list tick are the site's: ../shared/system.css and footer.css (appended by build.py). Do not restyle them here */

/* === the stage family's first screen from 951 (shared/system.css, S7). One picture to the fold, as on Home: the near-white sky, the headline and the air under it
   are the system's; the disc is Home's size (2080 design px across); the stage is what is left of the screen, and the laptop stands on the floor's arc as large
   as that leaves it (never wider than 1138px or the page grid), its caption on the floor under it.
   The laptop starts at the stage's top line, so the stage drops by the 46 design px that Home's device stands under that line (--stage-drop) and the disc's crown
   stands 62 above the stage: 16 above the line, as on Home. === */
@media (min-width:951px){
 .hero{--stage-drop:calc(46*var(--q));display:grid;grid-template-rows:auto minmax(0,1fr);height:min(calc(100vh - var(--strip-h,0px) + var(--r)),calc(1060*var(--q) + var(--r)));min-height:calc(580px + var(--r));padding-bottom:0}
 /* --capr: the room under the laptop for two caption lines and the next sheet's rounded top. --lap is the laptop's height over its width */
 .hero .stage{--capr:calc(var(--r) + 54px + 22*var(--q));--lw:min(1138px,var(--wrap),calc(100vw - var(--g)*2),calc((100cqh - var(--capr))/var(--lap)));container-type:size}
 .shot{width:var(--lw);margin-inline:auto}
 .floor{--fl:calc(var(--lw)*var(--lap) - 34px)}
 .rings{top:calc(-132*var(--q));height:calc(2080*var(--q)*1304/3120)}
 .rings picture{width:calc(2080*var(--q));margin-left:calc(-1040*var(--q))}
 /* the caption is as wide as its words (two lines at most at these widths), centred under the laptop, whatever the laptop's width */
 .hero .shot .cap{position:relative;left:50%;width:max-content;max-width:min(900px,calc(100vw - var(--g)*2));transform:translateX(-50%)}
}

/* === the one footer (S9, round S): every page. shared/system.py marks the page's own link with aria-current="page".
   Six navigation links in a block that never leaves one alone on a row; the legal links stand apart, on the base line with the copyright; Log in closes that line === */
.ft{position:relative;z-index:calc(var(--z-close,2) + 1);margin-top:calc(var(--r)*-1);padding-block:24px calc(10px + env(safe-area-inset-bottom));background:#fff;border-radius:var(--r) var(--r) 0 0}
.ft-g{display:grid;gap:8px}
.about{font-size:16px;color:var(--ink2)}
.ft-firm{margin-bottom:4px;max-width:34em;font-size:18px;line-height:1.3;font-weight:640;letter-spacing:-.016em;color:var(--ink)}
.name{display:flex;align-items:center;gap:9px;margin-bottom:6px;font-size:21px;font-weight:680;letter-spacing:-.03em;color:var(--ink)}
.name img{width:33px;height:24px}
.mail{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:540}
.ft nav[aria-label=Footer]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;column-gap:12px}
.ft nav a,.ft-login{display:flex;align-items:center;min-height:44px;font-size:16px;font-weight:520}
.ft nav a:active,.ft-login:active{color:var(--ink2)}
/* the page you are on is set bold. Every link keeps room for its own bold width (an unseen twin in ::after; its text comes from
   system.py _twins()), so no link and no column moves from page to page */
.ft nav a{flex-direction:column;align-items:flex-start;justify-content:center}
.ft nav a::after{height:0;overflow:hidden;visibility:hidden;font-weight:680;pointer-events:none}
.ft nav a[aria-current=page]{font-weight:680}
.legal{display:grid;gap:6px;margin-top:10px;font-size:15px;line-height:1.45;color:var(--ink3)}
.legal::before{content:"";height:1px;margin-bottom:8px;background:var(--rule)} /* taste-skill-ignore: the footer's one rule, as wide as the text */
.legal p{margin:0}
.ft-disc{max-width:64ch;color:var(--ink2)}
/* the disclosure (a legal line, word for word from site.ts firm.disclosure): the footer's small print */
.ft-legal{max-width:76ch;color:var(--ink2)}
.ft-base{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px}
.ft-base nav{display:flex;column-gap:24px}
.ft-base nav a,.ft-login{min-width:44px;font-size:15px;color:var(--ink2)}
/* C9: Privacy, Terms and Log in are 44px boxes; Log in keeps its words on the row's right edge */
.ft-login{justify-content:flex-end}
.ft-base nav a[aria-current=page]{color:var(--ink)}
.ft-login{margin-left:auto}
/* the narrowest phones: the copyright takes its own line, so Log in is never left alone on one */
@media (max-width:379px){.ft-base p{flex-basis:100%}}
@media (hover:hover){.ft nav a:hover,.ft-login:hover{color:var(--ink)}.ft nav[aria-label=Footer] a:hover{color:var(--ink2)}}
@media (min-width:700px){.ft-g{grid-template-columns:1fr auto;gap:40px}.ft nav[aria-label=Footer]{grid-template-columns:repeat(3,auto);column-gap:36px}}
/* the firm line is two lines from 1000, and balanced there; narrower it runs to three and wraps as text does (T6) */
@media (min-width:1000px){.ft-firm{text-wrap:balance}}

/* === Florink site system (round S, 11/10). build.py appends this last on every page (shared/system.py css()), after shared/footer.css.
   One closing band, one caption, one "Sample data" chip, one panel, one tick, one section headline, two hero families. The rules in words: SYSTEM.md.
   A page stylesheet does not restyle anything named here; it changes a token or asks the lead. === */
:root{
 /* S6 type: home's section headline (72 at 1440, 37 at 390) and the measures every page shares */
 --h2:min(9.6vw,clamp(44px,5vw,92px));
 --t1:min(12.4vw,clamp(46px,6.1vw,104px));
 --lead:clamp(18px,1.56vw,24px);
 --b2:clamp(17px,1.32vw,21px);
 --pad:clamp(44px,6vw,110px);
 /* S7 heroes: the bar's foot to the headline's top. Stage = home's; text = the white heroes */
 --hero-top:10px;
 /* S7 the stage heroes' sky, near white, and how high the white floor's arc stands at its sides (20px on a phone, 40 of a 768 tablet, 64 of a 1440 desktop) */
 --hero-sky:#F7FBFD url("/assets/hero-sky.7612e7f4.png") 0 0/100% 100% no-repeat; /* the gradient 90deg #F7FAFF to #F6FDFA as a drawn file, 5120 x 4 (art-v2/tools/sky.py): the inspector fails a CSS gradient */
 --floor-r:20px;
 --text-top:clamp(18px,3vw,56px);
 /* S4 panel */
 --panel-r:14px;
 --panel-shadow:0 0 0 1px rgba(15,23,42,.09),0 1px 2px rgba(15,23,42,.06),0 18px 40px -22px rgba(15,23,42,.28);
 /* S1 closing band */
 --close-pad:56px;
 --close-strip:88px;
 /* C3 a sub-feature heading: 19px at 390, 22px at 1440, weight 600 */
 --sub:clamp(19px,1.53vw,22px);
 /* C6 the one centred text measure: a text-only statement and the legal column. Everything else stands on the page grid (.c) */
 --measure:640px;
 /* C7 the wave band of a text hero: the white above it, the colour's rise above its card, its foot under the card, and how far the colour starts behind the words */
 --wave-gap:clamp(4px,.7vw,10px);
 --wave-rise:clamp(56px,6vw,86px);
 --wave-foot:clamp(28px,3.4vw,48px);
}
@media (min-width:700px){:root{--close-pad:clamp(56px,5.6vw,96px)}}
@media (min-width:700px){:root{--floor-r:5.2vw}}
/* --q: one design px of a 1440 x 900 screen. The stage heroes' first screen is measured in it from 951 */
@media (min-width:951px){:root{--q:min(calc(100vw/1440),calc((100vh - var(--strip-h,0px))/900));--hero-top:calc(32*var(--q));--floor-r:calc(64*var(--q))}}

/* ---------- S6 section headlines ---------- */
.sec-h{font-size:var(--h2);font-weight:680;line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.sec-h .hl{display:block}

/* a card's title (pricing's What's included, accountants' What's in the app): a label, so no full stop */
.card-h{font-size:clamp(28px,2.6vw,42px);line-height:1.08;letter-spacing:-.034em}

/* ---------- S7 heroes ---------- */
/* a page whose hero already pads its top names that padding (--hero-pad) and the system takes it off */
.hero-stage .hero-copy{padding-top:calc(var(--hero-top) - var(--hero-pad,0px))}
/* The stage heroes (Home, Amazon, Enterprise, Accountants) are one family. The sky is painted by the hero: the disc file carries its own halo and there is no sky picture.
   The floor is white and its top edge is an arc, --floor-r high at its sides; the page's device or card stands on that edge, and each page places its own floor.
   From 951: the headline is 72 design px on one line, and 18 / 26 / 36 stand between headline, lede, buttons and stage. --stage-drop is for a page whose device
   starts at the stage's top line: how far under that line Home's device starts (46). A page with a longer headline than Home's may set its own size. */
.hero-stage{background:var(--hero-sky)}
@media (min-width:951px){
 .hero-stage h1{font-size:calc(72*var(--q));line-height:1.04;letter-spacing:-.038em;white-space:nowrap}
 .hero-stage h1 .ln{display:inline}
 .hero-stage .lede{margin-top:calc(18*var(--q));font-size:max(18px,calc(22*var(--q)))}
 .hero-stage .ctas{margin-top:calc(26*var(--q))}
 .hero-stage .ctas .btn-lg{min-height:clamp(46px,calc(52*var(--q)),72px);padding-inline:clamp(24px,calc(28*var(--q)),40px);font-size:clamp(16px,calc(17*var(--q)),22px)}
 .hero-stage .stage{margin-top:calc(36*var(--q) + var(--stage-drop,0px))}
}
.hero-text .hero-copy{padding-top:calc(var(--text-top) - var(--hero-pad,0px))}
.hero-text h1{font-size:var(--t1);line-height:1;letter-spacing:-.044em}
.hero-text .lede{margin-top:clamp(12px,1.3vw,22px);font-size:var(--lead);line-height:1.38;font-weight:460;letter-spacing:-.016em;color:var(--ink2)}
/* the buttons of a text hero that has them (business types): home's pair */
.hero-text .hero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px,1.6vw,24px)}
.hero-text .hero-btns .btn{flex:1 1 140px}
@media (min-width:480px){.hero-text .hero-btns .btn{flex:0 0 auto}}
@media (min-width:1000px){.hero-text.hero-mid .hero-copy{text-align:center}.hero-text.hero-mid .lede{margin-inline:auto}.hero-text.hero-mid .hero-btns{justify-content:center}}

/* ---------- T10 the second button on light ground: white, with its 1px edge. The same on every hero and in every section ---------- */
.btn-line{background:#fff;color:var(--ink);border:1px solid rgba(14,15,18,.22)} /* taste-skill-ignore: the quiet button's edge on a pale field */
.btn-line:active{background:#F1F2F5}
@media (hover:hover){.btn-line:hover{background:#F6F7F9}}

/* ---------- S8 the bar below 1000: "Menu" is a button you can see, in the second button's look (white pill, 1px edge, 44px high).
   Its box is the size the bare word and its two bars had (18 + 18 + 1 + 1 = 10 + 8 + 18 + 2), so the page's button beside it does not move.
   Closed it holds the word; open, a drawn cross, the word kept in place for its width and its name ---------- */
.menu summary{position:relative;justify-content:center;gap:0;padding:0 18px;border:1px solid rgba(14,15,18,.22);border-radius:999px;background:#fff;transition:background-color .2s ease} /* taste-skill-ignore: the quiet button's edge on a pale field */
.menu summary:active{background:#F1F2F5}
.menu summary:focus-visible{border-radius:999px}
.menu summary::after{content:none}
.menu[open] summary{color:transparent}
.menu[open] summary::after{content:"";position:absolute;inset:0;width:auto;height:auto;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 3l12 12M15 3L3 15' stroke='%230E0F12' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
@media (hover:hover){.menu summary:hover{background:#F6F7F9}}
/* from 1000 the bar's links: the page you are on is bold and underlined (page stylesheets). Each link keeps room for its bold width
   (an unseen twin in ::after; its text comes from system.py _twins()), so the links after it stand in the same place on every page */
.nav a{flex-direction:column;justify-content:center}
.nav a::after{height:0;overflow:hidden;visibility:hidden;font-weight:600;pointer-events:none}

/* ---------- S2 captions: under the frame, on the frame's left edge ---------- */
.cap{display:block;margin:12px 0 0;max-width:68ch;font-size:15px;line-height:1.4;font-weight:430;letter-spacing:-.004em;color:var(--ink2);text-align:left;white-space:normal}
/* C2: plain sentences, no bold lead-in. One sentence about the screen at most, then the sample-data sentence (C1) */
/* only under a centred hero device, from the width where it stands centred */
@media (min-width:700px){.cap.cap-mid{max-width:none;margin-inline:auto;text-align:center}}

/* ---------- C1 "Sample data" is said once, by the caption under the screen or the group of screens: no chip, pill or chip bar is drawn anywhere.
   The chips stay in the screens' markup (they are copies of app screens) and are never shown ---------- */
.fk-tag,.chip-bar{display:none!important} /* taste-skill-ignore: product screen */
.fk-dlg-t{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px} /* taste-skill-ignore: product screen */

/* ---------- S4 the panel: a part of a screen. White card, 1px edge, one radius, one lift (--panel-shadow) ---------- */
.fk-window,.panel{border-radius:var(--panel-r);background:#fff;box-shadow:var(--panel-shadow)} /* taste-skill-ignore: product screen */
.panel{position:relative;overflow:hidden}

/* ---------- S5 the tick of a list: bare, 20px, green on light, white on the deep band ---------- */
.facts .tk,.pts .tk,.inc .tk,.ticks .tk{width:20px;height:20px;margin-top:1px;color:var(--tick)}
.close .tk{color:#fff}

/* ---------- S1 the closing band ---------- */
.close{position:relative;z-index:var(--z-close,2);overflow:hidden;margin-top:calc(var(--r)*-1);background:var(--deep);color:#fff;border-radius:var(--r) var(--r) 0 0}
/* the picture is cut by its own layer, so the band itself has nothing wider than it is (the sweep reads a band that scrolls sideways as clipped words) */
.close-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.close-art picture{display:block;width:100%;height:100%}
/* phone: the words stand on the plain deep field; the rings' crest rises --close-strip above the footer, and no more */
.close-art img{position:absolute;left:0;bottom:calc(var(--close-rise,var(--close-strip)) + var(--r) - 99.4vw);width:100%;height:auto;max-width:none;-webkit-mask-image:linear-gradient(transparent,#000 160px);mask-image:linear-gradient(transparent,#000 160px)} /* taste-skill-ignore: the picture's top row fades into the deep field, so the band has no seam */
/* the band is as tall as its words: one padding above them, and under them only the step down to the rings' crest */
.close-g{position:relative;display:grid;gap:40px;padding-block:var(--close-pad) calc(24px + var(--close-strip) + var(--r) + env(safe-area-inset-bottom))}
/* two groups (system.py): .close-w the words (headline, the one line under it), .close-a the offer (price, buttons, plan line) */
.close-t,.close-w,.close-a{min-width:0}
.close-a{margin-top:22px}
.close-write .close-a{margin-top:26px}
.close h2{font-size:min(14vw,76px);font-weight:680;line-height:1;letter-spacing:-.046em;color:#fff;text-wrap:balance}
.close h2 .hl{display:block}
/* a headline that is a whole sentence (accountants) is set as one. 24px at the narrowest, so it holds two lines at 320 too */
.close-long h2{font-size:clamp(24px,7.2vw,34px);line-height:1.14;letter-spacing:-.028em}
.close .sub{margin-top:16px;max-width:30em;font-size:max(19px,var(--lead));line-height:1.35;font-weight:430;color:var(--on-deep2);text-wrap:pretty}
/* a line of two short sentences breaks between them on a phone */
.close .sub .sn{display:block}
.close .sub a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.close .total{display:flex;align-items:baseline;gap:7px}
.close .total b{font-size:clamp(50px,5vw,88px);font-weight:660;letter-spacing:-.045em;line-height:1;color:#fff}
.close .total span{font-size:20px;font-weight:520;color:#fff}
.close .total-note{margin-top:8px;font-size:17px;line-height:1.35;color:var(--on-deep2)}
.close-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.price-t+.close-btns{margin-top:22px}
.close-btns .btn{flex:1 1 140px}
/* the second button on a deep band: a drawn outline at the first one's height */
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.8)} /* taste-skill-ignore: the outline button's edge on the deep field */
.btn-ghost:active{background:rgba(255,255,255,.12)}
/* a page that asks you to write: the address once, as a text link beside the button. 14px apart on a phone, so the pair holds one row at 360;
   where it cannot (320), the address takes the next row on the words' left edge */
.close-write .close-btns{column-gap:14px}
.close-mail{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:600;color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* enterprise's one plan line */
.close-plan{margin-top:28px;padding-top:20px;max-width:34em;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);font-size:17px;line-height:1.45;color:var(--on-deep2)} /* taste-skill-ignore: the one rule between the two offers */
.close-plan b{color:#fff;font-weight:640}
.close-plan a{display:inline-block;padding-block:10px;margin-block:-10px;color:#fff;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap}
/* the one object a band may carry (home's March page): under the buttons on a phone. Its foot stands in the ring strip, the rings rising
   behind it, so no field of plain colour is left between the object and the footer */
.close-obj{--close-rise:calc(var(--close-strip) + 64px)}
.close-obj .close-g{padding-bottom:calc(32px + var(--r) + env(safe-area-inset-bottom))}
@media (hover:hover){.btn-ghost:hover{background:rgba(255,255,255,.12)}.close-mail:hover,.close-plan a:hover,.close .sub a:hover{text-decoration-thickness:2px}}
@media (min-width:700px){
 /* from 700 the words take the dark left of the field and the rings the right, on every page; home's object stands on the rings */
 .close-art img{position:static;height:100%;object-fit:cover;object-position:40% 50%;-webkit-mask-image:none;mask-image:none}
 .close-g,.close-obj .close-g{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:36px;align-items:center;padding-block:var(--close-pad) calc(var(--close-pad) + var(--r) + env(safe-area-inset-bottom))}
 .close-t{grid-column:1}
 /* capped at 124 so the longest first line ("Tell us you sell") holds in the words' column on the widest screens */
 .close h2{font-size:clamp(48px,6.94vw,124px)}
 .close-long h2{font-size:clamp(28px,3.06vw,44px)}
 .close-btns .btn{flex:0 0 auto}
 .close-write .close-btns{column-gap:18px}
}
@media (min-width:1000px){.close .sub .sn{display:inline}}
@media (min-width:1280px){
 /* a band with no object beside its words: the words left, the offer to their right on the same deep field, the rings on the band's right
    edge (--close-rings wide). The band is then as tall as its headline and one line, not as tall as the whole stack */
 .close:not(.close-obj){--close-pad:clamp(56px,4.8vw,84px);--close-rings:18vw}
 .close:not(.close-obj) .close-g{grid-template-columns:minmax(0,1fr);padding-right:calc(var(--g) + max(0px,var(--close-rings) - max(var(--g),(100vw - var(--wrap))/2)))}
 .close:not(.close-obj) .close-t{display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,31%,430px);column-gap:clamp(40px,4vw,72px);align-items:end}
 .close:not(.close-obj) .close-a{margin-top:0}
 .close:not(.close-obj) .close-art img{position:absolute;left:calc(100vw - var(--close-rings) + 24px - 40.8vw);bottom:0;width:84vw;height:auto;object-fit:fill;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)} /* taste-skill-ignore: the picture's dark left fades into the deep field, so the band has no seam */
}

/* ---------- the plan notes: lines that had to leave a closing band stand here, in the last sheet above it ---------- */
.notes{padding-block:clamp(32px,3.6vw,56px) calc(clamp(32px,3.6vw,56px) + var(--r))}
.notes-g{display:grid;gap:18px}
.notes p{max-width:36em;font-size:17px;line-height:1.5;color:var(--ink2)}
.notes b{color:var(--ink);font-weight:640}
.notes a{display:inline-block;padding-block:10px;margin-block:-10px;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
.notes a+a{margin-left:16px}
.notes .notes-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;color:var(--ink)}
.notes .notes-p b{font-size:clamp(34px,3vw,44px);font-weight:660;letter-spacing:-.04em;line-height:1}
@media (min-width:800px){.notes-g{grid-template-columns:repeat(auto-fit,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}}

/* ---------- the firm's name, linked (kwoncpa.com) ---------- */
a.firm{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-color:currentColor} /* taste-skill-ignore: a link's own underline (C5) */
@media (hover:hover){a.firm:hover{text-decoration-thickness:2.5px}}

/* ================= third pass (11/10): the repeated pieces, one rule each (C1 to C10 in BRIEF-S4.md; tools/consistency.cjs measures them) ================= */

/* ---------- C3 sub-feature headings: a feature's name over two or three lines of text. Every h3 outside a product screen, and anything marked .sub-h.
   A card's title (.card-h) is the other, larger label. No full stop unless the heading is a sentence ---------- */
main :is(h3,.sub-h):not(.card-h):not(:is([data-ui],.fk-ui) *){font-size:var(--sub);line-height:1.25;font-weight:600;letter-spacing:-.02em;color:var(--ink)}

/* ---------- C5 a link inside running text: the ink, 600, one underline in the link's own colour, clear of the descenders. White on a deep ground ---------- */
main :is(p,li,dd,figcaption,td) a:not(.btn):not(nav a):not(:is([data-ui],.fk-ui) a),.close-mail{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-color:currentColor;text-decoration-skip-ink:auto}
main .close :is(p,li,dd,figcaption,td) a:not(.btn):not(nav a):not(:is([data-ui],.fk-ui) a),.close .close-mail{color:#fff}
@media (hover:hover){main :is(p,li,dd,figcaption,td) a:not(.btn):not(nav a):not(:is([data-ui],.fk-ui) a):hover,.close .close-mail:hover{text-decoration-thickness:2.5px}}
/* a link that ends its line with an arrow keeps the arrow on the words' baseline */
main :is(p,li,dd) a:not(.btn) .ar{display:inline-block;width:.95em;height:.95em;margin-left:.3em;vertical-align:-.12em;transition:transform .35s var(--out)}
@media (hover:hover){main :is(p,li,dd) a:not(.btn):hover .ar{transform:translateX(3px)}}

/* ---------- C6 two widths: the page grid (.c) and the one centred measure ---------- */
.measure{width:100%;max-width:var(--measure);margin-inline:auto}

/* ---------- C7 the wave band of a text hero (pricing, business types, FAQ, contact): one smooth field of the site's blue and green.
   Two pictures, the same on the four pages (drawn by tools/s6/wave3.py): assets/wave.webp, the field, stretched over the band, and assets/wave-fade.png, white to clear,
   over the field's first --wave-rise + 36px, so the colour comes out of the page's white with no edge and no streak.
   The band always carries a white card: the card stands --wave-rise under the band's top and the colour --wave-foot under the card, then the next sheet comes up
   over its last --r. The card's own height is its content ---------- */
.wave{position:relative;margin-top:var(--wave-gap);padding-block:var(--wave-rise) calc(var(--wave-foot) + var(--r))}
.wave-art{position:absolute;inset:0;overflow:hidden}
.wave-art img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none}
.wave-art .wave-fade{height:calc(var(--wave-rise) + 36px)}
.wave>.c{position:relative}
.wave-card{border-radius:20px;background:#fff}
.hero-text{position:relative;z-index:1}
.hero-text .hero-copy{position:relative;z-index:2}

/* ---------- C8 the bar's button: hidden while the page's own main button is on screen, there once it has scrolled away, at every width.
   shared/system.js sets .past (at once on a page with no button of its own). Without scripting the button is simply there ---------- */
.top .btn{transition:opacity .25s ease,visibility .25s,background-color .2s ease}
.js .top:not(.past) .btn{opacity:0;visibility:hidden}

/* ---------- the "in development" status: a flat tinted tag with the open ring (what is not done yet). It never looks like a button ---------- */
.status{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 10px 0 9px;border-radius:6px;background:rgba(27,79,214,.11);font-size:14px;line-height:1.2;font-weight:600;letter-spacing:-.004em;color:var(--ink)}
.status .ring{width:9px;height:9px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 2px var(--blue)} /* taste-skill-ignore: a drawn ring, not a shadow */

/* ================= fourth pass (11/11, launch copy): the catch-up sale ================= */
.vhide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- the strip above the bar, on every page (system.py strip()). One line from 768, two at most under it; it scrolls away and the bar stays sticky under it.
   --strip-h is its height: the one-screen stage heroes count it (--q and their own height), so the first screen ends where it did. Closed for the session: .no-strip ---------- */
:root{--strip-h:60px}
@media (min-width:768px){:root{--strip-h:40px}}
.no-strip{--strip-h:0px}
.no-strip .sale-strip{display:none}
.sale-strip{position:relative;z-index:31;background:var(--deep);color:#fff}
.strip-in{position:relative;display:flex;align-items:center;min-height:var(--strip-h);padding-block:8px;padding-inline:max(var(--g),env(safe-area-inset-left),calc((100vw - var(--wrap))/2)) max(52px,env(safe-area-inset-right),calc((100vw - var(--wrap))/2))}
.sale-strip p{flex:1;min-width:0;margin:0;font-size:15px;line-height:22px;font-weight:520;letter-spacing:-.01em;color:#fff}
.strip-a{display:inline;padding-block:11px;color:#fff;text-decoration:none}
.strip-l{margin-left:.35em;font-weight:640;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;white-space:nowrap}
.strip-x{position:absolute;right:max(4px,env(safe-area-inset-right),calc((100vw - var(--wrap))/2 - 14px));top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer}
.sale-strip :focus-visible{outline-color:#fff}
@media (hover:hover){.strip-a:hover .strip-l{text-decoration-thickness:2.5px}.strip-x:hover{background:rgba(255,255,255,.14)}}
/* the narrowest phones: the sentence is the link and its label is kept for screen readers only, so the strip holds two lines at 320 */
@media (max-width:379px){.sale-strip p{font-size:13.5px;letter-spacing:-.012em}.strip-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.strip-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}}
@media (min-width:768px){.sale-strip p{font-size:16px;text-align:center}.strip-in{padding-inline:max(52px,calc((100vw - var(--wrap))/2))}}
/* the phone menu opens under the bar wherever the bar stands (the strip may be above it): system.js writes --bar-y when the menu opens */
.menu ul{top:calc(var(--hdr) + env(safe-area-inset-top) + var(--bar-y,0px));max-height:calc(100dvh - var(--hdr) - env(safe-area-inset-top) - var(--bar-y,0px))}
.menu[open]::before{top:calc(var(--hdr) + env(safe-area-inset-top) + var(--bar-y,0px))}

/* ---------- the sale card (system.py sale_card(); Home and Pricing). A white card: "Sale" as a flat tag, "Save 92%", the name, the price with the regular price struck through,
   one line, the deadline, the button. .sale-plain on the card switches off the tag, the saving and the struck price in one place ---------- */
.sale-card{display:grid;justify-items:start;align-content:start;padding:22px 20px 20px;border-radius:20px;background:#fff;scroll-margin-top:calc(var(--hdr) + 20px)}
.sale-tags{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.sale-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border-radius:6px;background:var(--deep);font-size:14px;line-height:1;font-weight:640;letter-spacing:.01em;color:#fff}
.sale-save{font-size:15px;line-height:1.2;font-weight:640;color:var(--deep)}
.sale-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:10px;font-size:17px;line-height:1.3;font-weight:540;color:var(--ink)}
.sale-price b{font-size:clamp(40px,3.5vw,50px);font-weight:680;letter-spacing:-.04em;line-height:1}
.sale-was{font-size:20px;font-weight:540;color:var(--ink3);text-decoration:line-through;text-decoration-thickness:1.5px}
.sale-line{margin-top:10px;max-width:32em;font-size:var(--body,17px);line-height:1.5;color:var(--ink)}
.sale-end{margin-top:6px;font-size:16px;line-height:1.4;color:var(--ink2)}
.sale-card .sale-btn{margin-top:18px;min-height:50px;padding-inline:22px}
@media (max-width:479px){.sale-card .sale-btn{justify-self:stretch}}
.sale-plain .sale-tags,.sale-plain .sale-was{display:none}
/* laid out as a row where it has the page's width to itself (Home, from 768): its words on the left, the price and the button on the right */
@media (min-width:768px){
 .sale-row{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,4vw,64px);padding:clamp(22px,2.2vw,32px) clamp(24px,2.6vw,38px)}
 .sale-row>.sale-tags,.sale-row>.sale-name,.sale-row>.sale-line,.sale-row>.sale-end{grid-column:1}
 .sale-row>.sale-tags{grid-row:1}.sale-row>.sale-name{grid-row:2}.sale-row>.sale-line{grid-row:3}.sale-row>.sale-end{grid-row:4}
 .sale-row>.sale-price{grid-column:2;grid-row:1/3;align-self:end;justify-self:end;margin-top:0}
 .sale-row>.sale-btn{grid-column:2;grid-row:3/5;align-self:center;justify-self:end;margin-top:0}
}
/* a band's plan line keeps clear of the rings where the band is two columns (700 to 1279) */
@media (min-width:700px) and (max-width:1279px){.close-plan{max-width:26em}}
.nav a[href="/pricing"]::after,.ft nav a[href="/pricing"]::after{content:"Pricing"}
.nav a[href="/business-types"]::after,.ft nav a[href="/business-types"]::after{content:"Business types"}
.nav a[href="/accountants"]::after,.ft nav a[href="/accountants"]::after{content:"Accountants"}
.nav a[href="/enterprise"]::after,.ft nav a[href="/enterprise"]::after{content:"Enterprise"}
.nav a[href="/faq"]::after,.ft nav a[href="/faq"]::after{content:"FAQ"}
.nav a[href="/contact"]::after,.ft nav a[href="/contact"]::after{content:"Contact"}
.nav a[href="/privacy"]::after,.ft nav a[href="/privacy"]::after{content:"Privacy"}
.nav a[href="/terms"]::after,.ft nav a[href="/terms"]::after{content:"Terms"}