.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 staff app, apps/accounting on origin/main: tokens are the apple-blue skin of apps/accounting/app/globals.css. */
/* Sizes are the Tailwind classes of each component (text-sm 14/20, text-xs 12/16, p-4 16, rounded-lg = --radius 12). */
/* The app sets Inter, and a monospace face for amounts; the site shows both in Pretendard Std with tabular figures. Every comment here is one line: build.py tags each line. */
.fs-ui{--background:0 0% 100%;--foreground:222 47% 11%;--card:0 0% 100%;--primary:211 100% 50%;--secondary:0 0% 96%;--muted:210 20% 96%;--muted-foreground:215 16% 47%;--border:214 20% 88%;--success:142 76% 36%;--warning:38 92% 50%;--destructive:0 84.2% 60.2%;--radius:12px; /* taste-skill-ignore: product screen */
 font-family:"Pretendard Std",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:16px;line-height:1.5;font-weight:400;letter-spacing:0;text-align:left;color:hsl(var(--foreground));background:hsl(var(--background));font-feature-settings:"cv05","cv08";-webkit-font-smoothing:antialiased} /* taste-skill-ignore: product screen */
.fs-ui *,.fs-ui *::before,.fs-ui *::after{box-sizing:border-box} /* taste-skill-ignore: product screen */
:where(.fs-ui) :where(div,span,p,h3,h4,table,td,th,tr,tbody,thead){margin:0;padding:0;border:0} /* taste-skill-ignore: product screen */
:where(.fs-ui) :where(table){border-collapse:collapse;border-spacing:0} /* taste-skill-ignore: product screen */
.fk-fit:has(.fs-ui){background:#fff} /* taste-skill-ignore: product screen */
.fs-i{display:block;flex:none} /* taste-skill-ignore: product screen */
.fs-o5{opacity:.5} /* taste-skill-ignore: product screen */
.fs-num,.fs-mono{font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fs-xs{font-size:12px;line-height:16px} /* taste-skill-ignore: product screen */
.fs-mu{color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-fm{font-weight:500} /* taste-skill-ignore: product screen */
.fs-sb{font-weight:600} /* taste-skill-ignore: product screen */
.fs-r{text-align:right} /* taste-skill-ignore: product screen */
.fs-c{text-align:center} /* taste-skill-ignore: product screen */
.fs-l{text-align:left} /* taste-skill-ignore: product screen */
.fs-cap{text-transform:capitalize} /* taste-skill-ignore: product screen */
.fs-gr{color:hsl(var(--success))} /* taste-skill-ignore: product screen */
.fs-wa{color:hsl(var(--warning))} /* taste-skill-ignore: product screen */
/* the sample tag stays 12.5px on the page however far a screen is scaled (as the kit's tags do) */
.fs-tag{margin-left:8px;vertical-align:middle;font-size:max(12.5px,calc(12.5px/var(--fk-s,1)));height:max(22px,calc(22px/var(--fk-s,1)));padding:0 max(9px,calc(9px/var(--fk-s,1)))} /* taste-skill-ignore: product screen */
.fs-page{padding:24px;display:flex;flex-direction:column;gap:16px} /* taste-skill-ignore: product screen */
.fs-card{border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));box-shadow:0 1px 2px 0 rgb(0 0 0/.05)} /* taste-skill-ignore: product screen */
.fs-panel{border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card));box-shadow:0 1px 2px 0 rgb(0 0 0/.05)} /* taste-skill-ignore: product screen */
.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:0;white-space:nowrap;border-radius:var(--radius);font-size:14px;line-height:20px;font-weight:500;height:40px;padding:0 16px} /* taste-skill-ignore: product screen */
.fs-btn .fs-i{margin-right:8px} /* taste-skill-ignore: product screen */
.fs-btn.fs-sm{height:36px;padding:0 12px;border-radius:calc(var(--radius) - 2px)} /* taste-skill-ignore: product screen */
.fs-bt-o{border:1px solid hsl(var(--border));background:hsl(var(--background))} /* taste-skill-ignore: product screen */
.fs-bt-p{background:hsl(var(--primary));color:#fff} /* taste-skill-ignore: product screen */
.fs-gh{background:none} /* taste-skill-ignore: product screen */
.fs-gh .fs-i{margin-right:4px} /* taste-skill-ignore: product screen */
.fs-sel{display:inline-flex;align-items:center;justify-content:space-between;height:40px;padding:0 12px;border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);background:hsl(var(--background));font-size:14px;line-height:20px} /* taste-skill-ignore: product screen */
.fs-w120{width:120px} /* taste-skill-ignore: product screen */
.fs-badge{display:inline-flex;align-items:center;border-radius:999px;border:1px solid transparent;padding:2px 10px;font-size:12px;line-height:16px;font-weight:600;white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-b2{background:hsl(var(--secondary));color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fs-bo{border-color:hsl(var(--border));color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fs-ok{background:hsl(var(--success)/.1);color:hsl(var(--success))} /* taste-skill-ignore: product screen */
.fs-ib{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius)} /* taste-skill-ignore: product screen */
.fs-ib7{width:28px;height:28px} /* taste-skill-ignore: product screen */
.fs-acts{display:flex;justify-content:flex-end;gap:4px} /* taste-skill-ignore: product screen */
.fs-tw{position:relative;width:100%;overflow:hidden} /* taste-skill-ignore: product screen */
.fs-hrow{display:flex;align-items:center;justify-content:space-between;gap:12px} /* taste-skill-ignore: product screen */
.fs-ctl{display:flex;align-items:center;gap:8px} /* taste-skill-ignore: product screen */

/* Tax Package (Schedule M-1) */
.fs-h2{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.025em} /* taste-skill-ignore: product screen */
.fs-sub{font-size:14px;line-height:20px;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-k3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} /* taste-skill-ignore: product screen */
.fs-kc{padding:0} /* taste-skill-ignore: product screen */
.fs-kt{padding:16px 16px 8px;font-size:14px;line-height:1;font-weight:600;letter-spacing:-.025em;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-kv{padding:0 16px 16px;font-size:24px;line-height:32px;font-weight:600} /* taste-skill-ignore: product screen */
.fs-cth{padding:16px;font-size:16px;line-height:1;font-weight:600;letter-spacing:-.025em} /* taste-skill-ignore: product screen */
.fs-tbl{width:100%;font-size:14px;line-height:20px} /* taste-skill-ignore: product screen */
.fs-m1t th{height:48px;padding:0 16px;text-align:left;vertical-align:middle;font-weight:500;color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-m1t th.fs-c{text-align:center}.fs-m1t th.fs-r{text-align:right} /* taste-skill-ignore: product screen */
.fs-m1t td{padding:16px;vertical-align:middle;border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-m1t tr:last-child td{border-bottom:0} /* taste-skill-ignore: product screen */
.fs-m1t td:last-child{padding-block:6px} /* taste-skill-ignore: product screen */
.fs-w56{width:56px} /* taste-skill-ignore: product screen */
.fs-m40 td{background:hsl(var(--muted)/.4)} /* taste-skill-ignore: product screen */
.fs-grp{background:hsl(var(--muted)/.2);font-weight:600;font-style:italic} /* taste-skill-ignore: product screen */

/* Account Reconciliation Detail */
.fs-hl{display:flex;align-items:center;gap:16px} /* taste-skill-ignore: product screen */
.fs-hl .fs-tag{margin-left:-6px} /* taste-skill-ignore: product screen */
.fs-h1x{font-size:20px;line-height:28px;font-weight:700} /* taste-skill-ignore: product screen */
.fs-rec{gap:24px} /* taste-skill-ignore: product screen */
.fs-mosel{display:flex;flex-wrap:wrap;gap:8px;padding:16px} /* taste-skill-ignore: product screen */
.fs-mosel .fs-badge{margin-left:8px} /* taste-skill-ignore: product screen */
.fs-mosel .fs-bt-p .fs-badge{background:#fff} /* taste-skill-ignore: product screen */
.fs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} /* taste-skill-ignore: product screen */
.fs-stat{padding:16px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card));box-shadow:0 1px 2px 0 rgb(0 0 0/.05)} /* taste-skill-ignore: product screen */
.fs-st-l{font-size:14px;line-height:20px;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-st-v{margin-top:4px;font-size:18px;line-height:28px;font-weight:700} /* taste-skill-ignore: product screen */
.fs-mt{padding:16px;display:flex;flex-direction:column;gap:12px} /* taste-skill-ignore: product screen */
.fs-h4{display:flex;align-items:center;gap:8px;font-size:16px;line-height:24px;font-weight:600} /* taste-skill-ignore: product screen */
.fs-sm-t th{padding:4px 8px;text-align:left;font-size:12px;line-height:16px;font-weight:500;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-sm-t th.fs-r{text-align:right} /* taste-skill-ignore: product screen */
.fs-sm-t td{padding:6px 8px;font-size:12px;line-height:16px;border-top:1px solid hsl(var(--border));white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-sm-t .fs-badge{font-size:12px} /* taste-skill-ignore: product screen */

/* Fixed assets to GL reconciliation */
.fs-glp{padding:20px} /* taste-skill-ignore: product screen */
.fs-glh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px} /* taste-skill-ignore: product screen */
.fs-h4s{font-size:14px;line-height:20px;font-weight:600} /* taste-skill-ignore: product screen */
.fs-h4s .fs-tag{margin-left:6px} /* taste-skill-ignore: product screen */
.fs-glh p{margin-top:2px;max-width:520px} /* taste-skill-ignore: product screen */
.fs-glh .fs-btn .fs-i{margin-right:6px} /* taste-skill-ignore: product screen */
.fs-okbar{margin-bottom:12px;padding:8px 12px;border-radius:10px;background:hsl(var(--success)/.1);color:hsl(var(--success));font-size:14px;line-height:20px;font-weight:500} /* taste-skill-ignore: product screen */
.fs-glt{min-width:640px} /* taste-skill-ignore: product screen */
.fs-glt th{padding:8px 12px 8px 0;text-align:left;font-size:12px;line-height:16px;font-weight:500;color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-glt th.fs-r{text-align:right} /* taste-skill-ignore: product screen */
.fs-glt td{padding:8px 12px 8px 0;border-bottom:1px solid hsl(var(--border)/.5)} /* taste-skill-ignore: product screen */
.fs-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:16px;font-weight:500} /* taste-skill-ignore: product screen */

/* Fixed Assets, Depreciation tab */
.fs-fa{gap:16px} /* taste-skill-ignore: product screen */
.fs-tabs{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-tabl{display:flex;gap:4px} /* taste-skill-ignore: product screen */
.fs-tab{padding:10px 16px;font-size:14px;line-height:20px;font-weight:500;color:hsl(var(--muted-foreground));border-bottom:2px solid transparent;margin-bottom:-1px} /* taste-skill-ignore: product screen */
.fs-tab-on{border-color:hsl(var(--primary));color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fs-sc3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} /* taste-skill-ignore: product screen */
.fs-sct{padding:24px 24px 8px;font-size:14px;line-height:1;font-weight:600;letter-spacing:-.025em;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-scv{padding:0 24px 24px;font-size:20px;line-height:28px;font-weight:700} /* taste-skill-ignore: product screen */
.fs-dtl{margin-left:8px;font-size:14px;font-weight:400} /* taste-skill-ignore: product screen */
.fs-ovh{overflow:hidden} /* taste-skill-ignore: product screen */
.fs-bt th{padding:12px;font-weight:500;background:hsl(var(--muted)/.5);border-bottom:1px solid hsl(var(--border));white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-bt td{padding:12px;border-bottom:1px solid hsl(var(--border));white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-bt .fs-tot td{background:hsl(var(--muted)/.5);font-weight:500;border-bottom:0} /* taste-skill-ignore: product screen */
.fs-bt td:last-child{padding-block:4px} /* taste-skill-ignore: product screen */

/* Trial Balance */
.fs-tbp{padding:24px} /* taste-skill-ignore: product screen */
.fs-rep{max-width:896px;margin-inline:auto;width:100%;padding:32px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card));box-shadow:0 1px 2px 0 rgb(0 0 0/.05)} /* taste-skill-ignore: product screen */
.fs-reph{margin-bottom:24px;text-align:center} /* taste-skill-ignore: product screen */
.fs-rn{font-size:20px;line-height:28px;font-weight:700} /* taste-skill-ignore: product screen */
.fs-rt{margin-top:4px;font-size:18px;line-height:28px;font-weight:600} /* taste-skill-ignore: product screen */
.fs-rdate{margin-top:4px;font-size:14px;line-height:20px;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-rtag{margin-top:8px} /* taste-skill-ignore: product screen */
.fs-rtag .fs-tag{margin-left:0} /* taste-skill-ignore: product screen */
.fs-tbx{width:100%;min-width:480px} /* taste-skill-ignore: product screen */
.fs-tbx thead tr{border-bottom:2px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-tbx th{padding:8px 16px 8px 0;text-align:left;font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-tbx th+th{width:144px;padding:8px;text-align:right} /* taste-skill-ignore: product screen */
.fs-tbs td{padding:8px;background:hsl(var(--muted));font-size:14px;line-height:20px;font-weight:700;text-transform:uppercase;letter-spacing:.025em} /* taste-skill-ignore: product screen */
.fs-acc{padding:4px 16px;font-size:14px;line-height:20px} /* taste-skill-ignore: product screen */
.fs-code{margin-right:8px} /* taste-skill-ignore: product screen */
.fs-amt{padding:4px 8px;text-align:right;font-size:14px;line-height:20px;font-variant-numeric:tabular-nums;white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-tbt td{padding:10px 16px 10px 0;background:hsl(var(--muted));font-size:14px;line-height:20px;font-weight:700;border-top:2px solid hsl(var(--foreground));border-bottom:3px solid hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fs-tbt td.fs-amt{padding:10px 8px} /* taste-skill-ignore: product screen */
.fs-notes{margin-top:24px;padding-top:12px;border-top:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:16px;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */

/* phone layouts: the app below its md breakpoint */
.fs-ph .fs-page{padding:16px} /* taste-skill-ignore: product screen */
.fs-ph .fs-hrow{flex-direction:column;align-items:flex-start} /* taste-skill-ignore: product screen */
.fs-ph .fs-k3,.fs-ph .fs-sc3{grid-template-columns:minmax(0,1fr)} /* taste-skill-ignore: product screen */
.fs-ph .fs-stats{grid-template-columns:repeat(2,minmax(0,1fr))} /* taste-skill-ignore: product screen */
.fs-ph .fs-rep{padding:16px} /* taste-skill-ignore: product screen */
.fs-ph .fs-rec{gap:24px} /* taste-skill-ignore: product screen */
.fs-ph .fs-tw::after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;background:linear-gradient(90deg,hsl(0 0% 100%/0),hsl(0 0% 100%))} /* taste-skill-ignore: product screen */
.fs-ph .fs-tabs{flex-wrap:wrap} /* taste-skill-ignore: product screen */
.fs-ph .fs-tabl{overflow:hidden;flex:none;max-width:100%} /* taste-skill-ignore: product screen */
.fs-ph .fs-tab{white-space:nowrap;flex:none} /* taste-skill-ignore: product screen */
.fs-ph .fs-tab{padding-inline:12px;min-height:44px;display:flex;align-items:center} /* taste-skill-ignore: product screen */

/* The accounting module header */
.fs-hd{background:hsl(var(--background))} /* taste-skill-ignore: product screen */
.fs-hd1{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-hdl{display:flex;flex-wrap:wrap;align-items:center;gap:16px;min-width:0} /* taste-skill-ignore: product screen */
.fs-cb{width:280px;justify-content:space-between} /* taste-skill-ignore: product screen */
.fs-cb .fs-cbi{margin:0 0 0 8px} /* taste-skill-ignore: product screen */
.fs-vr{width:1px;height:32px;background:hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-pt{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.025em;color:hsl(211 100% 42%)} /* taste-skill-ignore: product screen */
.fs-hdl .fs-tag{margin-left:-6px} /* taste-skill-ignore: product screen */
.fs-qa{flex-wrap:wrap} /* taste-skill-ignore: product screen */
.fs-hd2{display:flex;flex-wrap:wrap;column-gap:20px;padding:0 24px;margin-bottom:-1px;border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-nv{display:flex;align-items:center;gap:8px;padding:12px 4px;border-bottom:2px solid transparent;font-size:14px;line-height:20px;font-weight:500;color:hsl(var(--muted-foreground));white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-nv-on{border-color:hsl(var(--primary));color:hsl(var(--primary))} /* taste-skill-ignore: product screen */
.fs-ph .fs-hd1,.fs-ph .fs-hd2{padding-inline:16px} /* taste-skill-ignore: product screen */
.fs-ph .fs-hd2{column-gap:16px} /* taste-skill-ignore: product screen */
.fs-ph .fs-vr{display:none} /* taste-skill-ignore: product screen */

/* Depreciation Schedule dialog */
.fs-rd{color:hsl(var(--destructive))} /* taste-skill-ignore: product screen */
.fs-dn{margin-left:4px} /* taste-skill-ignore: product screen */
.fs-dlg{position:relative;display:grid;gap:16px;padding:24px;background:hsl(var(--background))} /* taste-skill-ignore: product screen */
.fs-dx{position:absolute;right:16px;top:16px;opacity:.7} /* taste-skill-ignore: product screen */
.fs-dh{display:flex;align-items:center;gap:4px} /* taste-skill-ignore: product screen */
.fs-dt{font-size:18px;line-height:1;font-weight:600;letter-spacing:-.025em} /* taste-skill-ignore: product screen */
.fs-dbody{display:flex;flex-direction:column;gap:16px} /* taste-skill-ignore: product screen */
.fs-tg{display:flex;flex-wrap:wrap;gap:4px} /* taste-skill-ignore: product screen */
.fs-bx{border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden} /* taste-skill-ignore: product screen */
.fs-sch th{padding:12px;background:hsl(var(--muted));font-weight:700;border-bottom:1px solid hsl(var(--border));white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-sch td{padding:12px;border-bottom:1px solid hsl(var(--border));white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-sch tr:last-child td{border-bottom:0} /* taste-skill-ignore: product screen */
.fs-okbar{display:flex;align-items:center;gap:4px} /* taste-skill-ignore: product screen */
.fs-ph .fs-dh{flex-wrap:wrap;row-gap:8px;padding-right:24px} /* taste-skill-ignore: product screen */
.fs-ph .fs-dt{flex:1 1 100%;min-width:0;line-height:1.25} /* taste-skill-ignore: product screen */
.fs-ph .fs-sch{min-width:640px} /* taste-skill-ignore: product screen */
.fs-ph .fs-dlg{grid-template-columns:minmax(0,1fr)} /* taste-skill-ignore: product screen */

/* a crop: the laid-out screen, moved so the chosen window onto it fills the box */
.fs-crop{position:relative;display:block;width:100%;aspect-ratio:var(--view)/var(--h);overflow:hidden;background:#fff} /* taste-skill-ignore: product screen */
.fs-crop>.fk-fit{position:absolute;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));max-width:none} /* taste-skill-ignore: product screen */
/* the sample tag on the M-1's first card */
.fs-kc{position:relative} /* taste-skill-ignore: product screen */
/* the schedule dialog below the sm breakpoint: centred title, square corners, 44px toggles; the table keeps its own widths and scrolls in its box */
.fs-nar .fs-dlg{grid-template-columns:minmax(0,1fr)} /* taste-skill-ignore: product screen */
.fs-nar .fs-dh{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 20px} /* taste-skill-ignore: product screen */
.fs-nar .fs-dt{line-height:1.25} /* taste-skill-ignore: product screen */
.fs-nar .fs-tag{margin:0} /* taste-skill-ignore: product screen */
.fs-nar .fs-tg .fs-btn{height:44px} /* taste-skill-ignore: product screen */
.fs-nar .fs-bx{overflow:hidden} /* taste-skill-ignore: product screen */
.fs-nar .fs-sch{width:auto;min-width:100%} /* taste-skill-ignore: product screen */
.fs-nar .fs-sch th,.fs-nar .fs-sch td{white-space:normal} /* taste-skill-ignore: product screen */
.fs-nar .fs-sch td.fs-mono{white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-nar .fs-tw::after{display:none} /* taste-skill-ignore: product screen */
.fs-nar .fs-dh{flex-wrap:nowrap} /* taste-skill-ignore: product screen */
.fs-nar .fs-dt{flex:none} /* taste-skill-ignore: product screen */
/* the schedule's sample tag sits in the dialog's bottom padding, under the table box */

/* Clients > Business list (relay-ui.tsx primitives, drawn flat) */
.fs-rcanvas{position:absolute;inset:0;padding:24px;background:#f8fbff} /* taste-skill-ignore: product screen */
.fs-rcard{display:flex;flex-direction:column;border-radius:16px;border:1px solid rgba(226,232,240,.7);background:#fdfeff;box-shadow:0 1px 3px rgba(15,23,42,.04),0 12px 28px -16px rgba(15,23,42,.18);overflow:hidden} /* taste-skill-ignore: product screen */
.fs-rhead{display:flex;flex-direction:column;gap:12px;padding:16px} /* taste-skill-ignore: product screen */
.fs-rhd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} /* taste-skill-ignore: product screen */
.fs-rtitle{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.025em;color:#0f172a} /* taste-skill-ignore: product screen */
.fs-rcount{margin-top:2px;font-size:14px;line-height:20px;color:#64748b} /* taste-skill-ignore: product screen */
.fs-rcount b{font-weight:600;color:#0f9e90} /* taste-skill-ignore: product screen */
.fs-rcount .fs-tag{margin-left:6px} /* taste-skill-ignore: product screen */
.fs-rbtns{display:flex;gap:8px} /* taste-skill-ignore: product screen */
.fs-rbtn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:600} /* taste-skill-ignore: product screen */
.fs-rbtn .fs-i{margin-right:6px} /* taste-skill-ignore: product screen */
.fs-rbtn-p{background:#0fb6a3;color:#fff} /* taste-skill-ignore: product screen */
.fs-rbtn-o{border:1px solid #e2e8f0;background:#fff;color:#334155} /* taste-skill-ignore: product screen */
.fs-rsq{width:36px;padding:0} /* taste-skill-ignore: product screen */
.fs-rsq .fs-i{margin:0} /* taste-skill-ignore: product screen */
.fs-rfrow{display:flex;align-items:center;gap:8px} /* taste-skill-ignore: product screen */
.fs-rfaint{color:#94a3b8} /* taste-skill-ignore: product screen */
.fs-rsel{flex:1;display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;font-size:14px;color:#0f172a} /* taste-skill-ignore: product screen */
.fs-rsw{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;font-size:12px;color:#64748b;white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-rtog{display:block;width:33px;height:18px;border-radius:999px;background:#e2e8f0;position:relative} /* taste-skill-ignore: product screen */
.fs-rtog::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)} /* taste-skill-ignore: product screen */
.fs-rsearch{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;font-size:14px;color:#94a3b8} /* taste-skill-ignore: product screen */
.fs-rsort{display:flex;gap:16px;padding:0 4px;font-size:12px;font-weight:500;color:#64748b} /* taste-skill-ignore: product screen */
.fs-rlist{display:flex;flex-direction:column;gap:6px;padding:8px;border-top:1px solid rgba(226,232,240,.7)} /* taste-skill-ignore: product screen */
.fs-rrow{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:12px;border:1px solid rgba(226,232,240,.7)} /* taste-skill-ignore: product screen */
.fs-rav{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:12px;font-size:14px;font-weight:600} /* taste-skill-ignore: product screen */
.fs-t-teal{background:#ccfbf1;color:#0f766e}.fs-t-indigo{background:#e0e7ff;color:#4338ca}.fs-t-amber{background:#fef3c7;color:#b45309} /* taste-skill-ignore: product screen */
.fs-t-emerald{background:#d1fae5;color:#047857}.fs-t-sky{background:#e0f2fe;color:#0369a1} /* taste-skill-ignore: product screen */
.fs-rrt{min-width:0;flex:1} /* taste-skill-ignore: product screen */
.fs-rrn{font-size:14px;line-height:20px;font-weight:500;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* taste-skill-ignore: product screen */
.fs-rrm{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:12px;line-height:16px;color:#64748b} /* taste-skill-ignore: product screen */
.fs-rbadge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;border:1px solid rgba(123,146,255,.35);background:rgba(123,146,255,.12);font-size:11px;line-height:1;font-weight:500;color:#4f46e5} /* taste-skill-ignore: product screen */
.fs-rchev{margin-top:12px;color:#cbd5e1} /* taste-skill-ignore: product screen */
.fs-ph .fs-rcanvas{padding:16px} /* taste-skill-ignore: product screen */
.fs-rrm span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* taste-skill-ignore: product screen */

/* Payroll Tax board (AG Grid material theme as apps/accounting/app/globals.css sets its --ag-* tokens) */
.fs-ag{position:absolute;inset:0;background:#fff;font-size:13px;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fs-grow{display:grid;grid-template-columns:300px 150px 140px 110px 90px 110px;height:36px;border-bottom:1px solid hsl(var(--border)/.6)} /* taste-skill-ignore: product screen */
.fs-ghead{height:45px;color:hsl(var(--muted-foreground));font-size:12px;font-weight:500} /* taste-skill-ignore: product screen */
.fs-gc{display:flex;align-items:center;justify-content:center;padding:0 8px;min-width:0} /* taste-skill-ignore: product screen */
.fs-gc:first-child{border-right:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-gbiz{font-size:12px;font-weight:600;letter-spacing:-.01em} /* taste-skill-ignore: product screen */
.fs-gpill{display:inline-block;padding:1px 8px;border-radius:10px;background:#f3f4f6;color:#374151;border:1px solid #37415140;font-size:11px;font-weight:600;line-height:16px;letter-spacing:.025em} /* taste-skill-ignore: product screen */
.fs-gbox{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px;border:2px solid #d1d5db} /* taste-skill-ignore: product screen */
.fs-gbox18{width:18px;height:18px} /* taste-skill-ignore: product screen */
.fs-gsch{font-size:12px;font-weight:500;letter-spacing:-.01em} /* taste-skill-ignore: product screen */
.fs-gamt{font-size:14px;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fs-gmulti{display:inline-flex;align-items:center;gap:4px;color:#2563eb} /* taste-skill-ignore: product screen */
.fs-gcnt{border-radius:999px;background:#eff6ff;padding:2px 6px;font-size:10px;font-weight:600;color:#2563eb;line-height:1} /* taste-skill-ignore: product screen */
.fs-ght{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-ghead .fs-gc{padding:0 12px} /* taste-skill-ignore: product screen */
.fs-gadd{padding:4px 8px;border-radius:4px;background:#eff6ff;color:#3b82f6;font-size:12px;font-weight:500} /* taste-skill-ignore: product screen */

/* Cuts laid out at the page's own width and never scaled (round S2; second pass T2: nothing inside a screen is drawn under 13px). */
.fs-flow{position:relative;display:block;width:100%;background:#fff;font-size:14px;line-height:20px} /* taste-skill-ignore: product screen */
/* The M-1 card on a phone: its title, then Description, M-1 Line and Amount. */
.fs-fth{padding:13px 12px 11px;font-size:15.5px;line-height:22px;font-weight:600;letter-spacing:-.02em} /* taste-skill-ignore: product screen */
.fs-ftb{width:100%;font-size:14px;line-height:20px;letter-spacing:-.01em} /* taste-skill-ignore: product screen */
.fs-ftb th{padding:7px 12px;text-align:left;vertical-align:bottom;font-size:13px;line-height:16px;font-weight:500;color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-ftb th.fs-r{text-align:right} /* taste-skill-ignore: product screen */
.fs-ftb th.fs-c{text-align:center} /* taste-skill-ignore: product screen */
.fs-ftb td{padding:9px 12px;vertical-align:middle;border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-ftb td.fs-r{padding-left:8px;white-space:nowrap;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fs-ftb .fs-ln{width:38px;padding-inline:0;white-space:normal} /* taste-skill-ignore: product screen */
.fs-ftb tr:last-child td{border-bottom:0} /* taste-skill-ignore: product screen */
.fs-ftb td.fs-grp{padding-block:8px} /* taste-skill-ignore: product screen */
/* The Tax Package screen from 700: the three cards, then the M-1 card with six columns; the notes and badges at 13px. */
.fs-m1d{display:flex;flex-direction:column;gap:14px;padding:18px} /* taste-skill-ignore: product screen */
.fs-m1d .fs-kt{padding:14px 16px 7px;font-size:13.5px} /* taste-skill-ignore: product screen */
.fs-m1d .fs-kv{padding:0 16px 13px;font-size:22px;line-height:30px} /* taste-skill-ignore: product screen */
.fs-m1d .fs-cth{padding:16px 14px 8px;font-size:16px} /* taste-skill-ignore: product screen */
.fs-dtb{width:100%;font-size:14.5px;line-height:20px} /* taste-skill-ignore: product screen */
.fs-dtb th{height:40px;padding:0 12px;text-align:left;vertical-align:middle;font-size:13px;font-weight:500;color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border));white-space:nowrap} /* taste-skill-ignore: product screen */
.fs-dtb th.fs-c{text-align:center} /* taste-skill-ignore: product screen */
.fs-dtb th.fs-r{text-align:right} /* taste-skill-ignore: product screen */
.fs-dtb td{padding:11px 12px;vertical-align:middle;border-bottom:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.fs-dtb tr:last-child td{border-bottom:0} /* taste-skill-ignore: product screen */
.fs-dtb td.fs-r{white-space:nowrap;font-variant-numeric:tabular-nums} /* taste-skill-ignore: product screen */
.fs-dtb td.fs-grp{padding-block:8px} /* taste-skill-ignore: product screen */
.fs-dtb .fs-badge{padding:1px 10px;font-size:13px;line-height:18px} /* taste-skill-ignore: product screen */
.fs-nt{margin-top:1px;font-size:13px;line-height:18px;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-dtb td.fs-cC{font-size:13px;white-space:nowrap;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fs-dtb th,.fs-dtb td{padding-inline:8px} /* taste-skill-ignore: product screen */
.fs-dtb th:first-child,.fs-dtb td:first-child{padding-left:14px} /* taste-skill-ignore: product screen */
.fs-dtb th:last-child,.fs-dtb td:last-child{padding-right:14px} /* taste-skill-ignore: product screen */
.fs-dtb th:nth-child(2){width:70px} /* taste-skill-ignore: product screen */
.fs-dtb th:nth-child(3){width:104px} /* taste-skill-ignore: product screen */
.fs-dtb th:nth-child(4){width:124px} /* taste-skill-ignore: product screen */
.fs-dtb th:nth-child(5){width:82px} /* taste-skill-ignore: product screen */
.fs-dtb th:nth-child(6){width:108px} /* taste-skill-ignore: product screen */
@media (max-width:899px){.fs-dtb .fs-cC,.fs-dtb .fs-cS{display:none}} /* taste-skill-ignore: product screen */
/* Account Reconciliation Detail: the title, the month picker, the four figures (two by two in a narrow panel). */
.fs-recf{display:flex;flex-direction:column;gap:14px;padding:16px 18px 18px;container-type:inline-size} /* taste-skill-ignore: product screen */
.fs-recf .fs-h1x{font-size:18px;line-height:26px;letter-spacing:-.015em} /* taste-skill-ignore: product screen */
.fs-recf .fs-mosel{gap:8px;padding:12px} /* taste-skill-ignore: product screen */
.fs-recf .fs-btn.fs-sm{height:34px;padding:0 10px;font-size:13.5px} /* taste-skill-ignore: product screen */
.fs-recf .fs-badge{padding:1px 8px;font-size:13px;line-height:18px} /* taste-skill-ignore: product screen */
.fs-recf .fs-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} /* taste-skill-ignore: product screen */
.fs-recf .fs-stat{padding:13px 14px} /* taste-skill-ignore: product screen */
.fs-recf .fs-st-l{font-size:13.5px;line-height:18px} /* taste-skill-ignore: product screen */
.fs-recf .fs-st-v{margin-top:3px;font-size:17px;line-height:24px} /* taste-skill-ignore: product screen */
@container (max-width:290px){.fs-recf .fs-stat{padding:12px 10px}.fs-recf .fs-st-v{font-size:15px}} /* taste-skill-ignore: product screen */
@container (min-width:536px){.fs-recf .fs-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.fs-recf .fs-stat{padding:12px}.fs-recf .fs-st-v{font-size:16px}} /* taste-skill-ignore: product screen */
/* The Payroll Tax board from 700: five columns sharing the panel, each row's rule to the edge, Business Name set left. */
.fs-agf{display:flex;flex-direction:column;height:100%;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.fs-agf .fs-grow{flex:1 1 auto;grid-template-columns:minmax(0,1.75fr) minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,.8fr);height:auto;min-height:44px} /* taste-skill-ignore: product screen */
.fs-agf .fs-grow:last-child{border-bottom:0} /* taste-skill-ignore: product screen */
.fs-agf .fs-ghead{flex:none;min-height:46px;font-size:13px} /* taste-skill-ignore: product screen */
.fs-agf .fs-gc,.fs-agf .fs-ghead .fs-gc{padding:0 8px} /* taste-skill-ignore: product screen */
.fs-agf .fs-gc:first-child,.fs-agf .fs-ghead .fs-gc:first-child{justify-content:flex-start;padding-left:14px} /* taste-skill-ignore: product screen */
.fs-agf .fs-ght{overflow:visible;text-overflow:clip} /* taste-skill-ignore: product screen */
.fs-agf .fs-gbiz{font-size:14px} /* taste-skill-ignore: product screen */
.fs-agf .fs-gsch{font-size:13.5px} /* taste-skill-ignore: product screen */
.fs-agf .fs-gpill{padding:2px 9px;border-radius:12px;font-size:13px;line-height:18px} /* taste-skill-ignore: product screen */
.fs-agf .fs-gamt{font-size:15.5px} /* taste-skill-ignore: product screen */
.fs-agf .fs-gbox{width:17px;height:17px;border-radius:4px} /* taste-skill-ignore: product screen */
.fs-agf .fs-gbox svg{width:12px;height:12px} /* taste-skill-ignore: product screen */
/* The Payroll Tax board on a phone: Business Name and 941 Tax; the schedule and the filed box, each with its column's name, as each row's second line. */
.fs-pr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:10px 14px;border-bottom:1px solid hsl(var(--border)/.6)} /* taste-skill-ignore: product screen */
.fs-pr:last-child{border-bottom:0} /* taste-skill-ignore: product screen */
.fs-prh{padding-block:9px;font-size:13px;line-height:16px;font-weight:500;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-prh span+span{text-align:right} /* taste-skill-ignore: product screen */
.fs-pn{font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.01em} /* taste-skill-ignore: product screen */
.fs-pm{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:13px;line-height:17px;font-weight:500} /* taste-skill-ignore: product screen */
.fs-pl{color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.fs-pv{text-align:right} /* taste-skill-ignore: product screen */
.fs-ptf .fs-gamt{font-size:15px;line-height:20px} /* taste-skill-ignore: product screen */
.fs-pf{justify-content:flex-end} /* taste-skill-ignore: product screen */

/* third pass. The bank screen's month picker fills its box: three equal columns, each month's badge on its right edge */
.fs-recf .fs-mosel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} /* taste-skill-ignore: product screen */
.fs-recf .fs-mosel .fs-btn{justify-content:space-between} /* taste-skill-ignore: product screen */
/* the Payroll Tax board's title row, as the bank screen has one */
.fs-agf .fs-h1x,.fs-ptf .fs-h1x{flex:none;padding:14px 14px 4px;font-size:18px;line-height:26px;letter-spacing:-.015em} /* taste-skill-ignore: product screen */
/* a phone: the board's small lines at 15px */
.fs-ptf .fs-pm,.fs-ptf .fs-prh{font-size:15px;line-height:20px} /* 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}
/* /accountants. k1f's tokens, header, buttons, sheets and footer, unchanged. One art field (the first screen); the rest is white and mist sheets and the staff app. 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;
 --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(13vw,clamp(52px,6.9vw,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);
 --pad:clamp(56px,7vw,120px);
}
@media (min-width:1441px){:root{--wrap:min(86.1vw,1516px)}}
*,*::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,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))}
.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: under scripting the button waits until the hero's has gone behind the bar; without it, it is simply there */
.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-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 */
.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 story, the ring field rising behind the app card, 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(--r) + clamp(52px,6.4vw,104px))}
.hero-copy{position:relative;z-index:4;padding:12px var(--g) 0}
h1{font-size:var(--h1);line-height:1.02;letter-spacing:-.044em}
.ln{display:block;white-space:nowrap}
/* round S2: the first screen says three things and no more: what Florink is, in one line; what the page asks of a firm; the buttons */
.lede{margin-top:12px;max-width:22em;font-size:clamp(17px,4.6vw,19px);line-height:1.36;font-weight:460;letter-spacing:-.014em;color:var(--ink);text-wrap:pretty}
.ask{margin-top:14px;font-size:17px;line-height:1.36;font-weight:580;letter-spacing:-.01em;color:var(--ink2)}
.ctas{display:flex;gap:10px;margin-top:18px}
.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 card */
/* 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 (second pass): a white sheet that rises under the app card, so the card is closed: its foot and both lower corners stand on the rings */
.floor{position:absolute;z-index:1;left:50%;width:100vw;margin-left:-50vw;top:calc(100% + clamp(22px,2.8vw,44px));height:200vh;background:#fff;border-radius:50% 50% 0 0/var(--floor-r) var(--floor-r) 0 0} /* the family's arc */
/* under 951 the card is taller than the disc file reaches below its crown (760 units of a phone, .7686 of --ww from 700). The file is sharp to its foot, so the floor
   never starts lower than that foot: where the card is the taller, the floor's arc rises behind the card and meets the disc in the page's margins */
.floor{top:min(calc(100% + clamp(22px,2.8vw,44px)),calc(760*100vw/390 - 52px - var(--floor-r) - 8px))}
@media (min-width:700px){
 .hero .stage{width:min(var(--wrap),calc(100vw - var(--g)*2));margin-inline:auto}
}
.win-d{display:none}
.facts{display:grid;gap:10px;font-size:17px;line-height:1.3;font-weight:540;letter-spacing:-.01em}
.facts li{display:flex;align-items:flex-start;gap:11px}

/* 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)}
.sec-t h2 .hl{display:block}
.lead{margin-top:12px;max-width:22em;font-size:clamp(17px,4.6vw,19px);line-height:1.36;font-weight:460;letter-spacing:-.014em;color:var(--ink)}


.pf-s{width:100%;max-width:520px}

.pts{display:grid;gap:14px;margin-top:26px}
.pts li{display:flex;align-items:flex-start;gap:12px;font-size:var(--b2);line-height:1.38;font-weight:500;letter-spacing:-.012em}


/* the schedule's tie to the M-1, all assets, tax year 2025 */
.pf-t{margin-top:28px;max-width:30em}
.tie-card{padding:16px 18px 6px}
.tie-h{padding-bottom:12px;font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.tie{display:grid;margin:0}
.tie div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a ledger's own rule */
.tie dt{font-size:17px;color:var(--ink2)}
.tie dd{margin:0;font-size:17px;font-weight:640;font-variant-numeric:tabular-nums}
.tie .tie-m dt,.tie .tie-m dd{color:var(--ink);font-weight:680}

/* what is in the app: a white card on the art, right under the story (as the pricing page's included card) */
.sys-card{position:relative;z-index:2;padding:22px 20px 6px;border-radius:20px;background:#fff}
.sys-l{display:grid;margin-top:16px}
.sys-l li{padding:14px 0;box-shadow:inset 0 1px 0 var(--rule);font-size:var(--b2);line-height:1.34;font-weight:540;letter-spacing:-.014em} /* taste-skill-ignore: a list's own rule */
/* third pass: what the software does not do is a note in the caption's style, not a bold line between the list and the ticks */
.sys-n{padding:14px 0;box-shadow:inset 0 1px 0 var(--rule);font-size:15px;line-height:1.4;font-weight:430;color:var(--ink2)} /* taste-skill-ignore: a list's own rule */
.sys-card .facts{padding:18px 0 18px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
/* the story (second pass): its own short section under the first screen: a headline and one statement under it, in the body size and the full ink */
.story-b{margin-top:clamp(14px,1.6vw,24px)}
.story-b p{max-width:37em;font-size:var(--b2);line-height:1.5;font-weight:460;letter-spacing:-.012em;color:var(--ink)}
/* from the books to the M-1: the M-1 and, beside it, one asset's schedule and its tie to line 8a */
.books h2 .hl{display:block}
.books .pts{margin-top:18px}
.bk-g{display:grid;gap:clamp(40px,4vw,56px);margin-top:clamp(36px,3.6vw,56px)}
.bk-s .pf-s{max-width:440px}
/* the proof (second pass): the headline and its sentence, then the bank screen and the Payroll Tax board, two panels of one height side by side from 1000 */
.duo{display:grid;gap:clamp(32px,3vw,40px);margin-top:clamp(28px,3.4vw,52px)}


@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 .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-copy{text-align:center;padding-top:clamp(14px,1.6vw,30px)}
 .lede{margin:12px auto 0;max-width:none;font-size:clamp(18px,1.56vw,24px);text-wrap:balance}
 .ask{margin:14px auto 0;font-size:clamp(17px,1.3vw,20px)}
 .ctas{justify-content:center;margin-top:20px}
 .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{top:min(calc(100% + clamp(22px,2.8vw,44px)),calc(var(--ww)*.7686 - 46px - var(--floor-r) - 8px))}
 .facts{font-size:18px;gap:12px}
 .sys-card{padding:clamp(28px,3vw,48px) clamp(28px,3.2vw,52px) clamp(14px,1.4vw,22px)}
 /* even rows: every row is as tall as the one whose item runs to two lines */
 .sys-l{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;column-gap:clamp(28px,3.4vw,56px);margin-top:clamp(18px,1.8vw,28px)}
 .sys-l li{align-content:center}
 /* the story and the books' headline stand closer, so the M-1 comes into the screen with them; the two points stand in one centred row under the headline */
 .story{padding-block:clamp(44px,4.6vw,68px) calc(clamp(40px,4vw,56px) + var(--r))}
 .books{padding-top:clamp(44px,4.6vw,68px)}
 .books .pts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 40px}
 .bk-g{margin-top:clamp(26px,2.6vw,36px)}
 .sys-card .facts{display:flex;flex-wrap:wrap;gap:10px 40px;padding-top:22px}
 /* T7: a section that is one centred column, or whose headline stands over a full-width group of screens, is centred from 700 (where the hero is) */
 .story .c,.books h2,.proof .sec-t{text-align:center}
 .story-b p,.proof .lead{margin-inline:auto}
 .lead{max-width:none;font-size:clamp(18px,1.56vw,24px);text-wrap:balance}
}
@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)}
 .nav a[aria-current=page]{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
 .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}

}

/* a short laptop screen (1366 by 768 and the like): the stage and the card's rhythm tighten so the whole card closes inside the first screen */
@media (min-width:1000px) and (max-height:800px){
 .stage{margin-top:clamp(32px,3vw,44px)}
 .sys-card{padding-top:clamp(24px,2.3vw,34px)}
 .sys-l li{padding:12px 0}
 .sys-n{padding:13px 0}
 .sys-card .facts{padding-top:16px}
}

/* the two-column sections from 1000: each screen beside its words at its own size */
@media (min-width:1000px){
 .pf-s{max-width:none}
 /* S6: the headline is the site's section headline size, so its column is wide enough to hold it in two lines */

}

/* closed and tied: from 1200 the bank screen and the board stand side by side, two panels of one height (the panels share the first row,
   their captions the second, by subgrid); from 700 to 1199 they stack, each at a comfortable measure, centred under the centred headline */
@media (min-width:700px) and (max-width:1199px){
 .duo .pf{width:100%;max-width:640px;margin-inline:auto}
}
@media (min-width:1200px){
 .duo{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;row-gap:0;align-items:stretch}
 .duo .pf{display:grid;grid-template-rows:subgrid;grid-row:span 2}
 .duo .win-d{display:flex;flex-direction:column}
 .duo .win-d>.fs-flow{flex:1 1 auto}
}

/* the M-1 and the schedule: the schedule's column beside the M-1 from 1280, where both read at about the app's size;
   between, the M-1 across the column and the schedule beside its tie */
@media (min-width:700px) and (max-width:1279px){
 .bk-s{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);column-gap:clamp(28px,4vw,56px);align-items:center}
 .bk-s .pf-s{max-width:none}
 .bk-s .pf-t{margin-top:0;max-width:none}
}
@media (min-width:1280px){
 /* the schedule's column is never under 312px, so its figures are drawn at 13px and up (T2) */
 .bk-g{grid-template-columns:minmax(0,1fr) clamp(312px,22vw,380px);column-gap:clamp(32px,3vw,48px);align-items:start}
 .bk-s .pf-s,.bk-s .pf-t{max-width:none}
}

/* 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}
 .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"}


/* QA: the logo link is a full tap target at every width */
.mark{min-width:44px}
/* 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): the near-white sky, the headline, the lede's size and the air under them are the system's.
   This page's object is a card of words, not a device, so it keeps its own height and the hero is as tall as the card makes it. The card starts at the stage's
   top line (36 design px under the buttons), the disc's crown stands 16 above that line as on Home, and the card stands on the floor's arc as a device does:
   the floor's crown is 26 design px above the card's foot, behind it. === */
@media (min-width:951px){
 .rings{top:calc(var(--ww)*-.0673 - 16*var(--q))}
 .floor{top:calc(100% - 26*var(--q))}
}

/* fourth pass: the headline is longer ("Built by an accounting & tax firm."). On a phone it is set so its second line holds the column at 320 too (two lines, never three) */
@media (max-width:699px){.hero h1{font-size:min(8.3vw,40px);line-height:1.06;letter-spacing:-.04em}}

/* === 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"}