.ou-percentage-page{padding:20px 0 44px}.ou-percentage-page__hero{width:min(100%,860px);margin:0 auto;text-align:center}.ou-percentage-page__eyebrow{margin:0 0 10px;color:var(--brand-2);font-size:.92rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.ou-percentage-page__lead{margin:0 auto;max-width:760px;color:var(--muted);font-size:1.04rem;line-height:1.55}.ou-percentage{margin-top:18px;display:grid;gap:14px}@media(min-width:980px){.ou-percentage{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);align-items:start}}.ou-percentage__panel,.ou-percentage__catalog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.ou-percentage__panel{padding:18px}.ou-percentage__panel--result{background:radial-gradient(circle at top right,rgba(37,99,235,.1),transparent 38%),linear-gradient(180deg,#fff,#f7faff)}.ou-percentage__form{display:flex;flex-direction:column;gap:14px}.ou-percentage__grid{display:grid;gap:12px}@media(min-width:700px){.ou-percentage__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.ou-percentage__field{display:flex;flex-direction:column;gap:8px}.ou-percentage__label{font-size:.96rem;font-weight:700;line-height:1.35}.ou-percentage__select-wrap{position:relative}.ou-percentage__native-select{display:none}.ou-percentage__select,.ou-percentage__input{width:100%;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);color:var(--text);font:inherit;line-height:1.35;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.ou-percentage__select{appearance:none;display:block;min-height:56px;position:relative;padding:14px 48px 14px 14px;cursor:pointer;text-align:left}.ou-percentage__select:after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-65%) rotate(45deg);transition:transform .18s ease;pointer-events:none}.ou-percentage__select-wrap.is-open .ou-percentage__select:after{transform:translateY(-30%) rotate(225deg)}.ou-percentage__select-text{display:block;white-space:normal;word-break:break-word}.ou-percentage__dropdown{position:absolute;z-index:30;top:calc(100% + 8px);left:0;right:0;padding:8px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 18px 38px #0b122024;max-height:min(54svh,380px);overflow:auto}.ou-percentage__option-list{display:grid;gap:8px}.ou-percentage__option{appearance:none;width:100%;text-align:left;border:1px solid rgba(11,18,32,.08);border-radius:12px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.96rem;font-weight:650;line-height:1.45;padding:12px 14px;cursor:pointer;white-space:normal;word-break:break-word;transition:border-color .18s ease,background-color .18s ease,transform .08s ease}.ou-percentage__option:hover{border-color:#2563eb47;background:#fff}.ou-percentage__option:active{transform:translateY(1px)}.ou-percentage__option:focus-visible{outline:3px solid rgba(37,99,235,.18);outline-offset:2px}.ou-percentage__option.is-active{border-color:#2563eb47;background:#2563eb14}.ou-percentage__input{min-height:56px;padding:14px}.ou-percentage__select:hover,.ou-percentage__input:hover{border-color:#2563eb47}.ou-percentage__select:focus,.ou-percentage__input:focus{outline:none;border-color:#2563eb61;box-shadow:0 0 0 4px #2563eb24;background-color:#fff}.ou-percentage__hint{margin:-2px 0 0;color:var(--muted);font-size:.96rem;line-height:1.45}.ou-percentage__actions{display:flex;flex-wrap:wrap;gap:10px}.ou-percentage__ghost{appearance:none;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.98rem;font-weight:650;line-height:1.2;padding:12px 14px;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .08s ease}.ou-percentage__ghost:hover{border-color:#2563eb47;background:#fff}.ou-percentage__ghost:active{transform:translateY(1px)}.ou-percentage__ghost:focus-visible{outline:3px solid rgba(37,99,235,.18);outline-offset:2px}.ou-percentage__status{margin:0;color:var(--muted);font-size:.96rem;line-height:1.4}.ou-percentage__result-value{margin-top:8px;min-height:1.2em;color:var(--text);font-size:clamp(2.5rem,6.5vw,4.4rem);font-weight:800;line-height:1.05;word-break:break-word}.ou-percentage__result-value.is-error{color:#b42318}.ou-percentage__mode-description{margin:12px 0 0;color:var(--text);font-size:1rem;line-height:1.5}.ou-percentage__details{margin:16px 0 0;display:grid;gap:10px}.ou-percentage__detail{margin:0;padding:12px 14px;border:1px solid rgba(11,18,32,.08);border-radius:14px;background:#ffffffd1}.ou-percentage__detail dt{margin:0 0 4px;color:var(--muted);font-size:.86rem;font-weight:700;line-height:1.35;text-transform:uppercase;letter-spacing:.04em}.ou-percentage__detail-term--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}.ou-percentage__detail dd{margin:0;color:var(--text);font-size:.98rem;line-height:1.5;word-break:break-word}.ou-percentage__catalog{margin-top:14px}.ou-percentage__catalog-card{padding:18px}.ou-percentage__catalog-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px}.ou-percentage__catalog-title{margin:0;font-size:1.3rem;line-height:1.2}.ou-percentage__catalog-lead{margin:0;color:var(--muted);font-size:.98rem;line-height:1.4}.ou-percentage__mode-list{margin-top:14px;display:grid;gap:12px}@media(min-width:760px){.ou-percentage__mode-list{grid-template-columns:repeat(2,minmax(0,1fr))}}.ou-percentage__mode-button{appearance:none;width:100%;text-align:left;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.98rem;font-weight:650;line-height:1.45;padding:12px 14px;white-space:normal;word-break:break-word;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .08s ease}.ou-percentage__mode-button:hover{border-color:#2563eb47;background:#fff}.ou-percentage__mode-button:active{transform:translateY(1px)}.ou-percentage__mode-button:focus-visible{outline:3px solid rgba(37,99,235,.18);outline-offset:2px}.ou-percentage__mode-button.is-active{border-color:#2563eb4d;background:#2563eb1a;color:var(--brand-2)}@media(max-width:600px){.ou-percentage-page{padding-top:16px}.ou-percentage-page__lead{font-size:.98rem}.ou-percentage__panel,.ou-percentage__catalog-card{padding:14px}.ou-percentage__result-value{font-size:clamp(3rem,12vw,4.6rem);line-height:1}.ou-percentage__select,.ou-percentage__input{min-height:52px}.ou-percentage__select{font-size:.94rem;padding-right:42px}.ou-percentage__dropdown{max-height:min(52svh,320px)}.ou-percentage__option{font-size:.92rem;padding:11px 12px}.ou-percentage__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ou-percentage__actions>*{width:100%}}