.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}
/* /pricing in k1f's language: the price first, what it covers on the one lit field, then white and mist sheets with the real screens that prove it. Phone first. */
:root{
 color-scheme:light;
 --ink:#0E0F12;--ink2:#3A3C43;--ink3:#5D6068;
 --rule:#E3E4E8;--mist:#F5F5F7;--pale:#EDEDF0;
 --blue:#1B4FD6;--blue-lo:#153FAE;
 --teal:#0A7C7E;--tick:#0E8C83;
 --deep:#0A1C7C;--deep-rgb:10,28,124;
 --on-deep:#FFFFFF;--on-deep2:#E6EEFF;
 --tint:#F0F4FD;
 --g:clamp(16px,4.6vw,44px);
 --wrap:1240px;
 --r:clamp(24px,3.6vw,52px);
 --hdr:56px;
 --ph:min(358px,calc(100vw - var(--g)*2));
 --out:cubic-bezier(.16,1,.3,1);
 --h2:min(9.6vw,clamp(44px,5vw,92px));
 --h3:min(8.3vw,clamp(30px,3.2vw,58px));
 --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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
main{overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none;touch-action:manipulation}
b{font-weight:640}
i,u{font-style:normal;text-decoration:none}
.c{width:100%;max-width:calc(var(--wrap) + var(--g)*2);margin-inline:auto;padding-inline:max(var(--g),env(safe-area-inset-left)) max(var(--g),env(safe-area-inset-right))}
.num{font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}
.tk,.ar{display:block;flex:none}
h1,h2,h3{font-weight:680;letter-spacing:-.036em;line-height:1.05;color:var(--ink);text-wrap:balance}
h2{font-size:var(--h2);font-weight:680}
: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-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-white:hover{background:#EEF0F4}
}

/* header: k1f's. Under scripting the button waits until the hero's has gone behind the bar */
.top{position:sticky;top:0;z-index:30;background:#fff;padding-top:env(safe-area-inset-top)}
.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 same on every subpage: underlined in the bar, a blue dot after it in the menu, heavier in the footer */
.nav a[aria-current=page]{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.menu li a[aria-current=page]::after{content:"";width:8px;height:8px;margin-left:12px;border-radius:50%;background:var(--blue)}

/* the first screen: the price, the button, and what the price covers standing on the one lit field */
.hero{--hero-pad:clamp(14px,2.2vw,36px);position:relative;z-index:1;padding-top:var(--hero-pad)}
.hero-copy{position:relative;z-index:2}
/* the h1 is set at the price's size, and "a month." at 0.4 of it on the same baseline */
.hero h1.price-h{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:clamp(8px,1.1vw,18px);font-size:min(22vw,clamp(84px,11.1vw,168px));line-height:1;letter-spacing:-.036em}
.hp{font-size:1em;font-weight:680;letter-spacing:-.05em;line-height:.96}
.hu{font-size:.4em;font-weight:640;letter-spacing:-.036em}
.lede{max-width:34em}
.lede b{font-weight:620;color:var(--ink)}
.ctas{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:18px}
.ctas .btn{align-self:stretch}
.more{padding-block:8px;font-size:16.5px;line-height:1.3;color:var(--ink2)}
.more a{padding-block:12px}
/* C7: what the price covers stands on the text heroes' shared wave (shared/system.css) */
.inc-card{padding:22px 20px 20px}
/* the card's note stands under its title, never beside it */
.inc-h{display:flex;flex-direction:column;align-items:flex-start}
.inc-st{margin-top:4px;font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.012em;color:var(--ink2)}
.inc{display:grid;margin-top:12px}
.inc li{display:flex;align-items:flex-start;gap:12px;padding-block:13px;box-shadow:inset 0 1px 0 var(--rule);font-size:17px;line-height:1.32;font-weight:540;letter-spacing:-.012em} /* taste-skill-ignore: a list's own rule */
/* the notices promise under the list, on the deep field, in the home page's order of weight: the lead-in, the middle line as its headline, the penalty line, then "notice" in plain words */
.inc-vow{margin-top:8px;padding:18px 18px 16px;border-radius:14px;background:var(--deep);color:var(--on-deep2);letter-spacing:-.01em}
.inc-vow .v1,.inc-vow .vh,.inc-vow .v3{display:block}
.inc-vow .v1{font-size:16.5px;line-height:1.4}
.inc-vow .vh{margin-top:8px;font-size:min(25px,6.4vw);line-height:1.1;font-weight:680;letter-spacing:-.032em;color:#fff;text-wrap:balance}
.inc-vow .vh .nb{white-space:normal}
@media (min-width:375px){.inc-vow .vh .nb{white-space:nowrap}}
.inc-vow .v3{margin-top:10px;font-size:17px;line-height:1.35;font-weight:640;color:#fff}
.inc-vow .gl{margin-top:12px;color:var(--on-deep2)}
/* the 2026 sign-up special: one quiet line at the foot of the card (the add-ons list carries its price) */
.inc-cu{margin-top:12px;font-size:16px;line-height:1.4;color:var(--ink2)}

/* 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)}
/* one lede style on the page, the hero sub's, and only directly under a headline */
.sub{margin-top:clamp(12px,1.3vw,22px);font-size:var(--lead);line-height:1.38;font-weight:460;letter-spacing:-.016em;color:var(--ink2)}
/* a word in plain words, once, beside the claim that uses it: 16px on phones, 15 from 700 */
.gl{font-size:16px;line-height:1.4;color:var(--ink3)}
/* links in running text and sub-feature headings: the site's rules (shared/system.css, C5 and C3). A question is set as a sub-feature heading */
.qa dt{font-size:var(--sub);line-height:1.25;letter-spacing:-.02em;font-weight:600}
/* running text: the body size in the full ink */
.sw-i p,.adds p,.qa dd p{font-size:var(--body);line-height:1.5;color:var(--ink)}

/* the comparison: a bill, three columns, the Florink column in a pale blue band */
.cmp-t{text-align:left}
.bill{margin-top:24px;padding:8px 16px 16px;border-radius:20px;background:#fff}
.bt{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.bt col{width:auto}
.bt thead th,.bt thead td{padding:14px 8px 10px;font-size:15px;line-height:1.2;font-weight:600;color:var(--ink2);text-align:right;vertical-align:bottom}
.bt thead .fl{color:var(--ink)}
.bt tbody th,.bt tbody td,.bt tfoot th,.bt tfoot td{padding:14px 8px;box-shadow:inset 0 1px 0 var(--rule);vertical-align:middle} /* taste-skill-ignore: a table's own rule */
.bt tbody th{font-size:16.5px;line-height:1.28;font-weight:560;letter-spacing:-.012em;text-align:left}
.bt th:first-child,.bt td:first-child{width:36%;padding-left:4px}
.bt th:nth-child(2),.bt td:nth-child(2){width:27%}
.bt .pr{font-size:20px;font-weight:600;letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ti{color:var(--ink3);margin-right:1px}
.bt .in{text-align:right;white-space:nowrap}
.bt .in .tk{display:inline-block;vertical-align:-3px;width:17px;height:17px;margin-right:5px;color:var(--tick)}
.bt .in span{font-size:18.5px;font-weight:560;letter-spacing:-.014em}
.bt .fl{background:var(--tint)}
.bt thead .fl{border-radius:12px 12px 0 0}
.bt tfoot .fl{border-radius:0 0 12px 12px}
/* the two totals and their label stand on one baseline, and the two "/mo" notes on another */
.bt tfoot th,.bt tfoot td{padding-block:18px 16px;box-shadow:inset 0 2px 0 var(--ink);vertical-align:baseline} /* taste-skill-ignore: the bill's total rule */
.bt tfoot th{font-size:16.5px;font-weight:600;text-align:left}
.bt .sum{text-align:right;white-space:nowrap}
.bt .sum b{display:block;font-size:32px;font-weight:560;letter-spacing:-.045em;line-height:1;margin-bottom:-.12em;color:var(--ink2)}
.bt .sum span{display:block;margin-top:8px;font-size:15px;line-height:1.2;font-weight:520;color:var(--ink2)}
.bt .sum.fl b{font-size:40px;font-weight:680;color:var(--ink)}
.bt .sum.fl span{color:var(--ink)}
.foot{margin-top:14px;padding-inline:4px;font-size:16px;line-height:1.46;color:var(--ink2)}
.foot b{font-weight:640;color:var(--ink)}
.src{margin-top:10px;box-shadow:inset 0 1px 0 var(--rule);scroll-margin-top:calc(var(--hdr) + 16px)} /* taste-skill-ignore: the bill's own rule */
.src summary{display:flex;align-items:center;gap:10px;min-height:52px;padding-inline:4px;cursor:pointer;list-style:none;font-size:16px;line-height:1.3;color:var(--ink2)}
.src summary::-webkit-details-marker{display:none}
.src summary::after{content:"";flex:none;width:9px;height:9px;margin-left:auto;margin-right:6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
.src[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.src-k{font-weight:640;color:var(--ink)}
.srcs{display:grid;gap:0;padding-inline:4px}
.src:not([open]) .srcs{display:none}
.srcs li{padding-block:14px 16px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.sf{display:flex;align-items:baseline;gap:10px;font-size:16.5px;font-weight:600;letter-spacing:-.012em}
.sf b{font-size:19px;font-weight:660;letter-spacing:-.02em}
.sf+p{margin-top:4px;font-size:16px;line-height:1.5;color:var(--ink2);overflow-wrap:anywhere}

/* the software. Phone first: one column; the app's dashboard under the words, then each claim followed by the part of the app that shows it.
   The two wrappers are columns only from 700 (the words, the panels); under it their children are the one column's own items */
.sw-g{display:flex;flex-direction:column}
.sw-a,.sw-b{display:contents}
.sw-t{order:1}
.sw-dash{order:2}
/* C1: one caption for the group of three panels, under the last of them on every width */
.sw-cap{order:9}
.i1{order:4}
.c1{order:5}
.i2{order:6}
.c2{order:7}
.sw-i{margin-top:26px;padding-top:16px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.sw-i p{margin-top:4px}
.sw-i p+p{margin-top:10px}
.sw-i .gl{margin-top:6px;font-size:16px;line-height:1.4;color:var(--ink3)}
.ap-r span{display:block}
.sw-i b{font-weight:640}
.sw-pn{margin:16px 0 0}
.sw-dash{margin-top:22px}

/* the three panels: parts of real screens at the reader's own size, each cut on a row line, no control that does nothing.
   Nothing inside is under 13px. The point of a panel carries the app's blue as a tint, no outline */
.crop{display:block;height:100%;padding:16px 14px;background:#fff} /* taste-skill-ignore: product screen */
.crop .fk-mod{font-size:13px} /* taste-skill-ignore: product screen */
.crop .fk-h1{font-size:22px} /* taste-skill-ignore: product screen */
.crop-mk{border-radius:10px;background:hsl(var(--primary)/.1)} /* taste-skill-ignore: the mark on a product screen */
.crop-dash .fk-kpis{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px} /* taste-skill-ignore: product screen */
.crop-dash .fk-kpi{padding:13px 16px} /* taste-skill-ignore: product screen */
.crop-dash .fk-kpi-v{margin-top:2px} /* taste-skill-ignore: product screen */
.crop-dash .fk-kpi-d,.crop-dash .fk-kpi-s{margin-top:4px} /* taste-skill-ignore: product screen */
.crop-dash .fk-kpi-l,.crop-dash .fk-kpi-d,.crop-dash .fk-kpi-s{font-size:13px} /* taste-skill-ignore: product screen */
/* on a phone the dashboard keeps two whole cards: the cash on hand and what September kept */
.crop-dash .fk-kpi:nth-child(2),.crop-dash .fk-kpi:nth-child(3){display:none} /* taste-skill-ignore: product screen */
/* the totals strip: two by two, labels and figures on two lines of their own, the month's lock under them */
.crop-tx .fk-tot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin-top:14px;padding-top:12px} /* taste-skill-ignore: product screen */
.crop-tx .fk-tot>.fk-lock{grid-column:1/-1;justify-self:start;margin:6px 0 0;padding:6px 10px;color:hsl(var(--foreground));font-weight:500} /* taste-skill-ignore: product screen */
.crop-tx .fk-tot em,.crop-tx .fk-lock{font-size:13px} /* taste-skill-ignore: product screen */
.crop-tx .fk-tot b{font-size:15px} /* taste-skill-ignore: product screen */
/* the table's first rows: Date, Bank text and Amount, cut on a row line */
.tx-rows{margin:14px -14px -16px;border-top:1px solid hsl(var(--border));font-size:13px;line-height:1.4;color:hsl(var(--foreground))} /* taste-skill-ignore: product screen */
.tx-r{display:grid;grid-template-columns:78px minmax(0,1fr) auto;column-gap:10px;align-items:center;min-height:48px;padding:6px 14px;border-top:1px solid hsl(var(--border))} /* taste-skill-ignore: product screen */
.tx-r.tx-h{min-height:36px;border-top:0;background:hsl(var(--muted));font-weight:500} /* taste-skill-ignore: product screen */
.tx-r b{display:block;font-weight:600} /* taste-skill-ignore: product screen */
.tx-r small{display:block;font-size:13px;color:hsl(215 16% 40%)} /* taste-skill-ignore: product screen */
.tx-m{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} /* taste-skill-ignore: product screen */
.tx-h .tx-m{font-weight:500} /* taste-skill-ignore: product screen */
@media (max-width:359px){.tx-r{grid-template-columns:minmax(0,1fr) auto}.tx-r>span:first-child{display:none}} /* taste-skill-ignore: product screen */
.crop-pay{display:grid;align-content:start;gap:14px} /* taste-skill-ignore: product screen */
.crop-pay .fk-sum{grid-template-columns:minmax(0,1fr) auto;padding:2px 8px 0} /* taste-skill-ignore: product screen */
.crop-pay .fk-sum span{text-align:right} /* taste-skill-ignore: product screen */
.crop-pay .fk-sum i{display:none} /* taste-skill-ignore: product screen */
.crop-pay .fk-foot{flex-direction:column;padding:8px} /* taste-skill-ignore: product screen */

/* add-ons: one ruled list. The three returns, HR, and the one priced row (the 2026 special) */
.add-g{display:grid;gap:22px}
.add-t .sub{max-width:30em}
.add-st{margin-top:12px;max-width:34em;font-size:var(--body);line-height:1.5;color:var(--ink)}
.adds{display:grid}
.adds li{padding-block:16px 18px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.adds li:last-child{box-shadow:inset 0 1px 0 var(--rule),inset 0 -1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.adds p{margin-top:4px;max-width:34em}
.adds a{display:inline-block;padding-block:11px;margin-block:-11px;white-space:nowrap}
.add-hd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.add-tag{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;border-radius:999px;background:var(--tint);color:var(--blue-lo);font-size:14px;line-height:1;font-weight:600;letter-spacing:-.005em}
.adds .add-pr{margin-top:8px;font-size:17px;font-weight:560}
.add-pr b{margin-right:3px;font-size:21px;font-weight:680;letter-spacing:-.02em}
.adds .add-note{margin-top:6px;font-size:16px;line-height:1.4;color:var(--ink3)}

/* before you sign up: the four questions, each answered in a line, then the link to where the page says more */
.faq-g{display:grid;gap:20px}
.qa{display:grid;gap:0}
.qa>div{padding-block:16px 18px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.qa dd p{margin-top:5px}
.qa a{display:inline-block;padding-block:11px;margin-block:-11px;white-space:nowrap}

@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) and (max-width:699px){.ctas{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px}.ctas .btn{align-self:auto}}

/* from 700: the first screen centred (the site's text hero), two columns where a list has room */
@media (min-width:700px){
 :root{--hdr:64px}
 .hero-copy{text-align:center}
 .hero h1.price-h{justify-content:center}
 .lede{margin-inline:auto;max-width:none;text-wrap:balance}
 .lede b{display:block}
 .ctas{align-items:center;gap:8px;margin-top:clamp(18px,1.7vw,26px)}
 .ctas .btn{align-self:center}
 .more{padding-block:0;font-size:17px}
 .sub{text-wrap:balance}
 .gl,.sw-i .gl{font-size:15px}
 .adds .add-note{font-size:15px}
 .inc-card{padding:clamp(18px,1.6vw,26px) clamp(24px,2.8vw,44px) clamp(22px,2.2vw,32px)}
 .inc-st{margin-top:2px;font-size:clamp(17px,1.25vw,19px)}
 .inc{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.4vw,56px);margin-top:clamp(8px,.7vw,12px)}
 .inc li{font-size:clamp(17px,1.32vw,20px);padding-block:clamp(11px,.85vw,13px)}
 .inc-vow{margin-top:clamp(18px,1.6vw,24px);padding:clamp(16px,1.4vw,22px) clamp(18px,1.8vw,26px)}
 .inc-vow .v1{font-size:17px}
 .inc-vow .vh{margin-top:4px;font-size:clamp(27px,2.2vw,32px)}
 .inc-vow .v3{font-size:clamp(17px,1.25vw,18px)}
 .inc-cu{margin-top:clamp(12px,1.2vw,16px);text-align:center}
 .cmp-t{text-align:center}
 .cmp{padding-top:clamp(44px,3.4vw,60px)}
 .bill{margin:clamp(22px,2vw,32px) 0 0;padding:clamp(10px,1.4vw,22px) clamp(18px,2.6vw,40px) clamp(18px,2vw,30px)}
 .bt thead th,.bt thead td{padding:18px 18px 12px;font-size:16px}
 .bt tbody th,.bt tbody td{padding:clamp(13px,1vw,16px) 18px}
 .bt tfoot th,.bt tfoot td{padding:clamp(20px,1.8vw,28px) 18px clamp(16px,1.4vw,22px)}
 .bt th:first-child,.bt td:first-child{width:40%;padding-left:0}
 .bt tbody th{font-size:clamp(17px,1.3vw,20px)}
 .bt tfoot th{font-size:clamp(17px,1.3vw,20px)}
 .bt .pr{font-size:24px}
 .bt .in span{font-size:19px}
 .bt .in .tk{width:19px;height:19px}
 .bt .sum b{font-size:clamp(44px,4.4vw,64px)}
 .bt .sum.fl b{font-size:clamp(56px,5.6vw,84px)}
 .bt .sum span{margin-top:10px;font-size:16px}
 .foot{max-width:46em;padding-inline:0;font-size:16px}
 .sf+p{font-size:17px}
 /* the software from 700: the words (the two claims side by side), then the three panels as one block: the dashboard across, the two crops under it, one caption */
 .sw-g{display:grid;row-gap:clamp(28px,3.6vw,44px)}
 .sw-a{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.4vw,48px)}
 .sw-t{grid-column:1/-1}
 .sw-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
 .sw-pn{margin:0}
 .sw-dash,.sw-cap{grid-column:1/-1}
 .sw-cap{margin-top:-4px}
 .c1,.c2{display:grid}
 .crop{padding:18px 16px}
 .tx-rows{margin:14px -16px -18px}
 .tx-r{padding-inline:16px}
 /* T7: the add-ons headline stands over a full-width list, so it is centred with its two lines under it */
 .add-t{text-align:center}
 .add-t .sub,.add-st{margin-inline:auto}
 .crop-dash .fk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} /* taste-skill-ignore: product screen */
 .crop-dash .fk-kpi:nth-child(2){display:block} /* taste-skill-ignore: product screen */
 .crop-dash .fk-kpi:nth-child(4){display:none} /* taste-skill-ignore: product screen */
 /* add-ons: two columns, the special across both with its price at its right */
 .adds{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.4vw,48px)}
 .adds li:nth-last-child(2){box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
 .adds li.add-cu{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,3vw,48px);align-items:center}
 .add-cu .add-hd,.add-cu p{grid-column:1}
 .adds .add-cu .add-pr{grid-column:2;grid-row:1/span 3;display:grid;justify-items:end;gap:6px;margin-top:0;text-align:right}
 .add-cu .add-pr b{margin:0;font-size:clamp(36px,3vw,44px);line-height:1;letter-spacing:-.04em}
 .qa{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.4vw,56px)}
}
/* from 900: the questions beside their headline */
@media (min-width:900px){
 .faq-g{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);column-gap:clamp(32px,5vw,96px);align-items:start}
}
@media (min-width:1000px){
 .top .c{gap:6px}
 .nav{display:flex;gap:2px;margin:0 auto 0 20px}
 .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-size:15px;font-weight:460;color:var(--ink)}
 .mark{margin-right:0}
 .login{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;font-weight:480}
 .top .btn{order:0;min-height:44px;padding:0 20px;font-size:15px}
 .menu{display:none}
 /* the software: the words beside the block of panels, both centred on one line */
 .sw-g{grid-template-columns:minmax(0,1fr) minmax(0,56%);column-gap:clamp(36px,4vw,60px);align-items:center}
 .sw-a{display:block}
 .sw-i{margin-top:clamp(20px,2vw,28px)}
 /* add-ons on one grid of three: the returns in a row, then HR beside the special, one rule closing the list under both */
 :root{--agap:clamp(28px,3.4vw,48px)}
 .add-g{gap:clamp(28px,3vw,44px)}
 .adds{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--agap);row-gap:clamp(8px,1vw,14px)}
 .adds li{padding-block:20px 22px}
 .adds li.add-cu{grid-column:2/-1}
 .adds li:nth-last-child(2){box-shadow:inset 0 1px 0 var(--rule),inset 0 -1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
}
@media (min-width:1240px){
 .sw-b{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
 .crop-dash .fk-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} /* taste-skill-ignore: product screen */
 .crop-dash .fk-kpi:nth-child(3){display:block} /* taste-skill-ignore: product screen */
}
/* motion. The page is finished without any of it */
@media (prefers-reduced-motion:no-preference){
 .anim .rise,.anim h1{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 h1,.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 */

/* ================= fourth pass (11/11, launch copy) ================= */
/* the plan and, beside it, the catch-up sale card (shared .sale-card). On a phone the sale card stands under the plan's card, on the same band */
.inc-row{display:grid;gap:14px;align-items:start}
@media (min-width:1000px){.inc-row{grid-template-columns:minmax(0,1fr) minmax(300px,344px);gap:clamp(14px,1.5vw,20px)}}
/* what counts and what is quoted: three plain lines under the list */
.inc-g{display:grid;gap:4px;margin-top:14px;font-size:16px;line-height:1.45;color:var(--ink2)}
/* the promise strip, stacked: the lead-in, the middle line as its headline, the reimbursement line, then "notice" in plain words */
.inc-vow .v3{font-weight:460;color:var(--on-deep2)}
.inc-vow .vh{white-space:normal}
/* Part 3's five one-line notes (awaiting the owner's yes): a quiet list at the card's foot */
.plan-notes{display:grid;gap:8px;margin-top:16px;font-size:16px;line-height:1.4;color:var(--ink)}
.plan-notes li{display:flex;align-items:flex-start;gap:10px}
@media (min-width:700px) and (max-width:999px),(min-width:1240px){.plan-notes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.4vw,56px)}}
/* add-ons: the four returns, each quoted after signup, and HR. One rule over every item */
.adds li,.adds li:last-child,.adds li:nth-last-child(2){box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a list's own rule */
.adds .add-q{margin-top:8px;font-size:16px;line-height:1.3;font-weight:600;color:var(--ink)}
/* where we work: the heading beside the two lists of states */
.where-g{display:grid;gap:20px}
.where-l{display:grid;gap:12px;align-content:start}
.where-l p{max-width:40em;font-size:var(--b2);line-height:1.5;color:var(--ink)}
.where-l .where-n{font-size:var(--body);color:var(--ink2)}
.where-l a{display:inline-block;padding-block:10px;margin-block:-10px}
@media (min-width:900px){.where-g{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);column-gap:clamp(32px,5vw,96px);align-items:start}}
/* the promise's middle line on a phone: under the size the inspector reads as a statement, so its three lines are text, not a headline */
@media (max-width:699px){.inc-vow .vh{font-size:22px;line-height:1.16}}

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