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

@font-face{font-family:"Pretendard Std";src:url("/assets/PretendardStdVariable.64a2b711.woff2") format("woff2");font-weight:45 920;font-display:swap}
/* The text pages' one stylesheet (faq, contact, privacy, terms): k1f's tokens, type, buttons, header, sheets and footer, then the parts these pages share. Each page adds page.css. 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);
 /* a text page peaks lower than home: 88 at 1440 for the page's title, 46 for a group's */
 --t1:min(12.4vw,clamp(46px,6.1vw,104px));
 --t2:min(9.2vw,clamp(34px,3.6vw,60px));
 --t3:clamp(20px,1.6vw,26px);
 --lead:clamp(18px,1.56vw,24px);
 --b2:clamp(17px,1.32vw,21px);
 --body:clamp(16px,1.2vw,18px);
 --pad:clamp(44px,6vw,110px);
}
@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;font-feature-settings:"cv05","cv08";-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,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none;touch-action:manipulation}
b,strong{font-weight:640}
i,u{font-style:normal;text-decoration:none}
.c{width:100%;max-width:calc(var(--wrap) + var(--g)*2);margin-inline:auto;padding-inline:max(var(--g),env(safe-area-inset-left)) max(var(--g),env(safe-area-inset-right))}
.num{font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}
.tk,.ar{display:block;flex:none}
h1,h2,h3{font-weight:680;letter-spacing:-.036em;line-height:1.05;color:var(--ink);text-wrap:balance}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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

/* header: k1f's bar. Its button and the page's own: shared/system.css and system.js (C8) */
.top{position:sticky;top:0;z-index:30;background:#fff;padding-top:env(safe-area-inset-top)}
.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;gap:10px;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 same on every page of the site: underlined in the bar, a dot in the menu, weight in the footer */
.menu li a[aria-current=page]::after{content:"";width:8px;height:8px;margin-left:12px;border-radius:50%;background:var(--blue)}

/* sheets: each rises over the last on a large rounded edge */
.sheet{position:relative;z-index:2;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)}
.sheet.deep{background:var(--deep);color:#fff}

/* a text page opens on its title: big, tight, left on a phone */
.head{position:relative;z-index:1;padding-block:clamp(18px,3.4vw,64px) calc(var(--r) + clamp(28px,3.4vw,56px))}
.head h1{font-size:var(--t1);line-height:1;letter-spacing:-.044em}
.head h1 .hl{display:block}
.lede{margin-top:clamp(12px,1.3vw,22px);max-width:34em;font-size:var(--lead);line-height:1.38;font-weight:460;letter-spacing:-.016em;color:var(--ink2);text-wrap:pretty}
.lede b{color:var(--ink);font-weight:640}
/* links in running text: the site's one rule (shared/system.css, C5) */
/* a text page's label heading (an FAQ group's name, contact's Messages): one size, no full stop */
.label-h{font-size:var(--t2);line-height:1.04;letter-spacing:-.04em}
/* the way back to the page's list (the FAQ's topics, a legal page's contents) from a heading, below 1000 where the list is out of sight */
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.up{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:44px;font-size:15px;line-height:1;font-weight:560;color:var(--ink2)}
.up::after{content:"";width:7px;height:7px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:translateY(2px) rotate(45deg)}
@media (min-width:1000px){.up{display:none}}


/* the closing band, the footer, captions, chips, panels and the hero's top are the site's: H/shared/system.css and footer.css, appended last by build.py. Do not restyle them here */
@media (hover:hover){.nav a:hover,.login:hover{color:var(--ink2)}}
@media (max-width:339px){.mark{font-size:0;gap:0}}

@media (min-width:700px){
 :root{--hdr:64px}
}
@media (min-width:1000px){
 .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}
}
@media (prefers-reduced-motion:no-preference){
 .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}}

/* QA: the logo link is a full tap target at every width */
.mark{min-width:44px}

/* /faq: the title over the site's gradient band, where the four topics stand on a white card (the page's one art field).
   Then one flat white surface: four groups, each a heading over ruled rows, every answer open and in order.
   From 1000 a row sets its question on the left and its answer on the right; the experts' Questions screen stands in the row of the question it illustrates.
   The close is the site's "write to us" band (src/meta.json) */
.hero{position:relative;z-index:1}
.hero-copy{position:relative;z-index:2}
/* C7: the band is the text heroes' shared wave (shared/system.css); the topics stand on its white card */
.topics{display:grid;padding:6px 20px;scroll-margin-top:calc(var(--hdr) + 24px)}
.topics a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding-block:14px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.topics a:first-child{box-shadow:none}
.topics b{display:block;font-size:clamp(20px,1.5vw,24px);line-height:1.2;font-weight:660;letter-spacing:-.024em}
.topics i{display:block;margin-top:3px;font-size:16px;line-height:1.3;color:var(--ink2)}
.topics .ar{width:22px;height:22px;transform:rotate(90deg);transition:transform .35s var(--out)}
@media (hover:hover){.topics a:hover .ar{transform:rotate(90deg) translateX(3px)}}

