/* Tools, rebuilt in the careers page's contour style (founder 2026-10-06): the same hero with its
   contour lines, the same framed board with a rail on the left, and each calculator as plain rows on
   the board. tools.js is unchanged; its tabs are the rail. */
.company-tools .tools.co-board:not(#\#):not(#\#){border-radius:0!important;background:none}
.company-tools .tools::before{content:none}
/* the rail: careers' filter rows, with a second line in place of the count */
.company-tools .co-filter .tools-tab:not(#\#):not(#\#){border-radius:0!important;display:block;width:100%;text-align:left;font:500 1rem/1.3 'DM Sans',sans-serif;color:var(--muted);cursor:pointer}
.company-tools .co-filter .tools-tab span{display:grid;gap:.25rem}
.company-tools .co-filter .tools-tab small{font:400 .8125rem/1.3 'DM Sans',sans-serif;color:var(--muted);opacity:.8}
.company-tools .co-filter .tools-tab:hover{color:var(--ink)}
.company-tools .co-filter .tools-tab[aria-selected="true"]{color:var(--ink);background:rgb(143 179 203 / .05);box-shadow:inset 2px 0 0 #8fb3cb}
.company-tools .co-filter .tools-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
/* a calculator: what you enter on the left, the answer and its working on the right */
.company-tools .tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(var(--cell) * 5)}
.company-tools .tool[hidden]{display:none}
.company-tools .tool-form{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:1.25rem 1rem;padding:var(--cell) var(--pad);border-right:1px solid var(--line)}
.company-tools .tool-f{display:grid;gap:.5rem;min-width:0;margin:0;padding:0;border:0}
.company-tools .tool-f.full{grid-column:1 / -1}
.company-tools .tool-f label,.company-tools .tool-f legend{padding:0;font:500 .8125rem/1.2 'DM Sans',sans-serif;color:var(--muted)}
.company-tools .tool-f input[type=number],.company-tools .tool-f select{width:100%;height:3rem;padding:0 1rem;border:0;font:500 1rem/1 'DM Sans',sans-serif;color:var(--ink);
  background:rgb(255 255 255 / .05);box-shadow:inset 0 1px 0 rgb(255 255 255 / .06);-webkit-appearance:none;appearance:none;font-variant-numeric:tabular-nums}
.company-tools .tool-f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238fb3cb' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:.75rem;padding-right:2.5rem}
.company-tools .tool-f input:focus-visible,.company-tools .tool-f select:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
/* a two- or three-way choice: a capsule with the chosen part filled */
.company-tools .seg{display:flex;padding:.25rem;gap:.25rem;background:rgb(255 255 255 / .05)}
.company-tools .seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.company-tools .seg label{flex:1;display:grid;place-items:center;height:2.5rem;padding:0 .75rem;border-radius:999px;cursor:pointer;font:500 .875rem/1 'DM Sans',sans-serif;color:var(--muted);transition:background-color .2s ease,color .2s ease}
.company-tools .seg input:checked+label{background:#eef3f6;color:#0e1114}
.company-tools .seg input:focus-visible+label{outline:2px solid var(--cyan);outline-offset:2px}
/* the answer */
.company-tools .tool-out:not(#\#):not(#\#){border-radius:0!important;padding:var(--cell) var(--pad);background:none}
.company-tools .tool-out .k{display:block;font:500 .8125rem/1.2 'DM Sans',sans-serif;color:var(--muted)}
.company-tools .tool-out .big{display:flex;align-items:baseline;gap:.5rem;margin:.75rem 0 1.5rem;font:500 clamp(2.75rem,5cqw,4.5rem)/1 'Orbitron',sans-serif;letter-spacing:-.03em;color:var(--ink)}
.company-tools .tool-out .big small{font:500 1rem/1 'DM Sans',sans-serif;letter-spacing:0;color:var(--muted)}
.company-tools .tool-rows{border-top:1px solid var(--line)}
.company-tools .tool-rows>*{display:flex;justify-content:space-between;gap:1rem;padding:.875rem 0;border-bottom:1px solid var(--line);font:400 .9375rem/1.3 'DM Sans',sans-serif;color:var(--body)}
.company-tools .tool-rows>* :last-child{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.company-tools .tool-note{margin-top:1.25rem;font-size:.8125rem;line-height:1.55;color:var(--muted);max-width:32rem}
@media(max-width:820px){
  .company-tools .co-board{grid-template-columns:1fr}
  .company-tools .co-side{border-right:0;border-bottom:1px solid var(--line)}
  .company-tools .co-filter{position:static;display:flex;flex-wrap:nowrap;padding:0;overflow-x:auto;scrollbar-width:none}
  .company-tools .co-filter::-webkit-scrollbar{display:none}
  .company-tools .co-filter .tools-tab:not(#\#):not(#\#){flex:1 0 auto;width:auto;border-top:0!important;border-bottom:0!important;padding:1rem 1.125rem}
  .company-tools .co-filter .tools-tab small{display:none}
  .company-tools .co-filter .tools-tab[aria-selected="true"]{box-shadow:inset 0 -2px 0 #8fb3cb}
  .company-tools .tool{grid-template-columns:1fr;min-height:0}
  .company-tools .tool-form{border-right:0;border-bottom:1px solid var(--line);padding:1.5rem 1.25rem}
  .company-tools .tool-out:not(#\#):not(#\#){padding:1.5rem 1.25rem 2rem}
}
/* inbox 155: Tools in the same lighter, Vercel-like weight as Careers: its own contour shape (two
   summits), a smaller headline and intro, plainer rail rows */
.company-tools .co-hero{min-height:calc(var(--cell) * 5)}
.company-tools .co-hero h1{font-size:clamp(2rem,3.6cqw,3rem)!important;margin-bottom:.875rem}
.company-tools .co-intro{font-size:clamp(1rem,1.4vw,1.125rem);color:var(--body);max-width:34rem}
.company-tools .co-sub{font-size:.9375rem}
.company-tools .co-filter .tools-tab:not(#\#):not(#\#){padding-top:1.125rem;padding-bottom:1.125rem}
.company-tools .co-filter .tools-tab small{font-size:.75rem}
.company-tools .tool-out .big{font-size:clamp(2.25rem,4cqw,3.5rem)}
/* the two summits fade out before the hero's edges (no line is cut by the frame); the cursor light
   stays inside the same fade */
.company-tools .co-topo:not(.co-topo-lit){-webkit-mask-image:radial-gradient(closest-side at 64% 46%,#000 55%,rgb(0 0 0 / .45) 78%,transparent 100%)!important;mask-image:radial-gradient(closest-side at 64% 46%,#000 55%,rgb(0 0 0 / .45) 78%,transparent 100%)!important}
.company-tools .co-topo-lit{-webkit-mask-image:radial-gradient(15rem circle at var(--mx,-999px) var(--my,-999px),#000,rgb(0 0 0 / .35) 45%,transparent 72%),radial-gradient(closest-side at 64% 46%,#000 55%,rgb(0 0 0 / .45) 78%,transparent 100%)!important;-webkit-mask-composite:source-in!important;
  mask-image:radial-gradient(15rem circle at var(--mx,-999px) var(--my,-999px),#000,rgb(0 0 0 / .35) 45%,transparent 72%),radial-gradient(closest-side at 64% 46%,#000 55%,rgb(0 0 0 / .45) 78%,transparent 100%)!important;mask-composite:intersect!important}
