.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}
/* A's stage, pills and stacked sheets; B's ribbon, price plate and close. Written for the phone first, where everything lines up left. */
: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;
 /* the deep field of the plate and the close. The art sets these two; the plate, the close and their scrims read from them */
 --deep:#0A1C7C;--deep-rgb:10,28,124;
 --on-deep:#FFFFFF;--on-deep2:#E6EEFF;
 --g:clamp(16px,4.6vw,44px);
 --wrap:1240px;
 --r:clamp(24px,3.6vw,52px);
 --hdr:56px;
 --L:min(82vw,130vh,1700px);
 --ph:min(358px,calc(100vw - var(--g)*2));
 --out:cubic-bezier(.16,1,.3,1);
 /* one peak per section. At 1440: 100 opens and closes, 88 inside a section, 72 heads, 46 subheads */
 --h1:min(9.75vw,clamp(54px,6.94vw,132px),11.1vh);
 --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);
}
@supports (height:1dvh){:root{--L:min(82vw,130dvh,1700px)}}
@media (min-width:1441px){:root{--wrap:min(86.1vw,1516px)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-tap-highlight-color:rgba(27,79,214,.14)}
html.menu-lock{overflow:hidden}
body{margin:0;background:#fff;color:var(--ink);font:430 var(--body)/1.55 "Pretendard Std",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
main{overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none;touch-action:manipulation}
b{font-weight:640}
i,u{font-style:normal;text-decoration:none}
q{quotes:"\201C" "\201D"}
.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}
.hl{display:inline}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

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

/* header: under scripting the button waits until the hero's has gone behind the bar; without it, it is simply there */
.top{position:sticky;top:0;z-index:30;background:#fff;padding-top:env(safe-area-inset-top)}
/* at the top of the page the bar stands on the picture. The first scroll gives it its white back, so nothing runs under the logo */
.js:not(.menu-lock) .top:not(.solid){background:transparent}
.top .c{display:flex;align-items:center;gap:6px;height:var(--hdr);max-width:none;padding-inline:max(var(--g),env(safe-area-inset-left),calc((100vw - var(--wrap))/2)) max(var(--g),env(safe-area-inset-right),calc((100vw - var(--wrap))/2))}
.mark{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:21px;font-weight:680;letter-spacing:-.03em;margin-right:auto}
.mark img{width:33px;height:24px}
.nav{display:none}
.login{display:none}
.top .btn{order:2}
.menu{order:3}
.menu summary{display:flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 2px 0 10px;font-size:16px;font-weight:560;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.menu summary::-webkit-details-marker{display:none}
/* the mark for the state: two bars, or a drawn cross when open, so the same word closes it */
.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 first screen. Phone: headline, offer, trust, then the dashboard in its light, then the facts */
.hero{position:relative;z-index:1;display:flex;flex-direction:column;clip-path:inset(0);padding-bottom:calc(var(--r) + 30px)}
.hero-copy{order:1;position:relative;z-index:2;padding:10px var(--g) 0}
h1{font-size:var(--h1);line-height:1.04;letter-spacing:-.042em}
.ln{display:block;white-space:nowrap}
.lede{margin:11px 0 0;max-width:30em;font-size:clamp(16.5px,4.6vw,18px);line-height:1.34;font-weight:460;letter-spacing:-.014em;text-wrap:pretty}
.punch{font-weight:660;white-space:nowrap}
.ctas{display:flex;gap:10px;margin-top:16px}
.ctas .btn{flex:1 1 0;padding:0 12px}
.trust-sheet,.trust-g{display:contents}
.trust{order:2;position:relative;z-index:2;margin:20px var(--g) 0}
.trust-main{display:block;font-size:clamp(22px,6.15vw,24px);line-height:1.14;font-weight:680;letter-spacing:-.032em}
.trust-main b{color:var(--blue);font-weight:680}
.trust-main .nb{display:block}
.trust-sub{display:block;margin-top:7px;font-size:clamp(16.5px,4.6vw,18px);line-height:1.3;font-weight:460;letter-spacing:-.014em;color:var(--ink2);text-wrap:balance}
.stage{order:3;position:relative;z-index:1;margin-top:calc(17vw + 6px);padding-inline:var(--g)}
.art{position:absolute;z-index:-1;left:50%;top:calc(-418.7*100vw/390);bottom:-22px;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none;isolation:isolate}
.art picture{position:absolute;inset:0}
.art img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
.fk-laptop{display:none}
.dash-p{display:none}
.facts{order:4;position:relative;z-index:2;display:grid;gap:10px;margin:-40px 0 0;padding:24px var(--g) 0;background:#fff;border-radius:var(--r) var(--r) 0 0;font-size:17px;line-height:1.3;font-weight:540;letter-spacing:-.01em}
.facts li{display:flex;align-items:flex-start;gap:11px}

/* sheets: each rises over the last on a large rounded edge. The price plate and the close are the two colour peaks */
.sheet{position:relative;z-index:2;overflow:hidden;margin-top:calc(var(--r)*-1);padding-block:var(--pad) calc(var(--pad) + var(--r));background:#fff;border-radius:var(--r) var(--r) 0 0}
.sheet.mist{background:var(--mist)}

/* three apps and a bookkeeper */
.cmp>.c{position:relative;z-index:1}
.cmp-light{position:absolute;z-index:0;inset:0;pointer-events:none}
.cmp-light picture{display:contents}
.cmp-light img{display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.scope{margin-top:10px;font-size:clamp(18px,1.65vw,28px);line-height:1.28;font-weight:500;letter-spacing:-.018em;color:var(--ink2)}
.board{position:relative;display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(28px,4.4vw,72px);--pg:clamp(12px,1.4vw,20px)}
/* the plain panel: the same grid area, top, bottom and radius as the plate beside or under it */
.board::before{content:"";grid-column:1;grid-row:1/8;border-radius:20px;background:#fff}
.b-row,.jobs{display:contents}
.plate{position:relative;grid-column:1;grid-row:8/15;overflow:hidden;margin-top:var(--pg);border-radius:20px;background:#0A1C7C}
.cmp-t,.foot{position:relative;z-index:1}
.plate img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:100% 100%}
.cell{position:relative;grid-column:1;grid-row:var(--r);padding-inline:20px}
.cell:last-child{grid-row:calc(var(--r) + 7);color:#fff;padding-inline:22px}
.heads .cell{padding-block:20px 12px}
.heads .cell:last-child{padding-top:calc(26px + var(--pg));padding-bottom:6px}
.board h3{font-size:clamp(26px,3.2vw,48px);letter-spacing:-.032em}
.sub2{margin-top:5px;font-size:17px;line-height:1.3;color:var(--ink2)}
.cell:last-child h3{color:#fff}
.cell:last-child .sub2{color:var(--on-deep2)}
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center;padding-block:8px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a table's own rule */
.td{grid-column:1;grid-row:1/3;font-size:17px;line-height:1.28;font-weight:560;letter-spacing:-.012em}
.vn{grid-column:2;grid-row:2;justify-self:end;font-size:15px;line-height:1.3;color:var(--ink2);white-space:nowrap}
.pr{grid-column:2;grid-row:1;justify-self:end;font-size:clamp(20px,1.9vw,26px);line-height:1.12;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ti{color:var(--ink3);margin-right:1px}
.did{display:flex;align-items:center;gap:11px;min-height:47px;font-size:19px;line-height:1.25;font-weight:560;letter-spacing:-.012em}
.did .mk{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff}
.did .tk{width:15px;height:15px}
.did.mine .mk{background:#fff;color:var(--deep)}
.sums .cell{padding-block:10px 2px}
.sums .cell:first-child{display:flex;justify-content:flex-end;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a table's own rule */
.sums .cell:last-child{padding-block:22px 0}
.total{display:flex;align-items:baseline;gap:7px}
.total b{font-weight:660;letter-spacing:-.045em;line-height:1}
.total span{font-size:18px;font-weight:520}
.sums .cell:first-child .total b{font-size:44px;font-weight:560;color:var(--ink2)}
.sums .cell:first-child .total span{font-size:16px;color:var(--ink2)}
.sums .cell:last-child .total b{font-size:min(28.5vw,116px);color:#fff}
.sums .cell:last-child .total span{font-size:20px;color:#fff}
.total-note{margin-top:8px;font-size:16.5px;line-height:1.35;color:var(--on-deep2)}
.time .cell{display:flex;align-items:baseline;gap:9px;font-size:17px}
.time .cell:first-child{padding-block:4px 18px}
.time .cell:last-child{padding-block:12px 22px}
.time .cell span{color:var(--ink2)}
.time .cell:last-child span{color:var(--on-deep2)}
.time .cell span::after{content:":"}
.time b{font-weight:640}
/* phone: no panel of its own. The note is the deep plate's last row, on the same rule as the rows above it, so the pair of panels ends once */
.foot{grid-column:1;grid-row:15;margin-inline:22px;padding:13px 0 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);font-size:14.5px;line-height:1.46;color:var(--on-deep2)} /* taste-skill-ignore: a table's own rule */
.foot b{font-weight:640;color:#fff}
.foot a{display:inline-block;padding:12px 8px;margin:-12px -8px;color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:699px){.plate{grid-row:8/16}}

/* the month. Phone: seven equal columns, quiet, and the agenda under it says what happened. The one loud day is today */
.mon{padding-bottom:0}
.mo{--cols:repeat(7,minmax(0,1fr));--gp:3px;--rowh:clamp(38px,11.3vw,48px);margin-top:20px}
.mo .lf-h{display:flex;align-items:baseline;margin-bottom:10px}
.lf-m{font-size:clamp(22px,2.2vw,32px);font-weight:640;letter-spacing:-.028em}
.lf-m i{font-weight:440;color:var(--ink2)}
.wk{display:grid;grid-template-columns:var(--cols);gap:var(--gp);margin-bottom:5px}
.wk i{font-size:13px;line-height:1.2;font-weight:540;letter-spacing:-.01em;color:var(--ink2);text-align:center}
.wk i::before{content:attr(data-l)}
.grid-m{position:relative;display:grid;grid-template-columns:var(--cols);grid-auto-rows:var(--rowh);gap:var(--gp)}
.days,.evs{display:contents}
.d{grid-column:var(--c);grid-row:var(--r);display:grid;place-items:center;font-size:14px;line-height:1;font-weight:520;color:var(--ink);font-variant-numeric:tabular-nums}
.d::before{content:attr(data-n)}
.d.o{color:var(--ink3)}
.ev{position:relative;z-index:1;grid-column:var(--c);grid-row:var(--r);display:grid;place-items:center;border-radius:12px;font-size:14px;line-height:1;font-weight:640;font-variant-numeric:tabular-nums;color:#075F6C;background:#DCF1EE}
.ev::before{content:attr(data-f)}
.ev .tk,.ev b,.ev u{display:none}
.ev.now{color:#fff;background:var(--blue)}
@media (max-width:767px){
 .you-s{--sb:calc(var(--pad)*.8 + var(--r) + 20px)!important}
 /* the same light across the month as on desktop, and today on the deep field */
 .ev.t{color:#fff;background-color:#0B3FB8;background-image:linear-gradient(112deg,#0B2FDC 4%,#0B4FC2 40%,#0A7C80 76%,#0B7F6E 100%);background-size:700% 500%;background-position:calc((var(--c) - 1)/6*100%) calc((var(--r) - 1)/4*100%)} /* taste-skill-ignore: one light across the month */
 .ev.now{background:var(--ink)}
}

/* month and payroll are one lit stage from 1000 up. Below that the wrapper is not there and nothing moves */
.duo{display:contents}
.duo-light{display:none}

/* the ledger finishes the month */
.you-s{--sb:calc(var(--pad)*.8 + var(--r));position:relative;z-index:2;overflow:hidden;padding-block:var(--pad) var(--sb);background:#fff}
.you-g{position:relative;z-index:1;display:flex;flex-direction:column}
.you-t{display:contents}
.ledger{margin-top:12px}
.ledger .lf-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px}
.ledger .lf-m{display:none}
.dh{font-size:17px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.done{display:grid}
.dn{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;min-height:44px;box-shadow:inset 0 1px 0 var(--rule)} /* taste-skill-ignore: a table's own rule */
.dt{font-size:17px;font-weight:540;color:var(--ink2);font-variant-numeric:tabular-nums}
.dt::before{content:attr(data-n)}
.dl{font-size:17.5px;font-weight:560;letter-spacing:-.012em}
.dn .mk{color:var(--tick)}
.dn .tk{width:20px;height:20px}
.yours{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;min-height:58px;margin-top:6px;padding-inline:14px 16px;border-radius:14px;background:var(--ink);color:#fff}
.yours .dt{color:#E3EBFC}
.yours .dl{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-weight:520;color:#E3EBFC}
.yours .dl b{font-size:18.5px;font-weight:640;color:#fff}
.yours .mk{display:none}
.you{font-size:min(9.5vw,clamp(52px,5.8vw,92px));letter-spacing:-.04em;line-height:1.02;white-space:nowrap}
/* the answer to the dialog's warning, in site copy, straight beside it. Phone: under the heading, the last thing above the dialog */
.you-r{position:relative;z-index:1;margin-top:8px;font-size:17px;line-height:1.36;font-weight:460;letter-spacing:-.012em;color:var(--ink2)}
.you-r span{display:block}
.you-r b{font-weight:640;color:var(--ink)}
.ph-stage{position:relative;width:var(--ph);margin:20px auto 0}
/* the colour's edge stands below the words and crosses the dialog */
.ph-light{position:absolute;z-index:0;inset:112px 0 0;pointer-events:none}
.ph-light img{display:block;width:100%;height:100%;max-width:none;object-fit:fill}

/* born inside and the promise: two sections since round S second pass (rules in the block at the end) */
/* the proof: the firm stated in type at the section's second size, so it is read with the name and not after it */

/* quickbooks: the words, then the real screen with the ribbon running in behind it.
   To swap the art: the one line in body.tpl.html inside .qb-light */
.qb{padding-block:0 calc(var(--pad)*.8 + var(--r) + 14px)}
.qb-t{position:relative;z-index:1}
.qb-stage{position:relative;isolation:isolate;width:calc(100vw - var(--g)*2);margin:30px auto 0}
.qb-light{position:absolute;z-index:-1;left:calc(var(--g)*-1);right:calc(var(--g)*-1);top:-62px;bottom:-70px;pointer-events:none}
.qb-light picture{display:contents}
.qb-light img{display:block;width:100%;height:100%;max-width:none}
.qb .fk-laptop{display:none}
.vow-o{position:relative;z-index:1;min-width:0}

.march{padding:18px 14px 14px;border-radius:20px;background:#fff;color:var(--ink)} /* round S phase 2: the white page stands on the field by its own tone (the soft lift it had could not be told from none on the frames) */
.march .lf-h{margin-bottom:8px;padding-left:2px}
.mg{--mr:36px;--ml:52px;position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:var(--mr) var(--mr) var(--ml) var(--mr) var(--mr);gap:3px}
.n{grid-column:var(--c);grid-row:var(--r);padding-top:12px;font-size:14px;line-height:1;font-weight:520;text-align:center;font-variant-numeric:tabular-nums}
.n::before{content:attr(data-n)}
.n.o{color:var(--ink3)}
.n.ll{position:relative;z-index:2;font-weight:640;color:#fff}
/* a blank month is the joke. Long lunch is one tile in October's material, its three dates on it in white and its label under them */
.lunch{position:relative;z-index:1;grid-column:2/span 3;grid-row:3;display:flex;align-items:flex-end;padding:0 10px 8px;border-radius:12px;background-color:#0B3FB8;background-image:linear-gradient(112deg,#0B2FDC 4%,#0B4FC2 40%,#0A7C80 76%,#0B7F6E 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.26);color:#fff;font-size:14px;line-height:1.1;font-weight:640;letter-spacing:-.016em;white-space:nowrap} /* taste-skill-ignore: the same light as October's tiles, and its thin top highlight */

/* footer */
@media (hover:hover){.nav a:hover,.login:hover{color:var(--ink2)}}

/* product screens: real phone layouts at true size */
.fk-wrap,.vow-o .fk-grid{position:relative}
.vow-o .fk-tx{padding-bottom:14px}
.vow-o .fk-grid{flex:none;border-bottom:1px solid hsl(var(--border));border-radius:var(--radius)} /* taste-skill-ignore: the table's own edge */
.vow-o .fk-grid tbody tr:last-child td{border-bottom:0}
.fk-qb{display:inline-flex;align-items:center;justify-content:center;width:44px;height:38px;border:1px solid hsl(var(--border));border-radius:4px;color:hsl(var(--muted-foreground))} /* taste-skill-ignore: the real per-row message button */
/* a table that runs on past the edge fades, so it reads as scrolling and not as a cut */
.fk-wrap::after{content:"";position:absolute;z-index:2;top:0;right:0;bottom:0;width:40px;pointer-events:none;background:linear-gradient(90deg,hsl(0 0% 100%/0),hsl(0 0% 100%))} /* taste-skill-ignore: edge fade */
.dash-p .fk-fit{--fk-w:var(--pdw)!important;--fk-h:calc(var(--pdw)*2.1641)!important}
.dash-p .fk-main{left:0;top:173px}
.dash-p .fk-page{padding:15px 15px 0}
.dash-p .fk-dash{margin-top:12px}
.dash-p .fk-kpis{grid-template-columns:minmax(0,1fr);gap:12px}
.dash-p .fk-kpi{padding:13px 16px}
.dash-p .fk-kpi-v{margin-top:2px}
.dash-p .fk-kpi-d,.dash-p .fk-kpi-s{margin-top:4px}
.dash-p .fk-kpi-l,.dash-p .fk-kpi-d,.dash-p .fk-kpi-s{font-size:12.5px}
.dash-p .fk-ph{display:none}
.dash-p .fk-tag{height:calc(21px/var(--fk-s,1));padding-inline:calc(8px/var(--fk-s,1));flex:none}
/* the island and home bar stay their true shape on a narrower stage */
.fk-phone .fk-stage::after{background-position:50% 0;background-size:auto 100%}
.fk-phone .fk-tag{font-size:max(15px,calc(12.5px/var(--fk-s,1)));height:1.8em;padding-inline:.6em}
.dash-p .fk-phone .fk-tag{font-size:calc(12.5px/var(--fk-s,1));height:calc(21px/var(--fk-s,1));padding-inline:calc(8px/var(--fk-s,1))}
.fk-phone .fk-behind .fk-mod{font-size:15px}
.fk-phone .fk-per>div{flex-wrap:wrap;row-gap:2px}
.fk-phone .fk-dlg-b{gap:10px}
@media (max-width:699px),(max-width:950px) and (max-height:500px){
 .dash-m .fk-tag,.vow-o .fk-tag{font-size:12.5px;height:22px}
 /* the dashboard is one column below 640 (PORTAL_KPI_GRID), and the window is cropped to two and a half cards */
 .dash-m .fk-fit{--fk-w:var(--dw)!important;--fk-h:var(--dh)!important}
 .dash-m .fk-top,.dash-m .fk-side{display:none}
 .dash-m .fk-main{left:0;top:0}
 .dash-m .fk-page{padding:15px 15px 0}
 .dash-m .fk-dash{margin-top:12px}
 .dash-m .fk-kpis{grid-template-columns:minmax(0,1fr);gap:12px}
 .dash-m .fk-kpi:nth-child(n+4){display:none}
 .dash-m .fk-kpi{padding:13px 16px}
 .dash-m .fk-kpi-v{margin-top:2px}
 .dash-m .fk-kpi-d,.dash-m .fk-kpi-s{margin-top:4px}
 .dash-m .fk-kpi-l,.dash-m .fk-kpi-d{font-size:12.5px}
 .dash-m .fk-kpi-s{font-size:12.5px}
}
:root{--dw:288;--dh:372;--tw:288;--th:379;--sy:517;--tagy:18;--tagl:auto;--tagr:29px}
@media (min-width:360px){:root{--dw:326;--tw:326;--th:350;--sy:436;--tagy:105;--tagl:29px;--tagr:auto}}
@media (min-width:390px){:root{--dw:354;--tw:354;--th:320;--sy:380;--tagy:76}}
@media (min-width:430px){:root{--dw:390;--tw:390}}
@media (min-width:540px){:root{--dw:490;--tw:490;--th:295;--sy:328;--tagy:48;--tagl:178px}}
@media (min-width:700px){:root{--tw:720;--th:291;--sy:247;--tagy:46;--tagl:29px}}
@media (min-width:640px) and (max-width:699px),(max-width:950px) and (max-height:500px){
 :root{--dw:560;--dh:393}
 .dash-m .fk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dash-m .fk-kpi:nth-child(n+4){display:block}
}
@media (max-width:950px) and (max-height:500px){:root{--dh:276}.dash-m .fk-kpi:nth-child(n+5){display:none}}
/* round S phase 2 (7): below 768 the Transactions crop is no longer a scaled, scrolled window (its totals card had lost its top edge under the chip bar,
   and a long payee was cut on the narrowest phones). It stands in the page's flow at true size: the slim chip bar (S3; shared/system.css draws it), the month's
   totals as one whole card (the filter fields above them are cropped out), then the first rows with the two columns a phone has room for. Nothing is scaled */
@media (max-width:767px){
 .v2 .fk-fit{--fk-s:1!important;aspect-ratio:auto;overflow:visible;background:none}
 .v2 .fk-stage{position:relative;width:auto;height:auto;overflow:visible;transform:none}
 .v2 .fk-tx{position:relative;inset:auto;padding:52px 14px 14px}
 .v2 .fk-tx-h{position:absolute;z-index:4;left:14px;top:8px;display:block}
 .v2 .fk-mod,.v2 .fk-h1,.v2 .fk-tx-h .fk-btn,.v2 .fk-sub>span:not(.fk-tag),.v2 .fk-lab,.v2 .fk-find{display:none}
 .v2 .fk-sub{margin:0}
 .v2 .fk-filt{padding:12px 14px}
 .v2 .fk-tot{padding-top:0;border-top:0}
 .v2 .fk-grid{overflow:hidden}
 .v2 .fk-grid colgroup{display:none}
 .v2 .fk-grid table{table-layout:auto;width:100%}
 .v2 .fk-grid th:nth-child(-n+2),.v2 .fk-grid td:nth-child(-n+2),.v2 .fk-grid th:nth-child(n+5),.v2 .fk-grid td:nth-child(n+5){display:none}
 .v2 .fk-grid th,.v2 .fk-grid td{padding-inline:12px}
 /* a long payee takes a second line; no cell ends in an ellipsis (S4) */
 .v2 .fk-grid td:nth-child(3){padding-block:6px;white-space:normal}
 .v2 .fk-grid td:nth-child(3) div,.v2 .fk-grid td:nth-child(3) small{overflow:visible}
 .v2 .fk-grid th:nth-child(4),.v2 .fk-grid td:nth-child(4){width:1%;white-space:nowrap}
}
@media (min-width:640px) and (max-width:767px){
 .v2 .fk-grid th:nth-child(1),.v2 .fk-grid td:nth-child(1),.v2 .fk-grid th:nth-child(5),.v2 .fk-grid td:nth-child(5){display:table-cell;width:1%;white-space:nowrap}
}
/* the sample tag stays readable however far a screen scales down; the page's own tag carries it, so the sidebar's steps aside */
@media (min-width:700px){
 .fk-laptop .fk-biz .fk-tag{display:none}
 .fk-laptop .fk-tag,.vow-o .fk-tag{font-size:calc(12.5px/var(--fk-s,1));height:calc(22px/var(--fk-s,1));padding-inline:calc(9px/var(--fk-s,1))}
}
/* (round S phase 2: the payroll dialog is no longer scaled on a phone, so the per-width design sizes that stood here are gone; see the block at the end) */
@media (max-width:339px){.mark{font-size:0;gap:0}}
@media (min-width:480px){.ctas .btn{flex:0 0 auto;padding:0 28px}}
/* phone: the total closes the price column as each row does, the figure with its label under it, at the panel's bottom right. Your time shares its row */
@media (max-width:699px){
 .pr{font-size:22px}
 .sums .cell:first-child{padding-block:10px 18px}
 .sums .cell:first-child .total{flex-direction:column;align-items:flex-end;gap:3px}
 .sums .cell:first-child .total span{font-size:15px}
 .time .cell:first-child{grid-row:6;align-self:end;padding-block:0 18px}
}
/* a phone gives the rows room for a thumb */
@media (max-width:699px){.job{padding-block:12px}.did{min-height:55px}.cmp{padding-block:calc(var(--pad) + 8px) calc(var(--pad) + var(--r))}.mon{padding-top:var(--pad)}}

/* phone: the month in one mist card. Each Done row's date is a small tile in its calendar tile's colour, the same slice of the same light. Today's stays black */
@media (max-width:767px){
 .cal{margin-top:10px;padding:12px;border-radius:20px;background:var(--mist)}
 .mo{--rowh:clamp(31px,8.9vw,36px);margin-top:0}
 .mo .lf-h{margin-bottom:5px}
 .wk{margin-bottom:4px}
 .ledger{margin-top:10px}
 .ledger .lf-h{padding-bottom:4px}
 .dn{grid-template-columns:37px minmax(0,1fr) auto;min-height:36px;box-shadow:none}
 .dn .dt{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;color:#fff;font-size:14px;line-height:1;font-weight:640;background-color:#0B3FB8;background-image:linear-gradient(112deg,#0B2FDC 4%,#0B4FC2 40%,#0A7C80 76%,#0B7F6E 100%);background-size:700% 500%;background-position:calc((var(--c) - 1)/6*100%) calc((var(--r) - 1)/4*100%)} /* taste-skill-ignore: one light across the month */
 .dl{font-size:16.5px}
 .yours{grid-template-columns:37px minmax(0,1fr) auto;min-height:46px;margin:7px -7px 0;padding-inline:7px 14px}
 .yours .dt{width:27px;text-align:center}
}
/* from 768 the calendar is a rounded panel with big numerals, and the days carry their own labels */
@media (min-width:768px){
 .cal{display:grid;gap:clamp(20px,2.4vw,36px);margin-top:clamp(24px,2.5vw,40px);padding:clamp(20px,2.3vw,34px);border-radius:clamp(22px,2.4vw,34px);background:var(--mist)}
 .mo{--gp:6px;--rowh:clamp(84px,6.4vw,104px);min-width:0;margin-top:0}
 .mo .lf-h{margin-bottom:10px;line-height:1}
 .wk{margin-bottom:6px}
 .wk i{font-size:15px;text-align:left;padding-left:12px}
 .d{display:block;padding:12px 0 0 12px;font-size:clamp(18px,1.55vw,24px);font-weight:600}
 .d.w,.d.o{font-weight:500;color:var(--ink3)}
 .ev{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);place-items:stretch;padding:12px 4px 10px 12px;font-size:clamp(18px,1.55vw,24px);font-weight:640}
 .ev::before{grid-column:1;grid-row:1;line-height:1}
 .ev b{display:block;grid-column:1/-1;grid-row:2;align-self:end;font-size:clamp(14px,1.03vw,17px);line-height:1.12;font-weight:640;letter-spacing:-.02em}
 .ev u{display:block;grid-column:2;grid-row:1;align-self:center;margin-right:4px;font-size:clamp(13px,1vw,15px);line-height:1;font-weight:560}
 /* the experts' days: one gradient across the whole grid, each tile its own slice, so the colour travels from sapphire to sea green through the month. Yours are the deep field */
 .ev.t{color:#fff;background-color:#0B3FB8;background-image:linear-gradient(112deg,#0B2FDC 4%,#0B4FC2 40%,#0A7C80 76%,#0B7F6E 100%);background-size:700% 500%;background-position:calc((var(--c) - 1)/6*100%) calc((var(--r) - 1)/4*100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.26)} /* taste-skill-ignore: one light across the month, and a thin top highlight for depth */
 .ev.y{color:#fff;background:var(--deep)}
 .ev.now{color:#fff;background:var(--ink)}
 .ev.nx{color:var(--deep);background:none;box-shadow:inset 0 0 0 1.5px var(--deep)} /* taste-skill-ignore: a pending entry, not yet done */
 /* March in October's language */
 .mg{--mr:clamp(56px,4.3vw,72px);--ml:var(--mr);gap:10px 8px}
 .n{padding:10px 0 0 clamp(4px,.76vw,11px);font-size:clamp(18px,1.55vw,24px);font-weight:600;text-align:left}
 .n.w,.n.o{font-weight:500;color:var(--ink3)}
 .n.ll{font-weight:640;color:#fff}
 .lunch{padding:0 clamp(4px,.76vw,11px) 9px;font-size:clamp(14px,1.03vw,17px)}
 .ledger{margin-top:0}
 .ledger .lf-h{padding-bottom:6px}
 .dh{font-size:clamp(18px,1.4vw,22px);font-weight:640;letter-spacing:-.016em}
 .dn{grid-template-columns:clamp(46px,4.2vw,64px) minmax(0,1fr) 22px;min-height:clamp(52px,4.5vw,68px);box-shadow:none}
 .dt{font-size:clamp(26px,2.5vw,38px);line-height:1;font-weight:680;letter-spacing:-.03em;color:var(--ink)}
 .dl{font-size:clamp(16px,1.2vw,19px);font-weight:520}
 .dn .mk{color:var(--ink)}
 .yours{grid-template-columns:clamp(46px,4.2vw,64px) minmax(0,1fr);min-height:clamp(64px,5.2vw,78px);margin-top:10px;padding-inline:14px 16px;border-radius:16px;background:var(--ink)}
 .yours .dt{color:#fff}
 .yours .dl{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;font-size:15px;line-height:1.2}
 .yours .dl b{font-size:var(--b2);line-height:1.2}
 .you,.you-r{text-align:center}
 /* quickbooks: one idea, one screen. One whole laptop with the ribbon behind it, its base in view, a pause, then the close */
 :root{--qL:min(92vw,clamp(880px,66.7vw,1180px))}
 .qb{padding-block:clamp(36px,3.9vw,72px) calc(clamp(32px,4.2vw,76px) + var(--r));background:var(--mist)}
 .qb-t{text-align:center}
 .qb-stage{width:var(--qL);margin-top:clamp(30px,3.2vw,56px)}
 .qb .fk-laptop{display:block}
 .vow-o{display:none}
 .qb-light{left:50%;right:auto;top:auto;bottom:calc(-17% - max(0px,6vw - 86px));width:max(100vw,calc(var(--qL)*1.6));aspect-ratio:2000/1000;transform:translateX(-50%);pointer-events:none}
 /* the real app at 1280 wide, like the hero, from the top of its page */
 .qb .fk-fit{--fk-w:1280!important;--fk-h:664!important}
 .qb .fk-tx{position:static;padding:0;background:none}
 .qb .fk-grid{flex:none;border-bottom:1px solid hsl(var(--border));border-radius:var(--radius)} /* taste-skill-ignore: the table's own edge */
 .qb .fk-grid table{width:100%}
 .qb .fk-grid tbody tr:last-child td{border-bottom:0}
}
@media (min-width:768px) and (max-width:999px){
 .done{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
}

/* the stage layout: desktop, and tablets that are not short */
@media (min-width:951px),(min-width:700px) and (min-height:501px){
 .hero{display:block;padding-bottom:0}
 .hero-copy{padding-top:clamp(10px,.85vw,32px);text-align:center}
 h1{line-height:1}
 .lede{margin:10px auto 0;font-size:clamp(18px,1.56vw,26px);max-width:none;text-wrap:balance}
 .ctas{justify-content:center;margin-top:16px}
 .stage{width:var(--L);margin:clamp(20px,1.7vw,44px) auto 0;padding:0}
 .art{left:calc(var(--L)*-.5);top:calc(var(--L)*-.2077 - clamp(26px,2.4vw,44px) - 63px);bottom:auto;width:calc(var(--L)*2);aspect-ratio:2340/1206;transform:none;-webkit-mask-image:none;mask-image:none}
 .fk-laptop{display:block}
 .dash-m{display:none}
 .trust-sheet{display:block;position:relative;z-index:3;margin-top:clamp(28px,3.4vw,56px);padding-block:clamp(18px,1.7vw,26px) calc(var(--r) + clamp(20px,1.6vw,30px));background:#fff;border-radius:var(--r) var(--r) 0 0}
 .trust-g{display:grid;gap:18px}
 .trust{margin:0}
 .trust-main{font-size:clamp(28px,2.55vw,42px);line-height:1.1}
 .trust-main .nb{display:inline}
 .trust-sub{margin-top:5px;font-size:clamp(18px,1.56vw,24px);line-height:1.28}
 .facts{margin:0;padding:0;background:none;border-radius:0;grid-template-columns:repeat(2,max-content);justify-content:start;gap:9px 32px;font-size:17px}
}
/* the first phone screen is one picture, as the desktop's is: the disc under the buttons, a real phone standing on it, and the trust line in a white sheet
   that holds at the bottom of the screen while the phone slides up behind it. The sheet's box is the trust line alone and sticks at bottom:0; the facts follow
   it in the flow, white on white, so nothing depends on how high the facts wrap. --dv is the phone's width, --ra the gap from the buttons to the rim, --rb from
   the rim to the phone. 361.3 is the rim in lens-s at 390; rim y on the page = the buttons' bottom + --ra */
@media (max-width:699px) and (min-height:501px){
 :root{--dv:min(72vw,330px);--ra:8px;--rb:22px;--pdw:320;--dk:1.2125;--fk-sc:17}
 .stage{order:2;height:min(calc(var(--dv)*1.9),max(calc(var(--dv)*var(--dk)),calc(100vh - 445px - var(--strip-h,0px))));margin-top:calc(var(--ra) + var(--rb));padding:0}
 .art{top:calc(var(--rb)*-1 - 361.3*100vw/390);bottom:auto;aspect-ratio:390/844}
 .dash-m{display:none}
 .dash-p{display:block;position:relative;width:var(--dv);height:100%;margin-inline:auto;clip-path:inset(-90px -90px 0 -90px);--fk-scroll:var(--fk-sc)}
 .trust{order:3;position:sticky;bottom:0;margin:0;padding:13px var(--g) calc(11px + env(safe-area-inset-bottom));background:#fff;border-radius:var(--r) var(--r) 0 0}
 .trust-sub{margin-top:6px}
 .facts{order:4;margin:0;padding:8px var(--g) 0;border-radius:0}
}
/* the shortest phones give the phone what the gaps can spare, so Sample data stays on the first screen */
@media (max-width:699px) and (min-height:501px) and (max-width:374px){:root{--ra:6px;--rb:18px}}
@media (max-width:699px) and (min-height:501px) and (max-width:359px){:root{--dv:78vw;--pdw:280;--dk:1.386}.dash-p .fk-sw{padding-inline:11px}}
@media (max-width:699px) and (min-height:501px) and (min-width:360px) and (max-width:389px){:root{--pdw:296;--dk:1.311}}
@media (max-width:699px) and (min-height:501px) and (min-width:430px){:root{--pdw:352;--dk:1.102}}
@media (max-width:699px) and (min-height:501px) and (max-height:879px){.dash-p .fk-kpi:nth-child(n+4){display:none}}
/* a short landscape phone keeps the phone layout: offer, trust, then the cropped window */
@media (max-width:950px) and (max-height:500px){
 .hero{padding-bottom:calc(var(--r) + 30px)}
 .lede{max-width:none}
 .trust-main .nb{display:inline}
 .trust{margin-top:16px}
 .stage{margin-top:42px}
 .art{left:50%;top:calc((100vw - var(--g)*2)*-.2077 - 40px);bottom:auto;width:calc((100vw - var(--g)*2)*2);aspect-ratio:2340/1206;-webkit-mask-image:none;mask-image:none}
 .facts{grid-template-columns:repeat(2,max-content);gap:9px 32px}
}

@media (min-width:700px){
 :root{--hdr:64px;--ph:min(360px,44vw)}
 /* compare carries on from the trust strip on one white */
 .cmp.sheet{border-radius:0}
 .cmp{padding-top:clamp(56px,7.4vw,80px)}
 .cmp-t{text-align:center}
 .mon h2{text-align:center}
 .board{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);column-gap:var(--pg)}
 .board::before{grid-column:1;grid-row:1/9}
 .plate{grid-column:2;grid-row:1/9;margin-top:0}
 .cell:last-child{grid-column:2;grid-row:var(--r);padding-inline:34px}
 .heads .cell,.heads .cell:last-child{padding-block:clamp(20px,1.7vw,30px) clamp(14px,1.3vw,22px)}
 .cell:first-child{padding-inline:clamp(20px,2.36vw,34px)}
 .job{min-height:clamp(62px,4.45vw,78px);align-content:center;padding-block:7px}
 .td{font-size:clamp(17px,1.3vw,20px)}.vn{font-size:15.5px}
 .did{min-height:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} /* taste-skill-ignore: a table's own rule */
 /* the two prices stand on one baseline */
 .jobs li:last-child .job{box-shadow:inset 0 1px 0 var(--rule),inset 0 -1px 0 var(--rule)} /* taste-skill-ignore: a table's own rule */
 .sums .cell{align-self:baseline}
 .sums .cell:first-child{justify-content:flex-start;padding-block:0 6px;box-shadow:none}
 .sums .cell:last-child{padding-block:14px 6px}
 .sums .cell:first-child .total b{font-size:clamp(56px,6.94vw,118px);font-weight:560}
 .sums .cell:last-child .total b{font-size:clamp(84px,10.2vw,156px)}
 .sums .cell:last-child .total span{font-size:clamp(20px,1.8vw,26px)}
 .total-note{font-size:17px;margin-top:6px}
 .time .cell,.time .cell:first-child{padding-block:4px 22px;font-size:18px}
 .time .cell:last-child{padding-block:4px 22px}
 .march{padding:20px 22px 20px}
 .vow-o .fk-grid table{width:100%}
}

/* the transactions row once a product window has real width */
@media (min-width:1000px){
 :root{--hdr:64px}
 .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}
 /* the action is there from the first frame, so nothing moves on scroll */
 .top .btn{order:0;min-height:44px;padding:0 20px;font-size:15px}
 .menu{display:none}
 .sums .cell:first-child .total{gap:12px}
 /* section rhythm: at 1440x900 the board, the month, the phone and born each land whole on one screen */
 .cmp{--ct:clamp(36px,3.1vw,56px);--bm:clamp(30px,2.8vw,48px);padding-block:var(--ct) calc(var(--bm) + var(--r))}
 .board{z-index:1;margin-top:var(--bm)}
 /* month and payroll, one stage in A's light: a white sheet over compare's colour, full colour where the calendar and the phone stand, the next sheet cutting them.
    The two sections and their wrappers dissolve, so the two h2s, the calendar and the phone are grid items of .duo.
    The calendar's rows come from the phone's height, so the left column and the phone open and close on the same lines. 12.75 = the longer heading's width in em.
    To swap the art: the one src in .duo-light in body.tpl.html */
 :root{--ph:clamp(280px,24vw,400px);--yg:clamp(20px,1.95vw,40px)}
 .duo{--ds:min(calc((min(100vw - var(--g)*2,var(--wrap)) - var(--ph) - var(--yg))/12.75),92px);--dt:clamp(28px,2.8vw,52px);--dgap:clamp(20px,2.7vw,44px);--pt:clamp(16px,1.4vw,22px);--gr:10px;--chrome:calc(var(--pt)*2 + clamp(22px,2.2vw,32px) + 32px);--yrs:clamp(17px,1.32vw,22px);--yrm:clamp(6px,.6vw,10px);--sr:max(68px,calc((var(--ph)*2.052 - var(--ds)*2.12 - var(--yrs)*1.3 - var(--yrm) - var(--dgap) - var(--chrome) - var(--gr)*4)/5));position:relative;z-index:2;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) var(--ph);grid-template-rows:auto auto 1fr;column-gap:var(--yg);margin-top:calc(var(--r)*-1);padding:var(--dt) max(var(--g),calc((100% - var(--wrap))/2)) calc(clamp(20px,1.95vw,36px) + var(--r));background:#fff;border-radius:var(--r) var(--r) 0 0}
 .duo-light{display:block;position:absolute;z-index:0;inset:calc(var(--yrs)*1.3 + var(--yrm) + 14px) 0 0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 72px);mask-image:linear-gradient(transparent,#000 72px)} /* taste-skill-ignore: the picture moved down, so its top row fades in with no seam */
 .duo-light img{display:block;width:100%;height:100%;max-width:none;object-fit:fill}
 .mon,.mon>.c,.cal,.you-s,.you-g,.you-t{display:contents}
 .you-g{position:static}
 .you-t{display:block;position:relative;z-index:1;grid-column:1;grid-row:2}
 .you-r{margin-top:var(--yrm);font-size:var(--yrs);line-height:1.3;text-align:left}
 .you-r span{display:inline}
 .duo h2{position:relative;z-index:1;grid-column:1;font-size:var(--ds);line-height:1.06;letter-spacing:-.042em;text-align:left;white-space:nowrap}
 .mon h2{grid-row:1}
 .you{grid-row:2}
 .mo{--gp:8px;--rowh:var(--sr);position:relative;z-index:1;grid-column:1;grid-row:3;align-self:start;margin-top:var(--dgap);padding:var(--pt) clamp(18px,1.7vw,26px);border-radius:22px;background:#fff} /* round S phase 2: the white month stands on the colour by tone (the lift it had did not show on the light) */
 .mo .lf-h{margin-bottom:8px}
 .grid-m{row-gap:var(--gr)}
 .lunch{font-size:clamp(14px,.97vw,16px);letter-spacing:-.024em}
 .d{padding:10px 0 0 11px}
 .ev{padding:10px 4px 9px 11px}
 .ev b{font-size:clamp(14px,.97vw,16px);letter-spacing:-.024em}
 .ledger{display:none}
 .ph-stage{z-index:1;grid-column:2;grid-row:1/4;align-self:start;width:var(--ph);margin:0}
 .ph-light{display:none}
}
@media (min-width:1000px) and (max-width:1099px){
 .mo{--gp:5px;padding-inline:12px}
 .wk i{padding-left:8px}
 .d{padding:8px 0 0 8px}
 .ev{padding:8px 3px 7px 8px}
 .ev u{margin-right:3px}
}
@media (min-width:1080px) and (max-width:1299px){
 .facts{grid-template-columns:repeat(4,max-content);gap:9px 22px;font-size:16px}
 .facts li{gap:7px}
}
@media (min-width:1300px){
 .trust-g{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:28px}
 .trust-main{white-space:nowrap}
 .facts{font-size:16px;column-gap:26px}
}
@media (min-width:1500px){
 .facts{font-size:17px;column-gap:32px}
}

/* motion. The page is finished without any of it; anim is set only when motion is allowed, ?still=1 is absent, and the script can finish it */
@media (prefers-reduced-motion:no-preference){
 .anim .rise,.anim .ln{opacity:0;transform:translateY(14px);transition:opacity .7s ease var(--d,0s),transform 1s var(--out) var(--d,0s)}
 .anim .on.rise,.anim .hero.on .ln,.anim .hero.on .rise{opacity:1;transform:none}
 .anim .art{opacity:.4;transition:opacity 1.4s ease .1s}
 .anim .hero.on .art{opacity:1}
 .anim .hero .fk-laptop,.anim .dash-m,.anim .dash-p{opacity:0;transform:translateY(56px);transition:opacity .9s ease .1s,transform 1.4s var(--out) .1s}
 .anim .hero.on .fk-laptop,.anim .hero.on .dash-m,.anim .hero.on .dash-p{opacity:1;transform:none}
 @media (min-width:1100px){.anim .dash-p{transition-delay:.42s}}
 .anim .mo .ev{opacity:0;transform:scale(.94);transition:opacity .4s ease var(--t),transform .6s var(--out) var(--t)}
 .anim .mo.on .ev{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"}
.cmp-t,.y1,.y2{position:relative;z-index:1}
/* the note runs under both panels */
/* the note sits under the total, and Your time closes both panels on one line */
@media (min-width:700px){.foot{grid-column:1;grid-row:7;margin:0;padding:6px clamp(20px,2.36vw,34px) 18px;box-shadow:none;color:var(--ink2)}.foot b,.foot a{color:var(--ink)}.time .cell:first-child,.time .cell:last-child{grid-row:8;align-self:end}}
/* on the colour the grey pill goes muddy; white is cleaner. A phone keeps grey, it sits on white */
@media (min-width:951px),(min-width:700px) and (min-height:501px){.ctas .btn-line{background:#fff}}
/* light that hangs past its sheet is paint, not layout, so it never adds to the page's scroll width */
.ph-stage{contain:layout}
/* tablet: the totals stand clear of the rows above them. Here, after the 700 block, or that block wins */
@media (min-width:700px) and (max-width:999px){.sums .cell:last-child{padding-top:42px}}
/* the tag rides on the first card, now that the title has scrolled off */
.dash-p .fk-kpi:first-child{position:relative}
.dash-p .fk-tag-c{position:absolute;right:calc(14px/var(--fk-s,1));top:calc(12px/var(--fk-s,1))}
@media (min-width:1100px){
 .dash-p .fk-tag-c{right:calc(9px/var(--fk-s,1));top:calc(6px/var(--fk-s,1))}
 .dash-p .fk-stage::before{padding:13px 0 0 24px;font-size:14px;background-position:right 20px top 17px;background-size:50px 9px}
}
/* the payroll table runs on past the phone: three columns stay whole, and the next goes fully under the fade with no ghost of a heading */
.fk-phone .fk-wrap::after{width:20px;background:linear-gradient(90deg,hsl(0 0% 100%/0),hsl(0 0% 100%) 40%)} /* taste-skill-ignore: edge fade */
/* the payroll screen: the real dialog, with the table stopped by its own box the way a real scrolled table is. All eight rows stay in the markup; --pr whole rows show, so the totals and Confirm payroll are in view under them */
.ph-stage .fk-wrap{--pr:5;max-height:calc(37px + 38px*var(--pr))}
/* the table stands scrolled to its whole columns and fills its box: three on a phone, two where the same width is shown larger */
.ph-stage .fk-pay{min-width:0}
.ph-stage .fk-wrap::after{display:none}
.ph-stage .fk-phone .fk-tag{font-size:13px;height:24px;padding-inline:9px}
/* the whole phone at every width. The screen is laid out at 340 and not 390, so the same glass shows the real type larger, and the short dialog stands centred as a real one does */
.ph-stage .fk-fit{--fk-w:340!important;--fk-h:736!important}
.ph-stage .fk-dlg-m{top:calc(50% + 12px);height:auto;transform:translateY(-50%)}
.ph-stage .fk-pay td:nth-child(n+3),.ph-stage .fk-pay th:nth-child(n+3){display:none}
@media (min-width:1280px){.ev.now b{font-size:14px;letter-spacing:-.03em;white-space:nowrap}}
@media (min-width:1280px){.ev.now{padding-left:9px}}
/* the words run widest in these two ranges, so the panel's picture is drawn wider and its glass stands further out */
/* the heading runs close to the edge on the smallest phones, so the ribbon starts below it */
@media (max-width:389px){.qb-light{top:-26px}}
/* the colour's edge stands between the heading and the device: larger headings push it down */

/* === first screen, desktop (from 951). Art pass 11/11: site-v2's first screen with trials p and r, as rules ===
   One picture to the fold: a near-white sky, the disc, a white floor whose top edge is an arc, and the two devices.
   --q is one design px of a 1440 x 900 screen, so it is the same picture at every desktop size. The sky, --q, the headline, the lede, the buttons and the air between
   them (18 / 26 / 36) are the system's, shared by the four stage heroes (shared/system.css, S7).
   The floor is .stage::before: it starts 12 under the stage and runs to the foot of the hero; the trust words are set on it. The disc runs on under the devices
   until the floor covers it.
   --lap is the laptop's size. 1: the whole laptop stands on the floor's edge, in front of it, with the dark line where it meets the floor.
   1.3: the laptop is that much larger, keeps its top edge, and its lower part goes down behind the floor. Change the one number; its place, its layer,
   that dark line and the caption follow it. */
@media (min-width:951px){
 :root{--ov:calc(26*var(--q));--pov:calc(46*var(--q));--pdw:228;--lap:1.3;--lx:calc((80*var(--lap) - 164)*var(--q))} /* --lx: the laptop's centre from the page's: -84 at 1, -60 at 1.3 */
 .hero{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:min(calc(100vh - var(--strip-h,0px) + var(--r)),calc(1060*var(--q) + var(--r)));min-height:calc(580px + var(--r));margin-top:calc(var(--hdr)*-1);padding-top:var(--hdr)}
 .hero-copy{order:0;grid-row:1;z-index:5}
 /* --lh: the laptop's height at --lap 1. Its top edge stands 46 under the stage's top, and never more than 450 high */
 .stage{--lh:min(calc(100cqh + var(--ov) - 46*var(--q)),calc(450*var(--q)));order:0;grid-row:2;position:relative;z-index:4;width:auto;height:auto;margin:0;container-type:size}
 /* the disc file is 2080 x 730.67 design px with its crown 70 under its top edge: the crown stands 16 above the stage. Its foot is under the floor */
 .art{left:calc(50% - 1040*var(--q));top:calc(-86*var(--q));bottom:calc(-92*var(--q));width:calc(2080*var(--q));aspect-ratio:auto;margin-left:0;transform:none;overflow:hidden}
 .art picture{inset:0 0 auto 0;height:calc(730.67*var(--q))}
 .stage::before{content:"";position:absolute;z-index:2;left:0;right:0;top:calc(100% + 12*var(--q));height:calc(1200*var(--q));background:#fff;border-radius:50% 50% 0 0/var(--floor-r) var(--floor-r) 0 0;pointer-events:none}
 /* the laptop: centred on --lx, but never so far under the phone that the phone reaches the first table's Net figures (its left edge stays .896 of the laptop's width from the phone's) */
 .hero .fk-laptop{position:absolute;z-index:clamp(1,calc((1.001 - var(--lap))*3000),3);left:min(calc(50% + var(--lx) - var(--lh)*.96*var(--lap)),calc(50% + 298*var(--q) - var(--lh)*1.72*var(--lap)));bottom:calc(-1*var(--ov) - var(--lh)*(var(--lap) - 1));width:calc(var(--lh)*1.92*var(--lap))}
 .hero .fk-laptop>.fk-fit{--fk-h:680!important}
 .hero .fk-laptop{--fk-scroll:740}
 .hero .fk-laptop .fk-biz-t{display:flex;flex-direction:column;align-items:flex-start}
 .hero .fk-laptop .fk-biz-k{display:contents;line-height:1.3}
 .hero .fk-laptop .fk-biz-n{line-height:1.3}
 .dash-p{display:block;position:absolute;z-index:4;top:auto;bottom:calc(var(--pov)*-1);right:auto;left:50%;width:calc((100cqh + var(--pov) - 4*var(--q))/2.052);margin-left:calc(298*var(--q));--fk-scroll:0;filter:drop-shadow(-12px 8px 18px rgba(4,16,80,.3))} /* taste-skill-ignore: the one object nearest the reader */
 /* where the whole laptop meets the floor (--lap 1 only): a tight dark line and a wide soft fall */
 .stage::after{content:"";position:absolute;z-index:2;left:calc(50% + var(--lx) - var(--lh)*.98);bottom:calc(var(--ov)*-1 - 16*var(--q));width:calc(var(--lh)*1.96);height:calc(34*var(--q));background:radial-gradient(50% 50% at 50% 50%,rgba(6,22,92,.34),rgba(6,22,92,.16) 58%,rgba(6,22,92,0));opacity:clamp(0,calc((1.001 - var(--lap))*1000),1);pointer-events:none} /* taste-skill-ignore: the laptop's contact shadow */
 /* the trust words: on the floor, over the stage's layer, with no ground of their own */
 .trust-sheet{order:0;grid-row:3;position:relative;bottom:auto;z-index:5;margin:0;padding-block:calc(var(--pov) + 50*var(--q)) calc(var(--r) + 22*var(--q));background:none;border-radius:0}
 .trust-sheet::after{display:none}
 .trust-g{position:relative}
 .trust-main{font-size:clamp(28px,calc(36*var(--q)),46px)}
 .trust-sub{font-size:clamp(18px,calc(21*var(--q)),26px)}
 .facts{font-size:clamp(16px,calc(17*var(--q)),20px)}
}

/* the phone's screen at every size: the app scrolled to its first card, so the one number a reader wants is the largest thing in the device, with the plain-words summary under it */
.dash-p .fk-mtop,.dash-p .fk-ph,.dash-p .fk-dash>:not(.fk-kpis),.dash-p .fk-kpi:nth-child(n+5){display:none}
.dash-p .fk-kpis{display:grid}
.dash-p .fk-kpi{padding:14px}
.dash-p .fk-main{left:0;top:47px}
.dash-p .fk-page{padding:10px 10px 0}
.dash-p .fk-dash{margin-top:0}
.dash-p .fk-box{padding:13px}

/* === k-a first screen, tablet: the same picture, the headline on its two lines === */
@media (min-width:700px) and (max-width:950px) and (min-height:501px){
 :root{--q:calc(100vw/768);--ov:calc(20*var(--q));--pov:calc(34*var(--q));--pdw:270}
 .hero{display:grid;grid-template-rows:auto auto auto;margin-top:calc(var(--hdr)*-1);padding-top:var(--hdr)}
 .hero-copy{order:0;grid-row:1;z-index:5}
 .stage{order:0;grid-row:2;position:relative;z-index:4;width:auto;height:calc(404*var(--q));margin:calc(14*var(--q)) 0 0;container-type:size}
 /* the tablet's disc file is 1200 x 820 of the desktop picture's units, one unit .72q here; its crown is 70 under its top edge, where the old picture's crown stood.
    It runs on under the stage until the floor covers it */
 .art{left:calc(50% - 600*var(--q)*.72);top:calc(-182*var(--q)*.72);bottom:calc(-1*var(--floor-r) - 8px);width:calc(1200*var(--q)*.72);aspect-ratio:auto;margin-left:0;transform:none;overflow:hidden}
 .art picture{inset:0 0 auto 0;height:calc(820*var(--q)*.72)}
 /* the floor, as from 951: white, in the stage's own layer under the devices, its top edge the arc; the trust words are set on it */
 .stage::before{content:"";position:absolute;z-index:0;left:0;right:0;top:100%;height:calc(1500*var(--q));background:#fff;border-radius:50% 50% 0 0/var(--floor-r) var(--floor-r) 0 0;pointer-events:none}
 .hero .fk-laptop{position:absolute;z-index:1;left:calc(50% - 66*var(--q) - 285*var(--q));bottom:calc(var(--ov)*-1);width:calc(570*var(--q))}
 .hero .fk-laptop>.fk-fit{--fk-h:740!important}
 .hero .fk-laptop{--fk-scroll:740}
 .hero .fk-laptop .fk-biz-t{display:flex;flex-direction:column;align-items:flex-start}
 .hero .fk-laptop .fk-biz-k{display:contents;line-height:1.3}
 .hero .fk-laptop .fk-biz-n{line-height:1.3}
 .hero .fk-laptop .fk-biz-i{display:none}
 .dash-p{display:block;position:absolute;z-index:2;top:auto;bottom:calc(var(--pov)*-1);right:auto;left:50%;width:calc(190*var(--q));margin-left:calc(162*var(--q));--fk-scroll:0;filter:drop-shadow(-10px 8px 16px rgba(4,16,80,.3))} /* taste-skill-ignore: the one object nearest the reader */
 .trust-sheet{order:0;grid-row:3;position:relative;z-index:5;margin:0;padding-block:calc(var(--pov) + 18*var(--q)) calc(var(--r) + 26px);background:none;border-radius:0}
 .trust-g{position:relative;z-index:1}
}

/* === k-a first screen, phone: i's structure with j's larger phone. Pale sky from the very top, the disc under the buttons, the real phone standing on it, the trust line large on a white rise that echoes the disc's arc and holds at the bottom of the screen while the phone slides up behind it === */
@media (max-width:699px) and (min-height:501px){
 :root{--dv:min(80vw,340px);--ra:8px;--rb:20px;--pdw:286;--dk:1.05;--fk-sc:0}
 .hero{margin-top:calc((var(--hdr) + env(safe-area-inset-top))*-1);padding-top:calc(var(--hdr) + env(safe-area-inset-top))}
 /* the phone's disc file is 390 x 830 units, its crown 70 under its top edge; its foot is where the old file's was */
 .art{top:calc(var(--rb)*-1 - 70*100vw/390);aspect-ratio:390/830}
 .art picture{inset:0}
 .ctas .btn-line{background:#fff}
 .trust{padding-top:17px;border-radius:50% 50% 0 0/var(--floor-r) var(--floor-r) 0 0}
 .dash-p .fk-box{padding:14px}
 .dash-p .fk-kpi{padding:22px 16px 24px}
}
@media (max-width:699px) and (min-height:501px) and (min-width:360px) and (max-width:389px){:root{--pdw:270}}
@media (max-width:699px) and (min-height:501px) and (max-width:359px){:root{--dv:80vw;--pdw:250}}
@media (max-width:699px) and (min-height:501px) and (min-width:430px){:root{--pdw:320}}
.dash-p .fk-port::after{content:"";position:absolute;z-index:5;left:0;right:0;bottom:0;height:68px;background:linear-gradient(hsl(210 33% 98%/0),hsl(210 33% 98%) 70%);pointer-events:none} /* taste-skill-ignore: the screen's content goes out before the home bar, so no line of text sits under it */
@media (min-width:700px) and (max-width:950px) and (min-height:501px),(min-width:951px) and (max-height:880px){
 .dash-p .fk-kpi .fk-tag-c{position:static;display:inline-flex;margin-top:calc(6px/var(--fk-s,1))}
 .dash-p .fk-kpi{padding-block:11px}
}
/* a landscape phone keeps its layout: the sky to the top of the page and the disc rising behind the window */
@media (max-width:950px) and (max-height:500px){
 :root{--aq:calc((100vw - var(--g)*2)/1100)}
 .hero{margin-top:calc((var(--hdr) + env(safe-area-inset-top))*-1);padding-top:calc(var(--hdr) + env(safe-area-inset-top))}
 /* the tablet's disc file (the markup serves it here too), one unit = --aq */
 .art{left:calc(50% - 600*var(--aq));top:calc(-70*var(--aq) - 28px);bottom:0;width:calc(1200*var(--aq));aspect-ratio:auto;margin-left:0;transform:none}
 .art picture{inset:0 0 auto 0;height:calc(760*var(--aq))}
 .ctas .btn-line{background:#fff}
}

/* === round k: the panel's named faults on j's middle ===
   The note belongs to the figure it explains: on a phone it is the last row of the usual-way card, open, so $499 ends its own card clean. */
@media (max-width:699px){
 .plate{grid-row:8/15}
 .foot{grid-row:7;margin-inline:20px;padding:12px 0 16px;box-shadow:inset 0 1px 0 var(--rule);color:var(--ink2)} /* taste-skill-ignore: a table's own rule */
 .foot b,.foot a{color:var(--ink)}
}
/* the price takes the height the note gives the panel beside it, so nothing stands empty above Your time */
@media (min-width:700px){
 .sums .cell:last-child{grid-row:6/8;align-self:center;padding-block:0}
 .sums .cell:last-child .total b{font-size:clamp(84px,11.6vw,178px)}
}
/* the lead-in stands with its promise at the foot of the panel, and the glass has the panel above them */
/* every employee in the table, so the rows add up to Gross pay on a page that says "to the cent". The real dialog holds all eight; the screen is laid out wider so they fit, with the rows at the app's tighter setting */
.ph-stage .fk-wrap{max-height:none}
.ph-stage .fk-pay td{padding-block:5px}
.ph-stage .fk-pay th{padding-block:6px}
.ph-stage .fk-fit{--fk-w:372!important;--fk-h:805!important}


/* === round k, after the final panel ===
   On a phone there is no phone in a phone: the reader sees the real dialog as it would stand on their own screen, with the heading above it.
   Second pass (T11): the same below 1000, so no panel ever stands on the coloured light; from 1000 the dialog is in the phone bezel beside the month */
@media (max-width:999px){
 .ph-stage .fk-phone::before,.ph-stage .fk-phone::after,.ph-stage .fk-stage::before,.ph-stage .fk-stage::after,.ph-stage .fk-behind{display:none}
 .ph-stage .fk-phone{isolation:auto}
 .ph-stage .fk-phone>.fk-fit{width:100%;margin:0;border-radius:0;overflow:visible;background:none}
 .ph-stage .fk-fit{--fk-w:354!important;--fk-h:738!important}
 .ph-stage .fk-stage,.ph-stage .fk-port{overflow:visible;background:none}
 .ph-stage .fk-dlg-m{left:0;right:0;top:0;transform:none;height:auto;box-shadow:0 18px 40px -16px rgba(8,30,90,.38)} /* taste-skill-ignore: the one card that stands on the colour here */
}
@media (min-width:700px){.sums .cell:first-child{padding-top:clamp(12px,1.2vw,18px)}}

/* === round k5: Mercury's depth is baked into the hero art (tools/blur-art.py); the bar stays white, the panel read frosted glass over this colour as smudges === */
/* the promise under the promise: whose penalty it is when the mistake is ours */

/* === the white floor ends the first screen on an arc at every width (--floor-r, shared/system.css): from 700 it is .stage::before, on a phone the trust line's
   top edge. The disc is sharp to that edge: no fade and no blur (tools/fade.py and assets-sharp/ are no longer part of the build). === */


/* === round g: the last twelve art directors' named faults on k1f ===
   1. The laptop's own Sample data pill read twice the size of the screen's type. The real app has no tag; one caption on the floor under the devices labels the screens, at reading size */
/* S2: the caption's type is the site's (.cap in shared/system.css); here only where it stands. On a phone the screens carry the chip instead */
@media (min-width:700px){
 .fk-laptop .fk-tag{display:none!important}
 .trust-sheet{padding-top:calc(var(--ov) + 26*var(--q) + 21px)}
 .qb .cap{position:relative}
}
@media (min-width:951px){
 /* the trust words start 96 under the stage: 50 under the phone's foot, with the caption between */
 .trust-sheet{padding-top:calc(var(--pov) + 50*var(--q))}
}
/* 8. checked to the cent keeps its weight on a phone: two lines at the close's size */
/* 9. March has October's weekday row, on its own columns */
.march{--cols:repeat(7,minmax(0,1fr))}
.march .wk{gap:3px;margin-bottom:2px}
@media (min-width:768px){
 .march .wk{column-gap:8px;margin-bottom:0}
 .march .wk i{padding-left:clamp(4px,.76vw,11px)}
}
/* 9. the phone's month shows what the desktop's does: your two confirmations on the deep field, the payday after today drawn open */
@media (max-width:767px){
 .ev.y{color:#fff;background:var(--deep)}
 .ev.now{background:var(--ink)}
 .ev.nx{color:var(--deep);background:none;box-shadow:inset 0 0 0 1.5px var(--deep)} /* taste-skill-ignore: a pending entry, not yet done */
 .dn.y .dt{background:var(--deep)}
 .next{display:grid;grid-template-columns:37px minmax(0,1fr) auto;align-items:center;min-height:40px;margin:4px 0 0;padding-right:7px}
 .next .dt{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;color:var(--deep);font-size:14px;line-height:1;font-weight:640;box-shadow:inset 0 0 0 1.5px var(--deep)} /* taste-skill-ignore: a pending entry, not yet done */
 .next .dl{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:16.5px;font-weight:500;color:var(--ink2)}
 .next .dl b{font-weight:600;color:var(--ink)}
}
@media (min-width:768px){
 .next{display:grid;grid-template-columns:clamp(46px,4.2vw,64px) minmax(0,1fr);align-items:center;min-height:clamp(52px,4.5vw,68px);padding-inline:14px 16px}
 .next .dt{color:var(--ink3)}
 .next .dl{display:flex;flex-direction:column;gap:1px;font-size:15px;line-height:1.2;color:var(--ink2)}
 .next .dl b{font-size:var(--b2);font-weight:600;color:var(--ink)}
}
@media (min-width:1000px){.next{display:none}}
/* 6. phone seams. The facts' white runs down to the next sheet, so no sliver of the picture shows between them */
@media (max-width:699px) and (min-height:501px){
 .hero{padding-bottom:0}
 .facts{padding-bottom:calc(var(--r) + 30px)}
}

/* 4. the hero phone ends on a whole card: the first four of the dashboard's cards, laid out a little wider so the fourth closes above the home bar, and no fade over a half-read line */
@media (min-width:700px){
 .dash-p .fk-port::after{display:none}
 /* the phone's tag goes with the laptop's: at this scale it too read twice its screen's type, and the caption under both devices labels them */
 .dash-p .fk-tag{display:none!important}
}
@media (min-width:951px){:root{--pdw:250}}
@media (min-width:951px) and (max-height:880px){:root{--pdw:242}}
@media (min-width:700px) and (max-width:950px) and (min-height:501px){:root{--pdw:240}}
/* 5. the first phone screen: a smaller phone, so the glass's arcs stand round it on both sides, cut by the trust sheet in the gap under its first whole card.
   The stage is exactly the phone's top down to that card: 13u of bezel, 57 design px of status bar and page padding, --k1 for the card, all scaled by the screen (--dv*390/424/--pdw).
   The trust line keeps its place inside the first screen on every phone; the phone below the card is never in view, so its other cards are not drawn */
@media (max-width:699px) and (min-height:501px){
 :root{--dv:min(64vw,290px);--pdw:250;--k1:127;--rb:26px}
 .stage{height:calc(var(--dv)*13/424 + (57 + var(--k1))*var(--dv)*390/424/var(--pdw) + 4px)}
 .dash-p{clip-path:inset(-90px -90px -10px -90px)}
 .dash-p .fk-kpi:nth-child(n+2){display:none}
}
@media (max-width:699px) and (min-height:501px) and (max-width:389px){
 :root{--pdw:232}
 /* the tag has no room beside Bank Balance here, so it takes the card's first line: 21px tall and 5px under it, at reading size */
 .dash-p .fk-kpi .fk-tag-c{position:static;margin:0 0 calc(5px/var(--fk-s,1))}
 .stage{height:calc(var(--dv)*13/424 + (57 + var(--k1))*var(--dv)*390/424/var(--pdw) + 30px)}
}
@media (max-width:699px) and (min-height:501px) and (max-width:359px){:root{--pdw:214}}
@media (max-width:699px) and (min-height:501px) and (min-width:430px){:root{--pdw:268}}
@media (min-width:768px) and (max-width:1099px){.march .wk i{font-size:13px;letter-spacing:-.01em}}
/* the shortest phones (320 by 568) have no room for a whole card above the trust sheet, so the first screen is the words, the glass's arc and the trust line; the product follows in every section below */
@media (max-width:699px) and (min-height:501px) and (max-height:600px){
 .stage{height:56px}
 .dash-p{display:none}
}
/* the hero phone's screen is laid out narrower than a real 390, so its clock takes the narrow layout's place at every size and stays clear of the island */
.dash-p .fk-stage::before{padding:13px 0 0 24px;font-size:14px;background-position:right 20px top 17px;background-size:50px 9px}
/* below 768 QuickBooks shows the cropped window, which carries its own tag, so its caption waits for the laptop */
/* the QuickBooks laptop's screen ends under a whole row of the table, as the hero phone ends on a whole card */
@media (min-width:768px){.qb .fk-fit{--fk-h:650!important}}

/* === round g2: the panel's second pass (art from g2 reverted in round g3; the readable note and the two-card phone stay) === */
/* 4. the note under $674 reads as three short lines of plain text, still quieter than the prices */
.foot{font-size:16px;line-height:1.5}
.foot>span{display:block}
.foot>span+span{margin-top:4px}
/* 3. the first phone screen shows two whole cards of the dashboard above the trust line: a larger phone, laid out wider, its cards at the app's tighter padding */
@media (max-width:699px) and (min-height:640px){
 :root{--dv:min(72vw,300px);--pdw:320;--rb:8px;--ra:4px;--k2:228}
 /* the trust line's first glyphs stay inside the sheet's arc (it rises 12px at the side margins) */
 .trust{padding-top:17px;padding-bottom:calc(9px + env(safe-area-inset-bottom))}
 .trust-sub{margin-top:4px}
 .dash-p .fk-kpi{padding:14px 16px}
 .dash-p .fk-kpi:nth-child(2){display:block}
 .dash-p .fk-kpi .fk-tag-c{position:absolute;margin:0}
 .stage{height:calc(var(--dv)*13/424 + (57 + var(--k2))*var(--dv)*390/424/var(--pdw) + 4px)}
}
@media (max-width:699px) and (min-height:640px) and (min-width:430px){:root{--pdw:340}}

/* phone: the payroll card stands on white, with no light down its 18px gutters (round g) */
@media (max-width:999px){.ph-light{display:none}}

/* === round g3: k1f's middle art and layout back (k1f's own files), with only V's named faults fixed ===
   7. Not ready? stands on clean ground: the month's light is the same picture, set lower, so its first tint begins 12px under that line and the colour's wavy edge
   lies in a wider gap above the month, which still floats on the light. 12.96vw = where the picture's tint starts (20.9% of its height) at its 2250:1395 shape */
@media (min-width:1000px){
 .duo{--dgap:clamp(40px,4.2vw,72px)}
 .duo-light{top:calc(var(--dt) + var(--ds)*2.12 + var(--yrs)*1.3 + var(--yrm) + 12px - 12.96vw)}
 .duo-light img{object-fit:cover;object-position:50% 0}
}
/* QuickBooks: k1f's ribbon as k1f draws it from 1000 up (round g4) */
/* below 1000 the laptop fills the width and only a cut sliver of the ribbon would show past it (phone-07's blob), so the screen stands on the mist alone */
@media (max-width:999px){.qb-light{display:none}}
/* phone: the field under the pair keeps its colour to the sheet's foot; its pale lower end runs past the sheet and is not shown */
@media (max-width:699px){.cmp-light img{position:absolute;left:0;top:-7%;height:165%}}
/* 4 (round g3). the floor caption labels both devices at every desktop size, so the tall desktop's phone drops its own tag too; its cards keep the app's tighter padding */
@media (min-width:951px) and (min-height:881px){:root{--pdw:256}.dash-p .fk-kpi{padding-block:11px}}
/* round g4: the phone's Sample data pill is quieter than the card's own label: regular weight, the app's muted ink, an outline on the card's white (12.5px, 4.7:1) */
.dash-p .fk-tag{font-weight:420;color:hsl(var(--muted-foreground));background:hsl(var(--card))}
/* round g5: the $499 is about 30% smaller than k1f's, so both cards read together on one screen and /mo stays with its figure; the navy and the weight carry the contrast with $674 */
@media (min-width:700px){.sums .cell:last-child .total b{font-size:clamp(64px,8.1vw,124px)}.sums .cell:last-child .total span{font-size:clamp(19px,1.5vw,23px)}}
/* round Q: the 2026 catch-up special (its card is written in the round S phase 2 block at the end) */

/* QA: the logo link is a full tap target at every width */
.mark{min-width:44px}
/* round R: Bring your own AI (gated). The owner's own assistant, not a Florink screen: two plain bubbles with the site's sample figures, no logo and no app chrome.
   A mist sheet on a phone (QuickBooks is white there), white over QuickBooks' mist from 768 */
.ai{background:var(--mist);padding-block:var(--pad) calc(var(--pad) + var(--r))}
.ai-g{display:grid;gap:26px}
.ai h2{font-size:var(--h2);line-height:1.02;letter-spacing:-.04em}
.ai-l{margin-top:12px;max-width:30em}
@media (min-width:768px){
 .ai-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:clamp(32px,4.4vw,80px)}
 /* round S phase 2: the heading holds one line beside the chat at every width (8em wide at this weight) */
 .ai-t{container-type:inline-size}
 .ai h2{font-size:min(var(--h2),calc(100cqw/8.1))}
}
/* the chat fills its tray: a header row naming the assistant and its connection (text only, no logo), the question at the right, the answer across the tray with its source under it */

/* === round S, phase 2 (11/10): the judges' and the inspector's named faults ===
   1. compare: the two prices stand on one baseline, and the two cards run row for row: the price (row 6), the line under it (7), Your time (8).
      The Florink price cell dissolves from 700 up, so its figure and its note are rows of the board's own grid */
@media (min-width:700px){
 .sums .cell:last-child,.sums .price-t{display:contents}
 .sums .cell:first-child,.sums .cell:last-child .total{align-self:baseline}
 .sums .cell:last-child .total{position:relative;grid-column:2;grid-row:6;padding:clamp(14px,1.6vw,26px) 34px 0}
 .sums .total-note{position:relative;grid-column:2;grid-row:7;align-self:baseline;margin:0;padding:6px 34px 0}
 .foot{align-self:baseline}
 .jobs li:last-child .did{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.14)} /* taste-skill-ignore: a table's own rule */
}

/* 5. the catch-up special has its own place: a card under the screen, on the screen's own two edges, with air above it */
.qb-cu{position:relative;z-index:1;display:grid;gap:3px;margin-top:28px;padding:18px 20px 12px;border-radius:20px;background:var(--mist);font-size:17px;line-height:1.42;font-weight:460;letter-spacing:-.01em;color:var(--ink)}
.qb-cu b{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.qb-cu a{justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:44px;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.qb-cu .ar{width:17px;height:17px}
@media (min-width:768px){
 .qb-cu{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 28px;width:min(var(--qL),100%);margin:clamp(32px,3.4vw,52px) auto 0;padding:clamp(18px,1.7vw,26px) clamp(22px,2.2vw,34px);border-radius:clamp(20px,2vw,28px);background:#fff}
 .qb-cu b{grid-column:1;font-size:clamp(19px,1.53vw,22px)}
 .qb-cu .cu-s{grid-column:1;font-size:clamp(17px,1.25vw,19px)}
 .qb-cu a{grid-column:2;grid-row:1/3;justify-self:end}
}


/* === round S, second pass (11/10, BRIEF-S3.md: the T rules and Home's six) ===
   T5. One lede style, the hero sub's (size, weight, full ink), only directly under a headline */
.scope,.you-r,.born-proof,.ai-l{font-size:clamp(17px,4.6vw,18px);line-height:1.34;font-weight:460;letter-spacing:-.014em;color:var(--ink)}
@media (min-width:768px){.scope,.you-r,.born-proof,.ai-l{font-size:var(--lead)}}
.you{font-size:var(--h2)}
.trust-sub{color:var(--ink)}
/* T10. the hero's second button: white with a 1px edge that shows on the sky */
.ctas .btn-line{border-color:rgba(14,15,18,.22)} /* taste-skill-ignore: the quiet button's edge on a pale field */

/* 1. Born stands alone: the headline, the firm sentence with its link (the lede), one paragraph at the body size in full ink */
.born{padding-block:var(--pad) calc(var(--pad)*.9 + var(--r))}
.born h2{font-size:var(--h2);line-height:1.02;letter-spacing:-.04em}
.born h2 .hl{display:block}
.born-proof{margin-top:12px;max-width:27em}
.born-proof a{display:inline-block;padding-block:11px;margin-block:-11px;font-weight:560;white-space:nowrap}
.born-lead{margin-top:14px;max-width:40em;font-size:16px;line-height:1.55;color:var(--ink)}
@media (min-width:768px){
 .born{padding-block:clamp(56px,5.4vw,88px) calc(clamp(56px,5.4vw,88px) + var(--r));background:var(--mist)}
 .born-g{text-align:center}
 .born h2 .hl{display:inline}
 .born-proof{margin:clamp(14px,1.3vw,20px) auto 0;max-width:none}
 .born-lead{margin:clamp(14px,1.4vw,22px) auto 0;font-size:clamp(17px,1.25vw,19px)}
}
/* 1. the promise has its own band, as short as its three lines and the gloss: the middle line is the headline, on one line from 1000 and on two below.
      Its size never passes the section headline's, and comes down only as far as its second line needs to stay whole (10.61em; the whole line is 16.42em) */
.pledge{isolation:isolate;padding-block:calc(var(--pad) - 6px) calc(var(--pad) - 6px + var(--r));background:var(--deep);color:#fff}
.vow-art{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.vow-art picture{display:contents}
.vow-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:100% 100%}
.vow{container-type:inline-size;display:grid;justify-items:start;gap:8px}
.vow p{max-width:min(100%,292px);color:#fff}
.vow .vow-in{font-size:clamp(17px,4.6vw,18px);line-height:1.34;font-weight:460;letter-spacing:-.014em;text-wrap:balance}
.vow h2{font-size:clamp(26px,8.4vw,44px);font-size:min(var(--h2),calc(100cqw/10.76));line-height:1.05;letter-spacing:-.04em;color:#fff}
.vow h2 span{display:block;white-space:nowrap}
.vow .vow-pay{font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.014em;text-wrap:balance} /* 19px bold: large text. Both lines beside the headline are subs of two lines at most, so they may balance (T6) */
.vow .vow-gloss{margin-top:8px;font-size:16px;line-height:1.4;font-weight:430;letter-spacing:-.004em;color:var(--on-deep2)}
@media (min-width:768px){
 .pledge{padding-block:clamp(44px,4.4vw,68px) calc(clamp(44px,4.4vw,68px) + var(--r))}
 .vow{justify-items:center;gap:clamp(8px,.9vw,14px);text-align:center}
 .vow p{max-width:none}
 .vow .vow-in{font-size:var(--lead)}
 .vow .vow-pay{font-size:clamp(19px,1.55vw,25px)}
 .vow .vow-gloss{margin-top:clamp(6px,.8vw,12px);font-size:clamp(15px,1.1vw,16px)}
}
@media (min-width:1000px){
 .vow h2{font-size:min(var(--h2),calc(100cqw/16.8));white-space:nowrap}
 .vow h2 span{display:inline}
}

/* 3. QuickBooks: one headline, the whole sentence at the site's size (no lead-in line, no display line) */
.qb{padding-top:var(--pad)}
.qb-t h2{font-size:var(--h2);line-height:1.05;letter-spacing:-.04em}
@media (min-width:768px){.qb{padding-top:clamp(48px,5vw,84px)}}

/* 2. the month and the phone, from 1000. Both headings stand over the pair, centred (T7). Under them the calendar, seven equal columns, and the phone
      beside it: the same top edge, and the calendar's rows stretch to the phone's foot. Labels take two lines in the taller tiles, so none is cramped.
      T4: the bezel carries no chip. A caption under the pair would stand on the coloured light, where white, the secondary grey and the ink all
      measure under AA (2.8 to 3.7:1 at the worst pixel), so the pair's one disclosure is the site's chip on the month's own title row (S3).
      T2: the dialog is laid out at 330 wide, so its text is 13px or more as drawn from 1160 up (the phone is at least 334 wide there) */
.mo-tag{display:none!important}
@media (min-width:1000px){
 :root{--ph:320px}
 .duo{--ds:var(--h2);--yrs:var(--lead)}
 .mon h2,.you-t{grid-column:1/-1}
 .duo h2,.you-r{text-align:center}
 .mo{align-self:stretch;display:flex;flex-direction:column}
 .mo .grid-m{flex:1;grid-auto-rows:auto;grid-template-rows:repeat(5,minmax(84px,1fr))}
 .ph-stage{grid-row:3;align-self:start;margin-top:var(--dgap)}
 .ev b,.ev.now b{font-size:clamp(14px,1.05vw,16px);line-height:1.15;letter-spacing:-.02em;white-space:normal}
 .mo .lf-h{align-items:center;justify-content:space-between;gap:12px}
 .mo-tag{display:inline-flex!important}
 .ph-stage .fk-fit{--fk-w:330!important;--fk-h:714!important}
 .ph-stage .fk-tag{display:none!important}
 .ph-stage .fk-pay td{padding-block:4px}
}
@media (min-width:1160px){:root{--ph:clamp(334px,24vw,400px)}}
/* 1000 to 1159: the narrower phone lays the dialog out at 316 with the app's tighter paddings, so its text is still 13px as drawn (T2) */
@media (min-width:1000px) and (max-width:1159px){
 .ph-stage .fk-fit{--fk-w:316!important;--fk-h:684!important}
 .ph-stage .fk-dlg-m{gap:12px;padding:12px 16px 16px}
 .ph-stage .fk-pay td{padding-block:3px}
 .ph-stage .fk-pay th{padding-block:4px}
 .ph-stage .fk-pay td,.ph-stage .fk-pay th{padding-inline:10px}
}
@media (min-width:1280px){
 .ev{padding:12px 12px 11px}
 .ev.now{padding-left:12px}
 .d{padding:12px 0 0 12px}
 .wk i{padding-left:12px}
}

/* 4. the payroll dialog as a panel, below 1000 (S4, T11: on the section's white ground). The real dialog in the page's flow at true size: no intro
      paragraph and no close mark (T3), its title and chip on one row where they fit, all eight employees at a compact row height so the totals add up,
      the two actions in one row. 15px figures, nothing under 14px. About 540px at 390 */
.ph-stage .fk-dlg-s,.ph-stage .fk-dlg-x{display:none}
@media (max-width:999px){
 .ph-stage{width:min(100%,420px)}
 .you-s{--sb:calc(var(--pad)*.8 + var(--r))!important}
 .ph-stage .fk-fit{--fk-s:1!important;aspect-ratio:auto}
 .ph-stage .fk-stage{position:static;width:auto;height:auto;transform:none}
 .ph-stage .fk-port{position:static}
 .ph-stage .fk-veil{display:none}
 .ph-stage .fk-dlg-m{position:relative;left:auto;right:auto;top:auto;height:auto;gap:12px;padding:16px;border:0;border-radius:var(--panel-r);box-shadow:var(--panel-shadow)} /* taste-skill-ignore: product screen, the site's panel (S4) */
 .ph-stage .fk-dlg-t{gap:6px 8px;font-size:18px;line-height:1.2}
 .ph-stage .fk-dlg-b{gap:10px}
 .ph-stage .fk-per,.ph-stage .fk-pay,.ph-stage .fk-sum{font-size:15px;line-height:1.4}
 .ph-stage .fk-per{gap:0}
 .ph-stage .fk-pay th{padding-block:4px;font-size:14px}
 .ph-stage .fk-pay td{padding-block:3.5px}
 .ph-stage .fk-sum{row-gap:2px}
 .ph-stage .fk-dlg-m .fk-foot{flex-direction:row}
 .ph-stage .fk-foot .fk-btn{flex:1 1 0;min-width:0;min-height:46px;padding-inline:6px;font-size:15px}
}
@media (max-width:359px){.ph-stage .fk-foot .fk-btn{font-size:14px}}

/* 5. the AI picture (gated) is a chat panel at the level of the other screens: the site's panel on the section's mist, a title row naming the assistant
      and its connection, the question, and the answer under the source it was read from. Text only: no logo, no composer that does nothing (T3) */
.ai{background:var(--mist)}
.ai-pic{display:block}
.ai-h{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.3;font-weight:600;color:var(--ink)} /* taste-skill-ignore: the panel's own title rule */
.ai-h span:last-child{font-weight:460;color:var(--ink2)}
.ai-on{width:8px;height:8px;flex:none;border-radius:50%;background:var(--tick)}
.ai-dot{width:3px;height:3px;flex:none;border-radius:50%;background:var(--ink3)}
.ai-thread{display:grid;gap:18px;padding:20px 18px 24px}
.ai-thread .q{justify-self:end;max-width:84%;padding:11px 16px;border-radius:18px 18px 6px 18px;background:var(--ink);color:#fff;font-size:17px;line-height:1.35;font-weight:520;letter-spacing:-.012em}
.ai-thread .a{display:grid;justify-items:start;gap:10px}
.ai-from{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px 0 9px;border:1px solid var(--rule);border-radius:999px;font-size:14px;line-height:1;font-weight:500;color:var(--ink2)} /* taste-skill-ignore: the source mark of an answer */
.ai-ans{font-size:18px;line-height:1.4;letter-spacing:-.012em;color:var(--ink)}
.ai-ans b{font-weight:680;font-variant-numeric:tabular-nums}
@media (min-width:768px){
 .ai-h{padding:clamp(13px,1.1vw,16px) clamp(18px,1.7vw,24px);font-size:clamp(15px,1.1vw,16px)}
 .ai-thread{gap:clamp(18px,1.6vw,24px);padding:clamp(20px,1.9vw,28px) clamp(18px,1.7vw,24px) clamp(24px,2.2vw,32px)}
 .ai-thread .q{padding:clamp(11px,1vw,14px) clamp(16px,1.4vw,20px);font-size:clamp(17px,1.3vw,19px)}
 .ai-ans{font-size:clamp(18px,1.45vw,21px)}
}

/* T1, by the same reasoning outside a product screen: the payday still to come is a tinted tile, not an outline ring (rings read as stuck focus rings) */
.ev.nx{background:rgba(10,28,124,.1)!important;box-shadow:none!important;color:var(--deep)}
@media (max-width:767px){.next .dt{background:rgba(10,28,124,.1);box-shadow:none}}

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


/* ================= third pass (11/10): the site's repeated pieces on this page (BRIEF-S4 C1 to C10; shared/system.css holds the rules) ================= */
/* C1, C2 the hero's caption. From 700 it stands where it stood, centred under the laptop at the head of the white sheet (the same place, now measured from the sheet:
   the sheet's top padding is --ov + 26q + 21px, or --ov + 40q + 21px from 951). On a phone it is the sheet's first line, under the phone */
.hero .cap{margin:0 0 9px;text-align:left}
@media (min-width:951px),(min-width:700px) and (min-height:501px){
 .trust{position:static}
 .hero .cap{position:absolute;z-index:3;left:calc(50% - 66*var(--q));top:calc(-14*var(--q) - 21px);margin:0;max-width:none;white-space:nowrap;text-align:center;transform:translateX(-50%)}
}
@media (min-width:951px){.hero .cap{left:calc(50% + var(--lx));top:calc(-51*var(--q))}} /* 45 under the stage: on the floor's white, 33 under its crown, in the system's caption ink */
/* C10 no coloured word in a display line */
.trust-main b{color:inherit}
/* C3 the two cards' titles are card titles (the site's .card-h size) */
.board h3.card-h{font-size:clamp(28px,2.6vw,42px);line-height:1.08;letter-spacing:-.034em}
/* one tick style in the Florink card: the row you approve is told by its words, not by a filled disc among open ones */
.did.mine .mk{background:rgba(255,255,255,.16);color:#fff}
/* the two "Your time" lines stand right under the two prices, on one line; the note on the $674 closes its card. So the Florink card has no gap above its last line */
@media (min-width:1000px){
 .time .cell:first-child,.time .cell:last-child{grid-row:7;align-self:end;padding-block:10px 20px}
 .time .cell:last-child{padding-top:38px}
 .sums .total-note{align-self:start}
 .foot{grid-row:8;padding-top:0}
}
/* C1 the month and the payroll dialog are one group with one caption. From 1000 it stands at the foot of the month's white card (under the pair the ground is
   the coloured light, where no caption colour passes AA); on a phone each of the two has its own, as they are two screens apart */
.duo .cal-cap{margin:10px 2px 0}
.duo .you-cap{margin-top:12px}
@media (min-width:768px) and (max-width:999px){.duo .cal-cap{grid-column:1/-1;margin:0}}
@media (min-width:1000px){
 .mo{padding-bottom:calc(var(--pt) + 30px)}
 .duo .cal-cap{position:relative;z-index:2;grid-column:1;grid-row:3;align-self:end;margin:0 0 var(--pt) clamp(18px,1.7vw,26px)}
 .duo .you-cap{display:none}
}
/* the promise: two type levels, the headline at the site's size and three lines at the lede's. From 1000 the headline is two lines, so its words stand clear of the ribbon */
.vow .vow-in,.vow .vow-pay,.vow .vow-gloss{font-size:clamp(17px,4.6vw,18px);line-height:1.34;letter-spacing:-.014em}
.vow .vow-gloss{margin-top:6px}
/* art pass 11/11: on a phone the promise is two lines, "We handle it," and the rest whole. At --h2 the rest broke in two (three lines at 390, which the inspector fails),
   so under 768 this one headline is the largest size at which its second line fits the column: the column's width over 10.76 (32.9px at 390), never over --h2 */
@media (max-width:767px){.vow h2{font-size:min(var(--h2),calc(100cqw/10.76))}.vow h2 span{white-space:nowrap}}
@media (min-width:768px){.vow .vow-in,.vow .vow-pay,.vow .vow-gloss{font-size:var(--lead)}}
@media (min-width:1000px){.vow h2{font-size:var(--h2);white-space:normal}.vow h2 span{display:block;white-space:nowrap}}
/* QuickBooks on a phone: the sentence's first half is a lead-in in the lede's style, and "checked to the cent." is the headline (four lines of headline before) */
@media (max-width:699px){
 .qb-t h2 .qb-in{display:block;margin-bottom:8px;font-size:clamp(17px,4.6vw,18px);line-height:1.34;font-weight:460;letter-spacing:-.014em}
 .qb-t h2 .qb-hl{display:block}
}
/* C1 its caption stands under the screen on every width */
.qb .cap{position:relative;z-index:1}
/* the totals strip of the phone's cut: two by two, the month's lock under them */
@media (max-width:767px){
 .v2 .fk-tot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
 .v2 .fk-tot>.fk-lock{grid-column:1/-1;justify-self:start;margin-left:0}
}
/* the catch-up card and "Bring your own AI." stand closer (about 240px of empty ground before); with the AI section hidden the sheet ends the same way on the band */
@media (min-width:768px){.qb{padding-bottom:calc(clamp(28px,3vw,44px) + var(--r))}.ai{padding-top:clamp(44px,4.4vw,64px)}}
.ai-fig{min-width:0}
/* C6 two widths: the firm's statement on the site's one measure, the catch-up card on the page grid */
@media (min-width:768px){.born-lead{max-width:var(--measure)}.qb-cu{width:100%}}


/* ================= fourth pass (11/11, launch copy) ================= */
/* the states line is a link to the list on /pricing: the lede's own weight, the site's underline */
main p.scope a:not(.btn):not(nav a):not(:is([data-ui],.fk-ui) a){font-weight:inherit}
/* the promise: one headline (the site's --h2, two lines) and one line under it */
.vow .vow-line{max-width:min(100%,292px);font-size:clamp(17px,4.6vw,18px);line-height:1.4;letter-spacing:-.014em;color:#fff}
@media (max-width:767px){.vow h2{font-size:var(--h2)}.vow h2 span{white-space:nowrap}}
@media (min-width:768px){.vow .vow-line{max-width:26em;font-size:var(--lead);text-wrap:balance}}
@media (min-width:1000px){.vow .vow-line{max-width:34em}}
/* the catch-up sale card stands where the catch-up line stood, on the page grid; on a phone the sheet is white, so the card takes the mist */
.qb-sale{position:relative;z-index:1;margin-top:28px}
.qb-sale .sale-card{background:var(--mist)}
@media (min-width:768px){.qb-sale{margin-top:clamp(32px,3.4vw,52px)}.qb-sale .sale-card{background:#fff}}

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