/* the groups: one flat surface, headings and hairlines. No shelf per group and no card inside it */
.faq{padding-block:0 calc(clamp(56px,6.4vw,112px) + var(--r))}
/* a clear step between one group's last line and the next group's name, on phones too */
.grp{padding-top:clamp(56px,5.6vw,96px)}
.grp:first-child{padding-top:clamp(36px,4.4vw,72px)}
.grp>.c{max-width:calc(780px + var(--g)*2)}
.qa{display:grid;margin-top:clamp(16px,1.8vw,28px)}
.qa-i{padding-block:20px 22px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
/* T5: a question is a sub-feature heading (19px at 390, 22px at 1440, weight 600); its answer is running text in the full ink and wraps as it falls (T6) */
.qa h3{text-wrap:balance}
.qa-i>p{margin-top:8px;max-width:34em;font-size:var(--b2);line-height:1.5;letter-spacing:-.008em;color:var(--ink)}
.qa-i>p+p{margin-top:10px}
.qa-i>p a{display:inline-block;padding-block:9px;margin-block:-9px}
/* plain words: a note beside the answer whose promise rests on the word (16px, T5). The answer itself is not rewritten */
.qa-i>.gloss{margin-top:12px;padding-left:12px;box-shadow:inset 2px 0 0 rgba(14,15,18,.16);font-size:16px;line-height:1.4;letter-spacing:-.004em;color:var(--ink2)} /* taste-skill-ignore: the note's own rule */
.qa-i>.gloss b{font-weight:640;color:var(--ink)}

/* the Questions screen: apps/web app/[locale]/(dashboard)/onboard/status/questions/questions-client.tsx with components/signup/chat-ui.tsx.
   A panel (S4, T11) at its true size, straight on the white ground: the screen's title row, the first question with the transaction it is about, and the answer box.
   T1: the question being answered is marked by a tinted fill, not a ring. T2: every line in it is 13px or larger.
   The app's grey for small lines is set one step darker here, so each of them passes AA on the screen's grey fields */
.qs-stage{margin-top:16px;max-width:520px}
.qs-m{background:hsl(var(--background))} /* taste-skill-ignore: product screen */
.qs-m{--module-teal:171.67 41.38% 34.12%;--card-foreground:222 47% 11%;--muted-foreground:215 16% 40%} /* taste-skill-ignore: product screen */
.qs-page{display:flex;flex-direction:column;gap:20px;padding:16px 16px 4px} /* taste-skill-ignore: product screen */
.qs-eb{margin-bottom:4px;font-size:13px;line-height:1.5;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--module-teal))} /* taste-skill-ignore: product screen */
.qs-th{display:grid;gap:16px;padding-block:8px} /* taste-skill-ignore: product screen */
.qs-row{display:flex;flex-direction:column;align-items:flex-start} /* taste-skill-ignore: product screen */
.qs-lab{margin-bottom:4px;padding:0 4px;font-size:13px;line-height:1.33;font-weight:500;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.qs-b{max-width:100%;padding:10px 16px;border:1px solid hsl(var(--border));border-radius:16px 16px 16px 6px;background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.qs-sel{border-color:hsl(var(--primary)/.18);background:hsl(var(--primary)/.1)} /* taste-skill-ignore: product screen */
.qs-tx{margin-bottom:8px;padding:8px 12px;border-radius:12px;background:hsl(var(--muted))} /* taste-skill-ignore: product screen */
.qs-sel .qs-tx{background:hsl(var(--card))} /* taste-skill-ignore: product screen */
.qs-txt{display:flex;align-items:baseline;justify-content:space-between;gap:12px} /* taste-skill-ignore: product screen */
.qs-d{min-width:0;font-size:14px;line-height:1.43;font-weight:500;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.qs-amt{flex:none;font-size:14px;line-height:1.43;font-weight:600;font-variant-numeric:tabular-nums;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.qs-dt{font-size:13px;line-height:1.33;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.qs-q{font-size:15px;line-height:1.625;color:hsl(var(--card-foreground))} /* taste-skill-ignore: product screen */
.qs-time{margin-top:4px;padding:0 4px;font-size:13px;line-height:1.4;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.qs-comp{padding:12px 16px 16px;border-top:1px solid hsl(var(--border));background:hsl(var(--background))} /* taste-skill-ignore: product screen */
.qs-ctx{margin-bottom:8px;padding:8px 12px;border-radius:12px;background:hsl(var(--muted));font-size:13px;line-height:1.33;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.qs-ctx span{font-weight:500;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.qs-nb{white-space:nowrap} /* taste-skill-ignore: product screen */
.qs-in{display:flex;align-items:flex-end;gap:6px} /* taste-skill-ignore: product screen */
.qs-box{display:flex;flex:1;align-items:center;min-height:44px;padding:0 16px;border:1px solid hsl(var(--input));border-radius:24px;background:hsl(var(--card));font-size:16px;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: product screen */
.qs-send{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:999px;background:hsl(var(--primary));opacity:.4} /* taste-skill-ignore: product screen */
.qs-send .fk-i{color:hsl(var(--primary-foreground))} /* taste-skill-ignore: product screen */

@media (min-width:700px){
 .grp>.c{max-width:calc(860px + var(--g)*2)}
}
@media (min-width:1000px){
 .topics{grid-template-columns:repeat(4,minmax(0,1fr));padding:8px}
 .topics a{min-height:112px;padding:20px 24px;box-shadow:inset 1px 0 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
 .topics a:first-child{box-shadow:none}
 .grp>.c{max-width:calc(var(--wrap) + var(--g)*2)}
 /* a row: the question on the left, its answer on the right, one hairline over both */
 .qa-i{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,4.4vw,72px);align-items:start;padding-block:28px 30px}
 .qa-i>h3{grid-column:1;grid-row:1/span 3}
 .qa-i>p{grid-column:2}
 .qa-i>h3+p{margin-top:1px}
 /* the row with the screen is a row like the others: the question on the left, its answer on the right, and the screen it describes under the answer at the column's width */
 .qa-fig .qs-stage{grid-column:2;max-width:none;margin-top:20px}
}

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