:root{ --paper:#FFFFFF; --surface:#F5F6F7; --ink:#0D0D0D; --ink-2:#0D0D0D; --forest:#2D4A42; --forest-2:#3C6053; --card:#FFFFFF; --amber:#B4540A; --red:#A03123; --line:#E7E7E7; --mute:rgba(13,13,13,.66); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--paper);color:var(--ink); font-family:'Prata',Georgia,'Times New Roman',serif; font-size:17px;line-height:1.6; } /* NO -webkit-font-smoothing:antialiased here, deliberately. It sat in this rule from the first version of the file and it is why type on this site always looked thinner than the same font on its Google Fonts specimen page: on macOS it switches rendering from subpixel (LCD) to grayscale, which strips roughly a quarter of the apparent weight. That reads as "crisp" under a 800-weight grotesque and as "washed out" under a 400-only high-contrast serif — which is what we now set the whole site in. Left at the browser default, Prata renders with the same weight the specimen shows. */ .mono{font-variant-numeric:tabular-nums} a{color:inherit} /* No orphans: text-wrap pretty asks the browser to avoid a last line holding one word, which is what "and there is nothing to sign up / for." was. (No backticks in this comment — the whole sheet is a template literal.) */ p,li,.lede,.sub,.wiz-hint,.wiz-fine,.faq-a,.chart-c,.stat-c,.r-c,.evidence,.f-note{text-wrap:pretty} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} /* header */ header{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:5} .hd{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;gap:14px;flex-wrap:wrap} /* Seven menu items fit one row in English and in no other European language: "Iesniegšanas termiņi", "Finanzierungsprogramme" and "Χρηματοδοτικά προγράμματα" are two to three times the width of "Deadlines". Rather than shrink the type until it is unreadable, translated locales put the menu on its own row under the wordmark, with the sign-in and the CTA still on the first — the language is in , so the layout can simply ask. */ html:not([lang="en"]) nav.main{order:3;flex-basis:100%;padding-top:4px} html:not([lang="en"]) .hd-right{order:2;margin-left:auto} .logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)} .logo img{display:block;height:26px;width:auto} nav.main{display:flex;gap:8px 16px;font-size:15px;font-weight:600;white-space:nowrap;flex-wrap:wrap;min-width:0;flex:1 1 auto} nav.main a{text-decoration:none;color:var(--mute)} nav.main a:hover{color:var(--ink)} nav.main a.here{color:var(--ink)} .cta{background:var(--ink);color:#fff;border:none;font:inherit;font-size:15px;padding:13px 30px;border-radius:0;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap;transition:transform .12s,background .12s} .cta:hover{background:#000;transform:translateY(-1px)} .ghost{background:#fff;border:1px solid rgba(13,13,13,.2);color:var(--ink);font:inherit;font-size:15px;padding:13px 30px;border-radius:0;cursor:pointer;text-decoration:none;display:inline-block;transition:border-color .12s,transform .12s} .ghost:hover{border-color:var(--ink);transform:translateY(-1px)} .ghost.wide{display:block;width:100%;text-align:center;margin-top:8px} .ghost.wide:hover{transform:none} /* language switcher — the flag list otnox.com carries, sitting after the CTA.
rather than a script: the menu is 25 static links, and a dropdown that needs JavaScript is a dropdown that is missing while the page loads. */ .lang{position:relative} .lang>summary{list-style:none;display:inline-flex;align-items:center;gap:7px;padding:9px 10px;cursor:pointer;user-select:none} .lang>summary::-webkit-details-marker{display:none} .lang>summary:hover{background:rgba(13,13,13,.05)} .lang-f{display:block;width:20px;height:20px;border-radius:50%;object-fit:cover} .lang-c{font-size:14px;color:var(--ink);letter-spacing:.02em} .lang-x{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(13,13,13,.45)} .lang[open]>summary .lang-x{transform:rotate(180deg)} .lang-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;background:#fff;border:1px solid var(--line);box-shadow:0 18px 44px rgba(13,13,13,.13);padding:8px;display:block;width:236px;max-width:calc(100vw - 32px);max-height:min(560px,72vh);overflow-y:auto;overscroll-behavior:contain} .lang-menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;text-decoration:none;color:var(--ink);font-size:14.5px;white-space:nowrap} .lang-menu a:hover{background:var(--tint)} .lang-menu a.on{background:var(--tint)} @media(max-width:900px){.lang-menu{max-height:60vh}} @media(max-width:760px){.lang>summary .lang-c{display:none}} /* type */ .eyebrow{font-size:15.5px;font-weight:500;color:var(--mute);margin-bottom:14px;letter-spacing:.01em} /* 16ch was tuned to Plus Jakarta's narrower letters; Helvetica set the same headline in five lines instead of four, so the measure grows with the face. */ /* Headings are balanced, not just wrapped. * * The 22ch measure was set on English, where the words are short. Put the same * headline in Bulgarian or Finnish and the browser fills line one greedily and * drops two words onto line two — "Намирането на финансиране / е лесно." That * is a line-breaking problem, not a translation one, and text-wrap:balance is * what fixes it: the browser evens the lines instead of filling the first. The * measure also grows off English, because a language whose average word is half * again as long needs the room before balancing has anything to work with. */ h1{font-family:'Prata',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(38px,6vw,72px);line-height:1.12;letter-spacing:-.005em;max-width:22ch;color:var(--ink);text-wrap:balance} h1 em{font-style:normal;color:inherit} h2{font-family:'Prata',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.005em;line-height:1.18;color:var(--ink);text-wrap:balance} h2 em{font-style:normal;color:inherit} .section-t{font-family:'Prata',Georgia,'Times New Roman',serif;font-weight:400;font-size:26px;letter-spacing:0;margin:0 0 16px;color:var(--ink);text-wrap:balance} .section-t em{font-style:normal;color:inherit} .sub{color:rgba(13,13,13,.76)} /* hero — no wash, no gradient: otnox.com's landings are white or forest, never both */ .hero{padding:72px 0 56px} .hero p.lede{margin-top:24px;max-width:56ch;font-size:18px;color:var(--mute);line-height:1.6} .hero .actions{margin-top:32px;display:flex;gap:12px;align-items:center;flex-wrap:wrap} .hero .fine{margin-top:18px;font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--mute)} /* hub hero — the forest header otnox.com's country hubs open with: white type on the one accent colour, the CTAs on top of it, and the stat strip inside the band with its hairlines in white. */ .hub{background:var(--forest);color:#fff;padding:34px 0 54px} .hub .crumbs,.hub .crumbs a{color:rgba(255,255,255,.6)} .hub .crumbs a:hover{color:#fff} .hub h1{color:#fff;max-width:20ch;font-size:clamp(34px,4.6vw,56px);margin-top:24px;text-wrap:balance} /* Longer words need a longer line before balance has anything to work with. */ html:not([lang="en"]) h1{max-width:26ch} html:not([lang="en"]) .hub h1{max-width:24ch} html:not([lang="en"]) h2{max-width:26ch} .hub .lede{margin-top:20px;max-width:60ch;font-size:17px;line-height:1.6;color:rgba(255,255,255,.78)} .hub .actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap} .hub .cta{background:#fff;color:var(--ink)} .hub .cta:hover{background:#EDEDED} .hub .ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff} .hub .ghost:hover{border-color:#fff} .hub .kpi{margin:52px 0 0} .hub .stat{border-top-color:rgba(255,255,255,.28)} .hub .stat-v{color:#fff} .hub .stat-k{color:#fff} .hub .stat-c{color:rgba(255,255,255,.6)} .hub .stat.warn .stat-v{color:#F0B26B} /* hub body: prose column + a rail of figures, as on the hubs */ .hub-body{display:grid;grid-template-columns:1.65fr 1fr;gap:56px;align-items:start;padding:64px 0 0} .hub-body .prose p{font-size:16px;line-height:1.75} .hub-rail{display:flex;flex-direction:column;gap:30px} .hub-rail .donut{flex-direction:column;align-items:flex-start;gap:18px;max-width:none;margin:14px 0 0} .hub-rail .donut-legend{min-width:0;width:100%} .hub-rail .chart-t{margin-bottom:2px} .hub-rail .chart-c{margin-top:12px} .hub-rail .r-n{font-family:'Prata',Georgia,'Times New Roman',serif;font-size:58px;font-weight:400;line-height:1.1;letter-spacing:0;color:var(--forest)} .hub-rail .r-t{font-size:19px;font-weight:700;margin-top:4px;letter-spacing:-.01em} .hub-rail .r-c{font-size:15.5px;font-weight:500;color:var(--mute);margin-top:8px;line-height:1.5} .hub-rail .r-rule{height:1px;background:var(--line)} .section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:56px} .section-head .more{font-size:15.5px;font-weight:600;text-decoration:none;white-space:nowrap} .section-head .more:hover{color:var(--forest)} /* runway */ .runway{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0 40px;background:var(--surface)} .runway .label{font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.1em;color:var(--mute);margin-bottom:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .track{position:relative;height:2px;background:var(--line);margin:44px 6px 34px} .tick{position:absolute;top:50%;transform:translate(-50%,-50%)} .tick .dot{width:10px;height:10px;border-radius:50%;background:var(--forest);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--forest);display:block} .tick.today .dot{background:var(--ink);box-shadow:0 0 0 1px var(--ink)} .tick .tag{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:13px;color:var(--mute);text-decoration:none} .tick .tag.up{bottom:16px}.tick .tag.down{top:16px} .tick .tag b{color:var(--ink);font-weight:600;display:block;text-align:center} .tick a.tag:hover b{color:var(--forest)} /* feed */ .feed{padding:60px 0 20px} .feed-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;gap:20px;flex-wrap:wrap} .feed-head .mono{font-size:14px;color:var(--mute)} /* badges — structure is grey, only a deadline gets colour */ .badge{font-size:14px;font-weight:700;padding:4px 10px;border-radius:0;white-space:nowrap;display:inline-block} .badge.solo,.badge.cons,.badge.unknown,.badge.none,.badge.rolling{background:rgba(13,13,13,.05);color:rgba(13,13,13,.62)} .badge.hot{background:rgba(160,49,35,.10);color:var(--red)} .badge.warm{background:rgba(180,84,10,.12);color:var(--amber)} .badge.cool{background:rgba(45,74,66,.09);color:var(--forest)} /* value strip */ .value{padding:70px 0;border-top:1px solid var(--line)} .value .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:34px} .value h4{font-size:16px;font-weight:800;margin-bottom:8px;letter-spacing:-.01em} .value p{font-size:15.5px;color:var(--mute)} .value .n{font-variant-numeric:tabular-nums;font-size:14px;color:var(--mute);margin-bottom:12px;display:block;font-weight:500} /* detail */ .crumbs{font-size:15px;color:var(--mute);padding:0 0 14px} .crumbs b{color:var(--ink)} .hub .crumbs b{color:#fff} .hub-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .hub-top .crumbs{padding-bottom:0} /* save-to-shortlist, sitting opposite the trail in the header */ .save{display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid rgba(255,255,255,.35); color:#fff;font:inherit;font-size:14.5px;padding:9px 18px;cursor:pointer;transition:border-color .14s,background .14s} .save svg{width:18px;height:18px;flex:none} .save:hover{border-color:#fff;background:rgba(255,255,255,.08)} .save.on{background:#fff;color:var(--forest);border-color:#fff} .save.on svg{fill:currentColor} .page > .wrap > .crumbs:first-child,.hub .crumbs{padding-top:0} .crumbs a{text-decoration:none} .crumbs a:hover{color:var(--forest)} .detail-hero{padding:40px 0 38px;border-bottom:1px solid var(--line)} .detail-hero h1{font-size:clamp(28px,4vw,52px);max-width:24ch} .statusline{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap} .pill{font-variant-numeric:tabular-nums;font-size:14px;padding:6px 14px;border:1px solid var(--line);border-radius:0;background:var(--surface)} .pill.open{border-color:rgba(45,74,66,.3);color:var(--forest);background:rgba(45,74,66,.07)} .pill.forthcoming,.pill.rolling{border-color:var(--line);color:var(--mute);background:var(--surface)} .detail-body{display:grid;grid-template-columns:1.65fr 1fr;gap:56px;padding:56px 0 70px;align-items:start} .facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:0;overflow:hidden;margin-bottom:34px} .fact{background:var(--card);padding:18px 20px} .fact .k{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.08em;color:var(--mute)} .fact .v{font-family:'Prata',Georgia,'Times New Roman',serif;font-size:24px;font-weight:400;margin-top:6px;line-height:1.3;letter-spacing:0} .fact .v small{font-size:14.5px;font-weight:500;color:var(--mute);display:block;margin-top:4px;letter-spacing:0} .facts .fact:last-child:nth-child(odd){grid-column:1 / -1} .prose p{margin-bottom:14px;color:var(--ink)} .prose ul{margin:0 0 16px 20px;color:var(--ink)} .prose li{margin-bottom:7px} .prose .more{font-size:15px;color:var(--mute)} .prose{margin-bottom:34px} .cutoffs{border:1px solid var(--line);border-radius:0;overflow:hidden;margin:10px 0 34px} .cutoff{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 18px;background:var(--card);border-bottom:1px solid var(--line);font-size:15.5px} .cutoff:last-child{border-bottom:none} .cutoff.past{opacity:.42} .cutoff .d{font-variant-numeric:tabular-nums;white-space:nowrap} .cutoff.next .d{color:var(--amber);font-weight:500} table.tbl{width:100%;border-collapse:collapse;background:var(--card);margin-bottom:34px} .tbl td,.tbl th{padding:12px 14px;font-size:15.5px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .tbl tr:last-child td{border-bottom:none} .tbl tbody tr{transition:background .14s} .tbl tbody tr:hover{background:var(--surface)} .tbl tbody tr:hover .crow-go{opacity:1;transform:none;color:var(--ink)} .tbl td.go,.tbl th.go{width:34px;text-align:right;padding-left:6px;padding-right:0} .tbl th.n,.tbl td.n{text-align:right} .tbl th{text-align:left} .tbl th{font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.06em;color:var(--mute);font-weight:500} .tbl td.b{font-variant-numeric:tabular-nums;white-space:nowrap} .tbl td a,.crow-a b{ text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; text-decoration-color:rgba(13,13,13,.45);text-decoration-skip-ink:auto} .tbl tbody tr:hover td a,.crow:hover .crow-a b{text-decoration-color:currentColor} .evidence{font-size:15px;color:var(--mute);display:block;margin-top:4px} /* fit rail — the one deliberately dark surface, so a verdict reads as a verdict */ /* The rail panel used to be the site's one dark surface. On a page whose header is already forest, a second green block below it read as two heroes stacked. White, hairline, and the axes below it become a checklist. */ .fit{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:0;padding:26px 24px;position:sticky;top:24px} .fit h3{font-family:'Prata',Georgia,'Times New Roman',serif;font-weight:400;font-size:24px;margin-bottom:6px;letter-spacing:0} .fit .s{font-size:15px;opacity:.72;margin-bottom:18px} .chk{display:flex;gap:12px;padding:11px 0;border-top:1px solid rgba(242,245,242,.16);font-size:15.5px;align-items:flex-start} .chk .m{font-variant-numeric:tabular-nums;font-size:14.5px;flex:none;margin-top:1px} .chk.ok .m{color:var(--forest)}.chk.warn .m{color:#F0B26B}.chk.dim{opacity:.6} .fit .cta2{display:block;width:100%;margin-top:22px;background:var(--ink);color:#fff;border:none;font:inherit;font-weight:800;font-size:15px;padding:13px;border-radius:0;cursor:pointer;text-align:center;text-decoration:none} .fit .cta2:hover{background:#000} .fit .note{font-size:14px;color:var(--mute);margin-top:12px;text-align:center;line-height:1.5} .fit .note a{color:var(--ink)} /* generic lists */ .rows{border-top:1px solid var(--line);background:var(--card);margin-top:26px} .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);text-decoration:none} .row:last-child{border-bottom:none} .row:hover{background:var(--surface)} .row .l strong{font-weight:700;font-size:15.5px;letter-spacing:-.01em} .row .l span{display:block;font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--mute);margin-top:3px} .row .r{font-variant-numeric:tabular-nums;font-size:14.5px;color:var(--mute);text-align:right;white-space:nowrap} .row .r b{color:var(--ink);font-weight:500} .page{padding:40px 0 70px} .page .prose{max-width:70ch} .page h2{margin:36px 0 14px} .page ul{margin:0 0 18px 20px;color:var(--ink)} .page li{margin-bottom:8px} .callout{border-left:3px solid var(--forest);background:var(--surface);padding:14px 18px;border-radius:0;font-size:15.5px;margin:18px 0} /* ---- FAQ band — otnox.com's ox-faq: tinted section, heading left, questions as hairline rows that open in place.
does the state, so it works with no JavaScript at all. ---- */ .faq{padding:76px 0 12px;margin-top:52px;border-top:1px solid var(--line)} .faq h2{text-align:left;max-width:24ch;margin-bottom:36px} .faq-list{max-width:none} .faq-item{border-top:1px solid var(--line)} .faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px; padding:18px 0;font-size:20px;line-height:1.4;cursor:pointer;list-style:none;color:var(--ink)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'+';font-size:24px;color:var(--mute);flex:none} .faq-item[open] summary::after{content:'\2212'} .faq-item summary:hover{color:#000} .faq-a{padding:0 0 24px;max-width:88ch;font-size:16px;line-height:1.65;color:var(--mute)} /* closing band + footer. Named .closer, not .bottom: section-level names stay distinct from component-level ones, so an unscoped rule further down the sheet cannot win a cascade it was never meant to enter. */ /* The closing band used to be a black slab. It is the last thing on every page now, and a full-width black block between the content and the footer read as the end of the site rather than an invitation. Light, hairline above, one dark button. */ .closer{background:var(--paper);color:var(--ink);padding:64px 0 56px;text-align:center;margin-top:52px;border-top:1px solid var(--line)} .closer h2{color:var(--ink)} .closer h2 em{color:inherit} .closer p{margin:16px auto 30px;color:var(--mute);max-width:56ch} .closer .cta{background:var(--ink);color:#fff;padding:15px 38px;font-size:16px} .closer .cta:hover{background:#000} /* footer — otnox.com's SeoFooter: four link columns, a hairline, a legal row, and the source note last. The old one was a single grey line. */ footer{border-top:1px solid var(--line);padding:54px 0 40px;font-size:14.5px;color:var(--mute);background:var(--paper)} .f-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:34px} .f-col h4{font-size:14px;font-weight:700;letter-spacing:1.1px;color:rgba(13,13,13,.45);margin-bottom:10px} .f-col ul{list-style:none;margin:0} .f-col li a{display:block;font-size:15.5px;font-weight:400;line-height:2.2;color:var(--ink);text-decoration:none} .f-col li a:hover{opacity:.55} .f-rule{height:1px;background:var(--line)} .f-legal{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 0 0} .f-legal p{font-size:14.5px;color:rgba(13,13,13,.55)} .f-legal nav{display:flex;gap:10px;flex-wrap:wrap;font-size:14.5px} .f-legal nav a{color:var(--ink);text-decoration:none} .f-legal nav a:hover{opacity:.55} .f-legal nav i{font-style:normal;color:rgba(13,13,13,.3)} .f-note{font-size:14.5px;line-height:1.7;color:rgba(13,13,13,.55);max-width:96ch;padding-top:24px} .f-note a{color:rgba(13,13,13,.55)} @media(max-width:820px){.f-cols{grid-template-columns:1fr 1fr;gap:24px 20px}} @media(max-width:980px){ .hub-body{grid-template-columns:1fr;gap:38px;padding-top:44px} .value .grid3{grid-template-columns:1fr} .detail-body{grid-template-columns:1fr} .fit{position:static} nav.main{display:none} .runway{overflow-x:auto} .track{min-width:780px} .facts{grid-template-columns:1fr} } /* ---- stat strip ---- Copied from otnox.com's country hub: no boxes, no tiles. Each figure gets a hairline above it, the number in the one accent, then a bold 14px label and a muted 12.5px line under it. Source order stays label/value/context — the flex order swaps them so the markup (and every reader) still reads the label first. */ .kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 30px;margin:52px 0 10px} h2 + .kpi,.sub + .kpi{margin-top:52px} .detail-hero .crumbs,.page > .wrap > .crumbs{margin-bottom:2px} .stat{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:18px} .stat-k{order:2;font-size:15.5px;font-weight:700;color:var(--ink);margin-top:8px;line-height:1.3} .stat-v{order:1;font-family:'Prata',Georgia,'Times New Roman',serif;font-size:clamp(30px,3.4vw,44px);font-weight:400;line-height:1.1;letter-spacing:0;color:var(--forest)} .stat-c{order:3;font-size:15px;font-weight:500;color:var(--mute);margin-top:4px;line-height:1.45;text-wrap:balance} .stat.warn .stat-v{color:var(--amber)} /* ---- composition donut ---- 1:1 with the rings on otnox.com's country hubs (CountryHubLanding's ValueDonut/CategoryDonut): r=78, 26px stroke, #eef0ef track, segments in one green fading 1 → .34 across the ring, total in the middle, and a legend whose rows highlight with the segment. Composition only — anything that is a trend over months stays a strip of bars, as it is there. */ .charts{display:grid;grid-template-columns:1fr 1fr;gap:46px 40px;align-items:start;margin-top:34px} .chart-h{font-size:15px;font-weight:500;color:var(--mute);margin-bottom:5px} .chart-t{font-family:'Prata',Georgia,'Times New Roman',serif;font-size:22px;font-weight:400;letter-spacing:0;line-height:1.3} .chart-c{font-size:15px;color:var(--mute);line-height:1.55;margin-top:14px;max-width:46ch} .donut{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin:20px 0 4px;max-width:720px} .charts .donut{gap:24px;align-items:flex-start} .charts .donut-legend{min-width:210px} .donut-ring{flex:none;width:200px;height:200px} .donut-ring .seg{transition:stroke-width .18s ease} .donut-ring .seg:hover{stroke-width:32} .donut-c{font-family:'Prata',Georgia,'Times New Roman',serif;font-weight:400;font-size:28px;fill:var(--forest)} .donut-cs{font-weight:600;font-size:13px;fill:rgba(13,13,13,.6)} .donut-legend{flex:1;min-width:290px} .dl{display:flex;align-items:center;gap:12px;padding:6px 8px;margin:0 -8px;border-radius:0;text-decoration:none;color:inherit;transition:background .15s} a.dl:hover{background:rgba(45,74,66,.06)} .dl-sw{width:12px;height:12px;border-radius:0;flex:none} .dl-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px;font-weight:600} .dl-n{font-size:15px;font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap} .dl-v{font-size:15px;font-weight:700;color:var(--forest);min-width:62px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} /* ---- meter ---- */ .meter{margin:16px 0} .meter-h{display:flex;justify-content:space-between;font-size:15px;margin-bottom:6px} .meter-h b{font-variant-numeric:tabular-nums;font-weight:500} .meter-track{background:rgba(13,13,13,.05);border-radius:0;height:10px;overflow:hidden} .meter-track i{display:block;height:100%;border-radius:0} .meter-c{font-size:14px;color:var(--mute);margin-top:6px} /* ---- week strip ---- */ .weeks{display:flex;gap:2px;margin:16px 0 8px;flex-wrap:wrap} .week{width:26px;height:26px;border-radius:0;display:flex;align-items:center;justify-content:center} .week-n{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink);opacity:.75} /* ---- axis rows (the verdict) ---- */ .axis{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:flex-start} .axis:first-child{border-top:none} .axis-i{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;font-size:13px;font-weight:500;margin-top:1px} .axis.pass .axis-i{background:rgba(45,74,66,.12);color:var(--forest)} .axis.check .axis-i{background:rgba(180,84,10,.14);color:var(--amber)} .axis.block .axis-i{background:rgba(160,49,35,.14);color:var(--red)} .axis.unknown .axis-i,.axis.info .axis-i{background:rgba(13,13,13,.06);color:var(--mute)} .axis-b{display:flex;flex-direction:column;gap:3px} .axis-h{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .axis-h em{font-variant-numeric:tabular-nums;font-style:normal;font-weight:500;font-size:12.5px;letter-spacing:.07em;color:var(--mute)} .axis-h .inf{font-variant-numeric:tabular-nums;font-size:12.5px;letter-spacing:.05em;background:rgba(13,13,13,.06);color:var(--mute);padding:1px 7px;border-radius:0;font-weight:400} .axis-t{font-size:15px;color:rgba(13,13,13,.86);line-height:1.5} /* ---- profile form ---- */ .fld{display:block;border:none;margin:0 0 22px} .fld-q{display:block;font-size:15px;font-weight:700;margin-bottom:10px;padding:0} .opts{display:flex;gap:8px;flex-wrap:wrap} .opt{position:relative;cursor:pointer} .opt input{position:absolute;opacity:0;width:0;height:0} .opt span{display:inline-block;border:1px solid var(--line);background:var(--card);border-radius:0;padding:9px 16px;font-size:15px;transition:all .12s} .opt:hover span{border-color:var(--ink)} .opt.on span{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600} .fld input[type=text]{width:100%;max-width:520px;border:1px solid var(--line);background:var(--card);border-radius:0;padding:12px 15px;font:inherit;font-size:15.5px;color:var(--ink)} .fld input[type=text]:focus{outline:none;border-color:var(--ink)} /* ---- result cards ---- One card, one border, whatever the verdict. The verdict lives in the fit dots and in the reason lines; it used to also live in a coloured 3px edge, which turned one component into four differently-framed tiles. */ .res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0 34px} .res{background:var(--card);border:1px solid var(--line);border-radius:0;padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:8px} .res:hover{border-color:rgba(13,13,13,.22)} .res-top{display:flex;justify-content:space-between;align-items:center;gap:10px} .res-p{font-variant-numeric:tabular-nums;font-size:13px;color:var(--forest);font-weight:600} /* ---- fit dots — Otnox's MatchDots (dashboard/MatchDots.jsx), five steps instead of four so one dot is exactly 20 points. 8px dots, 5px apart, filled in the one accent, empty ones grey. The score is not printed until you point at the card: a number beside every title is noise when the dots already rank them, but you want it when two look alike. It holds its space at opacity 0, so nothing shifts on hover. */ .fit-dots{display:inline-flex;align-items:center;gap:5px} .fit-dots i{width:8px;height:8px;border-radius:50%;background:rgba(13,13,13,.13);display:block} .fit-dots i.on{background:var(--forest)} .fit-dots b{font-size:14px;font-weight:700;color:var(--forest);opacity:0;transition:opacity .15s;margin-left:3px;font-variant-numeric:tabular-nums} /* the score shows when you point at the DOTS, not at the row: hovering a row is how you read the list, and a number appearing under every glance was noise. The dots carry a little padding so they are an easy target. */ .fit-dots{padding:6px 4px;margin:-6px -4px} /* the score belongs to the DOTS, not to the row: pointing at a row is how you read the list, and a number appearing under every glance was noise. */ .fit-dots:hover b{opacity:1} .res-t{font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.01em} .res-m{font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--mute)} .res-why{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--line);padding-top:9px} .why{font-size:14px;color:var(--mute);line-height:1.45} .why.block{color:var(--red)} .why.check{color:var(--amber)} .why.pass{color:var(--forest)} /* ---- your-fit panel on a call page ---- */ .fit-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line)} .fit-verdict{font-family:'Prata',Georgia,'Times New Roman',serif;font-size:22px;font-weight:400;line-height:1.25;letter-spacing:0} .fit-score{font-variant-numeric:tabular-nums;font-size:22px;font-weight:500} .fit-score small{font-size:14px;opacity:.6} .fit-foot{font-size:13.5px;color:var(--mute);margin-top:14px;text-align:center} .fit-empty b{display:block;font-family:'Prata',Georgia,'Times New Roman',serif;font-size:23px;font-weight:400;margin-bottom:8px;letter-spacing:0} .fit-empty p{font-size:15px;color:var(--mute);margin-bottom:16px} /* the panel is light now, so the axes use the page's own state colours */ /* ---- filters: one row, and the arrow never touches the edge ---- The native arrow sat flush against the border on Chrome/macOS. The control now draws its own chevron with 34px of right padding reserved for it, so every select looks the same in every browser. */ .filters{display:grid;grid-template-columns:minmax(215px,1.9fr) repeat(5,minmax(0,1fr));gap:10px;align-items:center;margin:26px 0 22px} .filters input[type=search]{width:100%;border:1px solid var(--line);background:var(--card);border-radius:0;padding:11px 18px;font:inherit;font-size:15.5px;color:var(--ink)} .filters input[type=search]:focus{outline:none;border-color:var(--ink)} .filters select{width:100%;appearance:none;-webkit-appearance:none;border:1px solid var(--line);background-color:var(--card);border-radius:0;padding:11px 34px 11px 15px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;text-overflow:ellipsis; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:11px 8px} .filters select:hover{border-color:rgba(13,13,13,.45)} .filters select:focus{outline:none;border-color:var(--ink)} @media(max-width:1120px){ .filters{grid-template-columns:repeat(3,minmax(0,1fr))} .filters input[type=search]{grid-column:1/-1} } @media(max-width:640px){.filters{grid-template-columns:1fr 1fr}} /* ---- dense call rows ---- */ .crows{margin-top:8px} /* the heading row of a call list — same words-in-caps as a .tbl thead, same rule under it, so a list and a table read as the same object */ .crow-head{padding:0 16px 10px;border-bottom:1px solid var(--line); font-size:14px;color:var(--mute)} .crow-head span:nth-child(2),.crow-head span:nth-child(3){text-align:left} .crow-head span:last-child{text-align:right} /* A fit list has one extra column. The dots sit in their own, so the "Fit" heading lands directly above them, and the arrow keeps the same narrow column it has in every other list. */ .crows.with-fit .crow,.crows.with-fit .crow-head{grid-template-columns:minmax(0,1fr) 150px 160px 96px 30px} .crow-e{display:flex;justify-content:flex-end;align-items:center} /* The heading sits over the MIDDLE of the dots, not at the right edge of the column: "Fit" is three letters and the dots are sixty pixels wide, so right-aligning both still reads as misaligned. */ .crows.with-fit .crow-head span:nth-child(4){text-align:center} .crows.with-fit .crow-d{justify-content:center} .crow,.crow-head{display:grid;grid-template-columns:minmax(0,1fr) 150px 160px 30px;gap:28px;align-items:center;padding:15px 16px;border-bottom:1px solid var(--line);text-decoration:none} .crow:last-child{border-bottom:none} .crow:hover{background:var(--surface)} .crow-a{min-width:0} .crow-a b{display:block;font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em} .crow-id{display:block;font-variant-numeric:tabular-nums;font-size:14px;color:var(--mute);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .crow-a .why{display:block;font-size:14px;line-height:1.45;margin-top:5px;color:var(--mute)} .crow-b,.crow-c{font-variant-numeric:tabular-nums;font-size:15px} .crow-b span,.crow-c span{display:block;font-size:14px;color:var(--mute);margin-top:2px} .crow-b span.u-hot{color:var(--red);font-weight:500} .crow-b span.u-warm{color:var(--amber);font-weight:500} .crow-b span.u-cool{color:var(--forest)} .crow-d{text-align:right;display:flex;justify-content:flex-end;align-items:center;gap:8px} /* the row is a link, so it says so under the cursor: an arrow slides in from the left of its own column and inks up. Nothing moves in the layout — the glyph holds its space at opacity 0. */ .crow-go{display:inline-block;font-size:17px;line-height:1;color:var(--mute); opacity:0;transform:translateX(-7px); transition:opacity .18s cubic-bezier(.22,.61,.36,1),transform .18s cubic-bezier(.22,.61,.36,1),color .18s} .crow:hover .crow-go{opacity:1;transform:none;color:var(--ink)} @media (prefers-reduced-motion:reduce){.crow-go{transition:opacity .18s}.crow:hover .crow-go{transform:none}} .fineprint{font-size:14.5px;color:var(--mute);line-height:1.6;margin-top:26px;max-width:70ch} .section-t.spaced{margin-top:46px} .kpi + .section-t,.kpi + h3{margin-top:52px} .section-t + .crows{margin-top:14px} /* ---- onboarding wizard, in Otnox's shape ---- One question per screen, a progress bar that only moves forward, and a huge ghost step numeral sliding in the corner. Otnox's OnboardingV2 proved the pattern: people answer eight questions one at a time who would abandon the same eight stacked in a form. */ html.has-fit .wiz{display:none} .wiz{position:relative;min-height:calc(100vh - 78px);display:flex;flex-direction:column;overflow:hidden;background:var(--forest);color:#fff} .wiz-bar{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.18);z-index:20} .wiz-bar i{display:block;height:100%;background:#fff;transition:width .7s cubic-bezier(.16,1,.3,1)} .wiz-ghost{position:absolute;right:-1vw;bottom:-5vh;z-index:0;pointer-events:none;user-select:none;font-size:min(46vh,420px);font-weight:800;line-height:1;color:rgba(255,255,255,.07)} .wiz-ghost span{display:block;overflow:hidden;height:1em} .wiz-ghost i{display:block;font-style:normal;transition:transform .9s cubic-bezier(.16,1,.3,1)} .wiz-ghost i b{display:block;height:1em;font-weight:800} .wiz .cta{background:#fff;color:var(--ink)} .wiz .cta:hover{background:#EDEDED} .wiz .callout{border-left-color:#fff;background:rgba(255,255,255,.08);color:#fff} .wiz .callout a{color:#fff} .wiz-stage{position:relative;z-index:10;flex:1;display:flex;align-items:center;justify-content:center;padding:56px 28px 72px} .wiz-step{width:100%;max-width:840px} .wiz-k{font-size:15.5px;font-weight:500;color:rgba(255,255,255,.62);margin-bottom:18px} .wiz-q{font-family:'Prata',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(30px,4.8vw,56px);line-height:1.14;letter-spacing:-.005em;max-width:18ch;margin-bottom:16px;color:#fff} .wiz-q em{font-style:normal;color:inherit} .wiz-hint{font-size:16px;color:rgba(255,255,255,.78);max-width:52ch;margin-bottom:36px;line-height:1.55} .wiz-opts{display:flex;flex-direction:column;gap:10px;max-width:620px} /* Eight jurisdictions do not fit one column above the fold, and a first question whose Continue button is below the fold is a question people answer by scrolling past it. Six options or more go two-up. */ .wiz-opts.two{display:grid;grid-template-columns:1fr 1fr;max-width:820px;gap:10px 12px} @media(max-width:760px){.wiz-opts.two{grid-template-columns:1fr}} .wiz-opt{display:flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.32);background:transparent;border-radius:0;padding:15px 22px;font-size:16px;cursor:pointer;text-align:left;font-family:inherit;font-weight:500;color:#fff;width:100%;transition:border-color .14s,transform .14s,background .14s} .wiz-opt:hover{border-color:#fff;transform:translateX(3px)} .wiz-opt.on{background:#fff;border-color:#fff;color:var(--forest)} .wiz-opt kbd{font-variant-numeric:tabular-nums;font-size:13px;border:1px solid rgba(255,255,255,.3);border-radius:0;padding:2px 7px;color:rgba(255,255,255,.72);background:transparent;flex:none} .wiz-opt.on kbd{background:rgba(45,74,66,.10);border-color:rgba(45,74,66,.35);color:var(--forest)} .wiz-text{width:100%;max-width:620px;border:none;border-bottom:2px solid rgba(255,255,255,.35);background:none;font:inherit;font-weight:700;font-size:clamp(20px,2.6vw,30px);padding:10px 0;color:#fff;letter-spacing:-.02em} .wiz-text:focus{outline:none;border-bottom-color:var(--forest)} .wiz-text::placeholder{color:rgba(255,255,255,.45);font-weight:500} .wiz-actions{display:flex;gap:16px;align-items:center;margin-top:40px;flex-wrap:wrap} .wiz-intro .wiz-q{max-width:20ch} .wiz-intro .cta{font-size:17px;padding:16px 38px} /* Two short lines under the button: text-wrap pretty only nudges the LAST line, which still left one word alone. balance distributes the whole block evenly, and a measure keeps it from running the width of the screen. (No backticks in this comment — the sheet is one template literal.) */ .wiz-fine{margin-top:18px;font-size:14.5px;color:rgba(255,255,255,.6);max-width:56ch;text-wrap:balance} .wiz-hint{text-wrap:balance} .wiz-back{background:none;border:none;font:inherit;font-size:15.5px;color:rgba(255,255,255,.72);cursor:pointer;text-decoration:underline;text-underline-offset:4px} .wiz-back:hover{color:var(--ink)} .wiz-close{position:absolute;top:18px;left:28px;z-index:30;text-decoration:none;font-size:22px;color:rgba(255,255,255,.72);line-height:1;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%} .wiz-close:hover{background:rgba(13,13,13,.06);color:var(--ink)} .wiz-count{position:absolute;top:20px;right:28px;z-index:30;font-variant-numeric:tabular-nums;font-size:14px;color:rgba(255,255,255,.72)} .fx{opacity:0;transform:translateY(10px);animation:fxin .62s cubic-bezier(.16,1,.3,1) forwards} @keyframes fxin{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .fx{animation:none;opacity:1;transform:none} .wiz-bar i,.wiz-ghost i{transition:none} } /* ---- account ---- */ .hd-right{display:flex;align-items:center;gap:12px;white-space:nowrap} .acct{font-size:15px;font-weight:600;color:var(--mute);text-decoration:none;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acct:hover{color:var(--ink)} .acct-box{background:var(--card);border:1px solid var(--line);border-radius:0;padding:28px 30px} .acct-box h3{font-family:'Prata',Georgia,'Times New Roman',serif;font-weight:400;font-size:26px;margin-bottom:8px;letter-spacing:0} .acct-box .sub{font-size:15.5px;margin-bottom:20px} .acct-box form{display:flex;gap:10px;flex-wrap:wrap} .acct-box input[type=email]{flex:1;min-width:240px;border:1px solid var(--line);background:var(--surface);border-radius:0;padding:12px 18px;font:inherit;font-size:15px;color:var(--ink)} .acct-box input[type=email]:focus{outline:none;border-color:var(--ink)} .save-strip{grid-column:1/-1;padding-top:8px} /* ---- glossary ---- */ .gloss-nav{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 8px} .gloss-nav a{text-decoration:none;border:1px solid var(--line);background:var(--card);border-radius:0;padding:8px 16px;font-size:15px;font-weight:600;display:inline-flex;gap:7px;align-items:center} .gloss-nav a:hover{border-color:var(--ink)} .gloss-nav a span{font-variant-numeric:tabular-nums;font-size:13px;color:var(--mute);font-weight:400} .gloss-group{margin-top:44px} .gloss-term{display:grid;grid-template-columns:1.8fr 1fr;gap:44px;align-items:start;margin-top:8px} .gloss-lead{font-size:20px;line-height:1.55;color:var(--ink);max-width:60ch;margin-top:20px;padding-left:16px;border-left:3px solid var(--forest)} .gloss-rail{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:22px;position:sticky;top:24px} .gloss-rail h4{font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--mute);margin-bottom:12px;font-weight:500} .gloss-rail ul{list-style:none;margin:0} .gloss-rail li{border-top:1px solid var(--line)} .gloss-rail li a{display:block;padding:9px 0;font-size:15px;text-decoration:none;font-weight:500} .gloss-rail li a:hover{color:var(--forest)} .gloss-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} .gloss-cta b{display:block;font-family:'Prata',Georgia,'Times New Roman',serif;font-weight:400;font-size:21px;margin-bottom:7px;letter-spacing:0} .gloss-cta p{font-size:14.5px;color:var(--mute);line-height:1.5;margin-bottom:14px} @media(max-width:980px){ .gloss-term{grid-template-columns:1fr;gap:28px} .gloss-rail{position:static} .kpi{grid-template-columns:repeat(2,1fr);gap:26px 22px} .charts{grid-template-columns:1fr;gap:38px} .donut{gap:22px} .donut-legend{min-width:0;flex-basis:100%} .res-grid{grid-template-columns:1fr} .crow{grid-template-columns:1fr auto;gap:8px} .crow-c{display:none} } .money[data-converted]{cursor:help} .cur-note{font-size:13.5px;color:var(--mute);margin-top:8px} @media(max-width:1200px){.acct{display:none}} .prose a,.sub a,.fineprint a,.chart-c a,.hub-rail a,.crumbs a, .f-col li a,.f-legal nav a,.section-head .more,.gloss-rail li a, .dl .dl-l,.row .l strong,.callout a,.f-note a{ text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; text-decoration-color:rgba(13,13,13,.45);text-decoration-skip-ink:auto} .prose a:hover,.sub a:hover,.fineprint a:hover,.chart-c a:hover, .hub-rail a:hover,.crumbs a:hover,.f-col li a:hover,.f-legal nav a:hover, .section-head .more:hover,.gloss-rail li a:hover,a.dl:hover .dl-l, .callout a:hover,.f-note a:hover{text-decoration-color:currentColor} .hub .crumbs a{text-decoration-color:rgba(255,255,255,.45)} .hub .crumbs a:hover{text-decoration-color:#fff} *,*::before,*::after{font-weight:400 !important} .stat-v,.tbl td.b,.crow-b,.crow-c,.dl-n,.dl-v,.r-n,.donut-c,.fit-score, .cutoff .d,.money,.fact .v{font-variant-numeric:tabular-nums} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}