/*
 * Halo (docs/multisite.md §Темы): a light, round rating site — white pages
 * with pale-blue panels, white cards with 20px corners, the averages in
 * orange rings next to orange stars, orange pill buttons, blue figures and
 * rating bars, a navy footer, Montserrat.
 *
 * Loaded after every base stylesheet (CssManifest appends it). The token
 * block re-skins what tokens reach; the rules after it lay out what the
 * theme changes: the header, the theme's own home page
 * (resources/themes/halo/views/pages/home), the company rows as cards, the
 * catalog and company pages, the footer and the 404.
 *
 * Montserrat is self-hosted next to this file (SIL OFL, licence included),
 * variable, split per script with unicode-range so a uk/ru page fetches the
 * Latin and Cyrillic cuts only. The faces are declared up to weight 600, the
 * heaviest the theme uses: the base sets its headings at 700–800, which in
 * Montserrat turn black and heavy, and a browser clamps a weight to the
 * face's range — so they come out semibold, like the rest.
 */

/* ------------------------------------------------------------- typefaces */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 600;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-cyrillic-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 600;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-cyrillic-wght-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 600;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 600;
    font-display: swap;
    src: url('../fonts/montserrat/montserrat-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */

:root {
    --color-text: #111318;
    --color-text-alt: #4B5260;
    --color-text-secondary: #FFF;
    --color-text-link: #6B7280;
    --color-text-third: #2F72C4;

    --color-bg: #FFFFFF;
    --color-bg-alt: #FFF;
    --color-bg-secondary: #FB8C26;
    --color-bg-third: #F2F6FD;
    --color-bg-drive: #DBE7FD;
    --color-bg-effect: #F2F6FD;
    --color-bg-fourth: #3A81D0;
    --color-bg-fifth: #2E394D;
    --color-bg-sixth: #45526B;
    --color-bg-empty: #F2F6FD;

    --color-border: #E3E9F2;
    --color-border-secondary: #CFE0FA;
    --color-border-alt: #FFF;

    --color-btn: #E2700C;

    --progress-primary: #367FD3;
    --progress-bg: #EDEDED;

    --color-icon-star: #FB8C26;
    --color-icon-primary: #699BF7;

    --color-star-empty: #DDDDDD;
    --skeleton-bg: #EEF2F8;

    --font-sans: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --radius-xs: 5px;
    --radius-sm: 10px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-xl: 20px;
    --radius-2xl: 20px;
    --radius-3xl: 30px;
    --radius-pill: 999px;

    --shadow-card: 0 4px 16px rgba(58, 129, 208, 0.12);
    --shadow-popover: 0 8px 24px rgba(46, 57, 77, 0.10);
    --shadow-overlay: 0 12px 32px 0 rgba(46, 57, 77, 0.12);

    /* No page glow: the pages are white, the panels pale blue. */
    --glow-rgb: 255, 255, 255;

    /* Halo's own. Orange marks a rating (rings, stars); buttons carry white
       text, so theirs is a shade deeper (3:1 against white), and orange text
       deeper still. */
    --halo-orange: #FB8C26;
    --halo-action: #E2700C;
    --halo-action-hover: #CC620A;
    --halo-orange-text: #D2600A;
    --halo-blue: #3A81D0;
    --halo-bar: #367FD3;
    --halo-figure: #1C82DB;
    --halo-ink: #0C537F;
    --halo-violet: #474EFF;
    --halo-violet-hover: #0008E4;
    --halo-sky: #F2F6FD;
    --halo-sky-soft: #F7FAFE;
    --halo-line: #DBE7FD;
    --halo-frame: #A8D0FF;
    --halo-bubble: #4C7EB6;
    --halo-icon: #699BF7;
    --halo-navy: #2E394D;
    --halo-ring-empty: #DBDBDB;
}

/* ------------------------------------------------------------- the page */

body::before {
    display: none;
}
.container,
.full-container {
    max-width: calc(1296px + 40px);
}
h1, h2, h3,
.title {
    color: var(--color-text);
}

/* Section titles: centred, semibold, sentence case. */
section#rating .title,
#home-about_us .title,
#how_is_work .title,
#home-reviews .title,
#rate_info .wrap-title .title,
#partnership .box .title,
#company-detail .left .title,
#company-reviews .title {
    max-width: none;
    margin: 0 0 40px;
    padding: 0;
    color: var(--color-text);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    overflow-wrap: anywhere;
}

/* Section badges: plain small caps in the theme's blue, no plate. */
.topic {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--color-text-third);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- buttons */

/* Orange pills with white text — the reference action everywhere. */
.btn,
#how_is_work .button,
#home-info .right .make_review,
#partnership .box .start_cooperation,
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .btn,
#create-review-preview .box .left .panel .create_review,
#cooperation-statement-preview .box .left .btn,
#not-found .btn,
#auth .auth-main .btn,
#claim-invite .btn {
    border-radius: 30px;
    background: var(--halo-action);
    color: #FFF;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.btn:not(:disabled):hover,
#how_is_work .button:hover,
#home-info .right .make_review:hover,
#partnership .box .start_cooperation:hover,
#not-found .btn:hover {
    background: var(--halo-action-hover);
}

/* --------------------------------------------------------------- header */

header.halo-header {
    position: relative;
    z-index: 5;
    background: #FFF;
}
/* The home hero's base rules make its containers flex rows. */
#home-preview header.halo-header .full-container {
    display: block;
}
header.halo-header .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 0;
}
header.halo-header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 24px;
    text-decoration: none;
    flex-shrink: 0;
}
header.halo-header .logo img {
    width: 52px;
    height: 52px;
}
.halo-header .wordmark,
.halo-footer .wordmark {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.halo-header .wordmark .name,
.halo-footer .wordmark .name {
    color: var(--color-text);
    font-size: 24px;
    font-weight: 600;
    line-height: 29px;
    white-space: nowrap;
}
.halo-header .wordmark .tagline,
.halo-footer .wordmark .tagline {
    max-width: 175px;
    margin-top: 3px;
    color: var(--color-text);
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
}
header.halo-header .menu {
    margin: 0 0 0 auto;
    padding: 0;
}
header.halo-header .menu .item {
    margin-right: 6px;
}
header.halo-header .menu .item > a {
    display: inline-flex;
    padding: 8px 10px;
    white-space: nowrap;
    color: var(--color-text);
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
    transition: color 0.2s ease;
}
header.halo-header .menu .item > a:hover {
    color: var(--halo-bubble);
}
header.halo-header .menu .item.active a {
    border: 0;
    background: none;
    color: var(--halo-blue);
}
header.halo-header .menu .mobile-button {
    color: var(--halo-blue);
}
header.halo-header .panel {
    margin-left: 24px;
}
header.halo-header .panel .auth {
    margin-right: 28px;
}
header.halo-header .panel .auth .reg {
    padding: 8px 12px;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
}
header.halo-header .panel .auth .reg:hover {
    color: var(--halo-bubble);
}
header.halo-header .panel .auth .login {
    padding: 10px 22px;
    border-radius: 30px;
    background: var(--halo-action);
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
header.halo-header .panel .auth .login:hover {
    background: var(--halo-action-hover);
}
header.halo-header .locale .lang,
header.halo-header .locale .lang::after {
    color: var(--color-text);
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
}
header.halo-header .locale .lang::after {
    padding: 0 5px;
}
header.halo-header .locale .lang.active {
    color: var(--halo-orange-text);
}

/* ----------------------------------------------------------- home: hero */

#home-preview {
    padding-bottom: 0;
    overflow: hidden;
}
#home-preview header {
    margin-bottom: 0;
}
#home-preview .hero {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 432px;
    column-gap: 48px;
    align-items: start;
    padding-top: 85px;
    padding-bottom: 120px;
}
/* The theme's doodles round the text: a mortarboard, a paper plane, a bulb,
   a pencil, a set square, a book. */
#home-preview .hero::before {
    content: "";
    position: absolute;
    inset: 0 20px;
    z-index: -1;
    background: url('../img/doodles.svg') center top / 1296px auto no-repeat;
    pointer-events: none;
}
#home-preview .intro {
    max-width: 755px;
    padding-top: 60px;
}
#home-preview .hero-title {
    color: var(--color-text);
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
}
#home-preview .hero-text {
    max-width: 620px;
    margin-top: 12px;
    color: var(--color-text);
    font-size: 20px;
    line-height: 30px;
}

/* The search: a pale-blue pill with the orange button inside it — the home
   hero's and the catalog hero's. */
#home-preview .search-form,
#catalog-preview .left .search-form {
    position: relative;
    display: block;
    width: 100%;
    max-width: 565px;
    margin: 40px 0 0;
}
#home-preview .search-form .form-control,
#catalog-preview .left .search-form input {
    width: 100%;
    height: 72px;
    margin: 0;
    padding: 0 200px 0 25px;
    border: 0;
    border-radius: 40px;
    background: var(--halo-sky);
    color: var(--color-text);
    font-size: 20px;
    line-height: 30px;
}
#home-preview .search-form .form-control::placeholder,
#catalog-preview .left .search-form input::placeholder {
    color: #A3AAB5;
}
#home-preview .search-form .form-control:focus,
#catalog-preview .left .search-form input:focus {
    box-shadow: 0 0 0 2px var(--halo-frame);
}
#home-preview .search-form .btn,
#catalog-preview .left .search-form .btn {
    position: absolute;
    top: 11px;
    right: 25px;
    bottom: 11px;
    transform: none;
    height: auto;
    padding: 0 50px;
    border-radius: 30px;
    background: var(--halo-action);
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    opacity: 1;
}
#home-preview .search-form .btn .icon {
    display: none;
    font-size: 22px;
}
#home-preview .search-form .btn:disabled,
#catalog-preview .left .search-form .btn:disabled {
    opacity: 1;
    cursor: default;
}

/* Two of the latest reviews as speech bubbles, the second one set off to the
   right, then the three figures on a pale-blue plate. */
#home-preview .aside {
    padding-top: 20px;
}
#home-preview .bubble {
    display: block;
    max-width: 355px;
    margin-bottom: 20px;
    padding: 10px 15px 22px;
    border: 1px solid var(--halo-bubble);
    border-radius: 30px;
    background: #FFF;
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow 0.2s ease;
}
#home-preview .bubble:nth-of-type(2) {
    margin-left: auto;
}
#home-preview .bubble:hover {
    box-shadow: var(--shadow-card);
}
#home-preview .bubble-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
#home-preview .bubble .author {
    color: var(--halo-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}
#home-preview .bubble .company {
    display: block;
    margin: 5px 0;
    color: var(--halo-violet);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
#home-preview .bubble .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 42px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}
#home-preview .bubble .star-rating__stars,
#home-preview .bubble .star-rating__star::before,
#home-preview .bubble .star-rating__star--half::after {
    font-size: 13px;
}
#home-preview .bubble .star-rating__star--half::after {
    top: 0;
}
#home-preview .bubble .star-rating__star {
    margin-right: 2px;
}

/* A reviewer's initial in a small disc: green for a good mark, violet for a
   poorer one, grey when the review carries none. */
#home-preview .avatar,
#home-reviews .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #B3BCCB;
    color: #FFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
#home-preview .avatar {
    background: #9B8CF8;
}
#home-reviews .avatar--high {
    background: #5BB548;
}
#home-reviews .avatar--low {
    background: #A58BF0;
}

#home-preview .stats {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 30px 0 0;
    padding: 15px 27px;
    list-style: none;
    border-radius: 30px;
    background: var(--halo-sky);
}
#home-preview .stats .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#home-preview .stats .value {
    color: var(--halo-blue);
    font-size: 32px;
    font-weight: 600;
    line-height: 48px;
}
#home-preview .stats .label {
    max-width: 120px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 21px;
}

/* ------------------------------------------------------ the rating panel */

section#rating {
    padding: 100px 0;
    background: var(--halo-sky);
    overflow: visible;
}
section#rating .list-rate {
    padding-top: 0;
}

/* Two tabs over the panel — the rating, how it is counted — on a hairline;
   the open one is bold between two upright hairlines. */
#rating .tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--halo-line);
}
#rating .tab {
    margin-bottom: -1px;
    padding: 12px 32px;
    border: 1px solid transparent;
    color: var(--color-text);
    font-size: 20px;
    line-height: 30px;
    text-decoration: none;
}
#rating .tab:first-child {
    padding-left: 0;
    border-left: 0;
}
#rating .tab:hover {
    color: var(--halo-bubble);
}
#rating .tab-rating {
    border-right-color: var(--halo-line);
    font-weight: 600;
}
#rating .empty {
    padding: 30px 0;
    color: var(--color-text-alt);
    text-align: center;
}

/* "How it is counted" (#rate_info, the base section) takes the table's place
   while it is the page's :target — from the tab, or from the header's and
   footer's links. Without :has() both stay on the page, one under the
   other. */
@supports selector(:has(*)) {
    #rating #rate_info {
        display: none;
    }
    #rating #rate_info:target {
        display: block;
    }
    #rating:has(#rate_info:target) .pane-rating {
        display: none;
    }
    #rating:has(#rate_info:target) .tab-rating {
        border-right-color: transparent;
        font-weight: 400;
    }
    #rating:has(#rate_info:target) .tab-info {
        border-color: var(--halo-sky) var(--halo-line);
        font-weight: 600;
    }
}
/* The jump lands on the panel with the tabs still in view. */
#rating #rate_info {
    scroll-margin-top: 150px;
}

/* The shared company card (partials/cards/company-card) as a white row card:
   rank, name, the average in a ring, its stars, reviews, the rating bar. The
   column heads (home) use the same grid. */
.list-rate_item,
#rating .table-head {
    display: grid;
    grid-template-columns: 85px minmax(0, 1fr) 56px 210px 160px 240px;
    align-items: center;
    padding: 0 40px 0 60px;
}
#rating .table-head {
    margin-bottom: 20px;
    color: #575757;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}
#rating .table-head .col-average {
    grid-column: 3 / span 2;
}
#rating .table-head .col-reviews {
    grid-column: 5;
}
#rating .table-head .col-rating {
    grid-column: 6;
}
.list-rate_item {
    grid-template-areas: "rank name ring stars comment progress";
    margin-top: 0;
    margin-bottom: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    border: 0;
    border-radius: 20px;
    background: #FFF;
    transition: box-shadow 0.2s ease;
}
.list-rate_item:last-child {
    margin-bottom: 0;
}
.list-rate_item:hover {
    box-shadow: var(--shadow-card);
}
/* The rank: a medal for the first three, a plain figure after them. */
.list-rate_item::before,
.list-rate_item--top::before {
    grid-area: rank;
    content: attr(data-rank);
    display: block;
    width: auto;
    height: auto;
    flex-basis: auto;
    border: 0;
    border-radius: 0;
    background: none;
    color: #9AA3AE;
    font-family: var(--font-sans) !important;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
}
.list-rate_item[data-rank="1"]::before,
.list-rate_item[data-rank="2"]::before,
.list-rate_item[data-rank="3"]::before {
    width: 34px;
    height: 44px;
    padding-top: 19px;
    background: url('../img/medal-1.svg') center / contain no-repeat;
    color: rgba(46, 57, 77, 0.8);
    font-size: 12px;
    font-weight: 600;
    line-height: 19px;
    text-align: center;
}
.list-rate_item[data-rank="2"]::before {
    background-image: url('../img/medal-2.svg');
}
.list-rate_item[data-rank="3"]::before {
    background-image: url('../img/medal-3.svg');
}
.list-rate_item .name {
    grid-area: name;
    padding: 0 20px 0 0;
    margin: 0;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    text-decoration: none;
}
.list-rate_item:hover .name {
    color: var(--halo-bubble);
}
/* The average and its stars become cells of the row's own grid. */
.list-rate_item .rate,
.list-rate_item .rate .star-rating {
    display: contents;
}
.list-rate_item .star-rating__value {
    grid-area: ring;
}
.list-rate_item .star-rating__stars {
    grid-area: stars;
    margin-left: 10px;
}
.list-rate_item .star-rating__star {
    margin-right: 4px;
}
.list-rate_item .star-rating__stars,
.list-rate_item .star-rating__star::before,
.list-rate_item .star-rating__star--half::after {
    font-size: 17px;
}
.list-rate_item .star-rating__star--half::after {
    top: 0;
}
.list-rate_item .comment {
    grid-area: comment;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
}
.list-rate_item .comment .icon {
    margin: 0;
    color: var(--color-text);
    font-family: 'heroicons-outline' !important;
    font-size: 26px;
}
.list-rate_item .progress {
    grid-area: progress;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
}
.list-rate_item .progress .progress-bar {
    flex: 0 1 192px;
    width: auto;
}
.list-rate_item .progress-bar__track {
    height: 15px;
    border-radius: 10px;
    background: var(--progress-bg);
}
.list-rate_item .progress-bar__fill {
    border-radius: 10px;
    background: var(--halo-bar);
}
/* Calm bars: no shimmer running over them. */
.list-rate_item .progress-bar__fill--animated::after {
    display: none;
}
.list-rate_item .progress .value {
    min-width: 0;
    margin: 0;
    color: var(--halo-bar);
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    text-align: left;
}
/* The card's "go to the company" link becomes the row itself: invisible,
   stretched over it, still the one focusable anchor. */
.list-rate_item .link {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    border-radius: 20px;
    font-size: 0;
    color: transparent;
}
.list-rate_item .link::before,
.list-rate_item .link::after,
.list-rate_item .link > span {
    display: none;
}
.list-rate_item .link:focus-visible {
    outline: 2px solid var(--halo-blue);
    outline-offset: 2px;
}

/* The ring: an average set in an orange arc over a grey one, a full circle
   being 5 of 5 (--p, in per cent — set per mark at the end of this file for
   the cards, inline for the home page's reviews). */
.list-rate_item .star-rating__value,
#company-reviews .review-card .star-rating__value,
#home-reviews .ring {
    grid-area: ring;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}
.list-rate_item .star-rating__value::before,
#company-reviews .review-card .star-rating__value::before,
#home-reviews .ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--halo-orange) calc(var(--p, 100) * 1%), var(--halo-ring-empty) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
}

#rating .all,
#rating .get_more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    margin: 35px auto 0;
    color: var(--halo-orange-text);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-decoration: none;
}
#rating .all::after {
    content: "\e96b";
    font-family: 'heroicons-outline' !important;
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
}
#rating .all:hover,
#rating .get_more:hover {
    color: var(--halo-action-hover);
}

/* --------------------------------------------- how the rating is counted */

/* A white card: on the home page the second tab of the rating panel, on the
   catalog a pale-blue section of its own under the list. */
#rate_info {
    padding: 0 20px 100px;
    background: var(--halo-sky);
}
#rate_info > .container {
    max-width: 1296px;
    padding: 50px 60px;
    border-radius: 20px;
    background: #FFF;
}
#rating #rate_info {
    padding: 0;
    background: none;
}
#rating #rate_info > .container {
    max-width: none;
}
#rate_info > .container > .topic,
#rating #rate_info .wrap-title .title {
    display: none;
}
#rate_info .wrap-title {
    display: block;
    margin: 0;
}
#rate_info .wrap-title .title {
    margin-bottom: 20px;
    font-size: 30px;
    text-align: left;
}
#rate_info .wrap-title .description {
    padding: 0;
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.6;
}
#rate_info .wrap-steps {
    display: block;
    max-width: none;
    margin: 30px 0 0;
    padding: 0 0 0 30px;
}
#rate_info .wrap-steps .step {
    display: flex;
    align-items: flex-start;
    margin: 0 0 20px;
}
#rate_info .wrap-steps .step:last-child {
    margin-bottom: 0;
}
#rate_info .wrap-steps .step .icon {
    flex: 0 0 46px;
    width: 46px;
    height: auto;
    margin-right: 14px;
    border-radius: 0;
    background: none;
    color: var(--halo-ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
}
#rate_info .wrap-steps .step .inner {
    flex-basis: auto;
    padding: 0;
}
#rate_info .wrap-steps .step .inner .title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 32px;
    text-align: left;
}
#rate_info .wrap-steps .step .inner .description {
    margin-top: 2px;
    color: var(--color-text-alt);
    font-size: 16px;
    line-height: 1.6;
}

/* ------------------------------------------------ home: aims and principles */

#home-about_us {
    padding: 100px 0 76px;
}
#home-about_us .container {
    max-width: calc(1080px + 40px);
}
#home-about_us .principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
#home-about_us .principle {
    padding: 30px;
    border: 1px solid var(--halo-frame);
    border-radius: 20px;
    background: #FFF;
}
#home-about_us .principle-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}
#home-about_us .principle-head .icon {
    color: var(--halo-icon);
    font-size: 52px;
    line-height: 1;
}
#home-about_us .principle-title {
    color: var(--color-text);
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
}
#home-about_us .principle-text {
    color: var(--color-text);
    font-size: 18px;
    line-height: 27px;
}

/* ------------------------------------------------------ home: how it works */

#how_is_work {
    padding: 100px 0;
}
#how_is_work > .container {
    max-width: calc(1296px + 40px);
}
#how_is_work .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#how_is_work .step {
    padding: 30px 24px 32px;
    border-radius: 20px;
    background: var(--halo-sky);
}
#how_is_work .step .num {
    display: block;
    margin-bottom: 104px;
    color: var(--halo-figure);
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
}
#how_is_work .step-title {
    margin-bottom: 8px;
    color: var(--color-text);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}
#how_is_work .step-text {
    color: var(--color-text);
    font-size: 16px;
    line-height: 24px;
}

/* --------------------------------------------- home: the latest reviews */

#home-reviews {
    padding: 0 0 100px;
}
#home-reviews::before {
    display: none;
}
#home-reviews .container {
    max-width: calc(1188px + 40px);
}
#home-reviews .box {
    padding: 100px;
    border-radius: 20px;
    background: var(--halo-sky);
}
#home-reviews .review {
    margin-bottom: 20px;
    padding: 30px 40px;
    border-radius: 20px;
    background: #FFF;
}
#home-reviews .review:last-child {
    margin-bottom: 0;
}
#home-reviews .review .head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "who ring"
        "company ring";
    align-items: center;
    column-gap: 20px;
}
#home-reviews .review .who {
    grid-area: who;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
#home-reviews .review .author {
    margin-right: 2px;
    color: var(--color-text);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
}
#home-reviews .review .company {
    grid-area: company;
    justify-self: start;
    margin-top: 10px;
    color: var(--halo-violet);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    text-decoration: none;
}
#home-reviews .review .company:hover {
    color: var(--halo-violet-hover);
}
#home-reviews .review .text {
    margin-top: 18px;
    color: var(--color-text);
    font-size: 18px;
    line-height: 27px;
    text-align: justify;
    overflow-wrap: break-word;
}
#home-reviews .review .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 12px;
    color: #3F3F3F;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
#home-reviews .review .work-type {
    padding: 2px 12px;
    border-radius: 30px;
    background: var(--halo-sky);
    color: var(--color-text-third);
}
#home-reviews .star-rating__stars,
#home-reviews .star-rating__star::before,
#home-reviews .star-rating__star--half::after {
    font-size: 15px;
}
#home-reviews .star-rating__star--half::after {
    top: 0;
}
#home-reviews .star-rating__star {
    margin-right: 3px;
}

/* ----------------------------------------------------------- partnership */

#partnership {
    padding: 100px 0;
}
#partnership .box {
    padding: 60px;
    border: 0;
    border-radius: 20px;
    background: var(--halo-sky);
}
#partnership .box .topic,
#claim-invite .topic {
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--color-text-third);
}
#partnership .box .title {
    margin: 12px 0 0;
}
#partnership .box .description {
    color: var(--color-text-alt);
}
#partnership .box .list-items .item .icon {
    color: var(--halo-icon);
}
#partnership .box .list-items .item .label {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}
#partnership .box .list-items .drive::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--halo-icon);
}
#partnership .box .start_cooperation {
    padding: 14px 32px;
    font-size: 18px;
}

/* The other pages' heroes: sentence case, the theme's weight. */
#create-review-preview .box .left .title,
#cooperation-statement-preview .box .left .title {
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    text-transform: none;
    overflow-wrap: anywhere;
}
#create-review-form form .company_name {
    overflow-wrap: anywhere;
}

/* The company owners' invitation (partnership page). */
#claim-invite .box {
    border-radius: 20px;
}
#claim-invite .steps .num {
    background-color: var(--halo-sky);
    color: var(--halo-figure);
}

/* -------------------------------------------------------------- catalog */

#catalog-preview {
    overflow: hidden;
}
#catalog-preview .container > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: 60px;
    align-items: center;
    padding: 60px 0 100px;
}
#catalog-preview .left {
    padding: 0;
}
#catalog-preview .left .topic {
    display: none;
}
#catalog-preview .left .title {
    margin: 0;
    color: var(--color-text);
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    text-transform: none;
}
#catalog-preview .left .description {
    margin-top: 16px;
    color: var(--color-text);
    font-size: 18px;
    line-height: 30px;
}
#catalog-preview .left .search-form input {
    padding-right: 230px;
}
#catalog-preview .left .search-form .search-clear {
    right: 200px;
}
#catalog-preview .right .img-wrap {
    border: 0;
    border-radius: 20px;
    background: none;
}
#catalog-preview .right .img-wrap > picture img {
    display: block;
    width: 100%;
    border-radius: 20px;
}
#catalog-preview .right .img-wrap .label-container {
    padding: 14px 22px;
    border: 1px solid var(--halo-bubble);
    border-radius: 30px;
}
#catalog-preview .right .label-container .label-container-inner .label {
    color: var(--halo-blue);
    font-weight: 600;
}

/* The list on the pale-blue panel, its title and the link to the counting. */
section#rating > .container > .topic {
    display: none;
}
section#rating .title.full-title {
    margin-bottom: 16px;
}
section#rating > .container > .prompt {
    margin: 0 auto 40px;
    color: var(--color-text-third);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}

/* --------------------------------------------------------- company page */

#company-preview {
    overflow: visible;
}
#company-preview .inner {
    align-items: center;
    padding: 30px 0 70px;
}
#company-preview .inner .left {
    flex-basis: 600px;
    flex-shrink: 0;
    width: 600px;
}
/* The base sizes the rating column as what its own gallery leaves of the
   row; this gallery is wider, so the column takes the rest instead. */
#company-preview .inner .right {
    flex: 1 1 0;
    min-width: 0;
}
/* The gallery in a browser window: a pale-blue title bar with three dots
   over the picture. */
#company-preview .inner .left .gallery .gallery-swiper {
    height: 390px;
    padding-top: 44px;
    border-radius: 20px;
    background-color: #C8D9ED;
    background-image:
        radial-gradient(circle at 30px 22px, #FFF 6px, transparent 6.5px),
        radial-gradient(circle at 52px 22px, #FFF 6px, transparent 6.5px),
        radial-gradient(circle at 74px 22px, #FFF 6px, transparent 6.5px);
    background-repeat: no-repeat;
}
#company-preview .inner .left .gallery .gallery-swiper img {
    border-radius: 0;
}
#company-preview .inner .left .gallery-swiper-bar .swiper-slide img {
    border-radius: 10px;
}
/* The rating: a pale-blue card, the name and the action on a white plate. */
#company-preview .inner .right .info-box {
    padding: 30px;
    border: 0;
    border-radius: 20px;
    background: var(--halo-sky);
}
#company-preview .inner .right .info-box .inner-info-box {
    margin-top: 14px;
    padding: 30px;
    border-radius: 20px;
    background: #FFF;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .name {
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    overflow-wrap: anywhere;
}
/* The site's rating badge: the trophy inside an orange ring. */
#company-preview .inner .right .info-box .inner-info-box .part-left .rate::before {
    border: 0;
    background: #FFF;
    box-shadow: inset 0 0 0 5px var(--halo-orange);
    color: var(--halo-orange);
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .btn {
    padding: 12px 26px;
    font-size: 16px;
    line-height: 22px;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .amount_reviews {
    color: var(--color-text);
    font-weight: 500;
    white-space: nowrap;
}
#company-preview .inner .right .info-box .drive {
    background-color: var(--halo-line);
}
#company-preview .inner .right .info-box .part-right .rate .mark {
    font-size: 32px;
    font-weight: 600;
}
#company-preview .inner .right .info-box .part-right .list-rate .item-list-rate .label {
    font-weight: 600;
}

#company-detail .left .title {
    margin-bottom: 24px;
    font-size: 40px;
    text-align: left;
}
#company-detail .left .description,
#company-detail .left .description > p {
    color: var(--color-text);
    font-size: 18px;
    line-height: 30px;
    overflow-wrap: break-word;
}
#company-detail .left .description ul {
    padding: 0;
    list-style: none;
}
#company-detail .left .description ul > li {
    position: relative;
    margin-top: 10px;
    padding-left: 28px;
}
#company-detail .left .description ul > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--halo-orange);
}
#company-detail .left .description ol {
    padding: 0;
    list-style: none;
    counter-reset: halo-step;
}
#company-detail .left .description ol > li {
    position: relative;
    margin-top: 14px;
    padding-left: 46px;
    counter-increment: halo-step;
}
#company-detail .left .description ol > li::before {
    content: counter(halo-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--halo-ink);
    font-size: 20px;
    font-weight: 600;
}
#company-detail .right .label {
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
}
#company-detail .right .site a {
    color: var(--color-text-third);
    font-size: 18px;
    overflow-wrap: anywhere;
}
#company-detail .right .site a .icon,
#company-detail .right .contacts-box .item .icon {
    color: #9AA3AE;
}
#company-detail .right .contacts-box .item {
    color: var(--color-text);
    font-size: 18px;
    overflow-wrap: anywhere;
}
#company-detail .right .owner-promo {
    padding: 25px 30px;
    border: 0;
    border-radius: 20px;
    background: var(--halo-sky);
}
#company-detail .right .owner-promo .label {
    font-size: 18px;
    font-weight: 600;
}
#company-detail .right .owner-promo .action + .action {
    border-top-color: var(--halo-line);
}
/* The top five: white cards with a pale-blue edge, medals for the podium. */
#company-detail .right .top-list .topic {
    max-width: none;
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
}
#company-detail .right .top-list .list .item {
    margin-top: 16px;
    padding: 16px 24px;
    border: 1px solid var(--halo-frame);
    border-radius: 20px;
}
#company-detail .right .top-list .list .item a {
    text-decoration: none;
}
#company-detail .right .top-list .list .item .name {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
}
#company-detail .right .top-list .list .item a:hover .name {
    color: var(--halo-bubble);
}
#company-detail .right .top-list .list .item .name::before,
#company-detail .right .top-list .list .item:nth-child(-n+3) .name::before {
    content: counter(rate);
    width: 22px;
    height: auto;
    margin-right: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #9AA3AE;
    font-family: var(--font-sans) !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}
#company-detail .right .top-list .list .item:nth-child(-n+3) .name::before {
    height: 29px;
    padding-top: 13px;
    background: url('../img/medal-1.svg') center / contain no-repeat;
    color: rgba(46, 57, 77, 0.8);
    font-size: 9px;
    line-height: 12px;
}
#company-detail .right .top-list .list .item:nth-child(2) .name::before {
    background-image: url('../img/medal-2.svg');
}
#company-detail .right .top-list .list .item:nth-child(3) .name::before {
    background-image: url('../img/medal-3.svg');
}
#company-detail .right .top-list .list .item .progress-bar__track {
    height: 8px;
    border-radius: 10px;
}
#company-detail .right .top-list .list .item .progress-bar__fill {
    border-radius: 10px;
    background: var(--halo-bar);
}
#company-detail .right .top-list .list .item .progress-bar__fill--animated::after {
    display: none;
}

/* The reviews of a company: one pale-blue panel of white cards — the name
   with the stars, the kind of work, the text, the date; the mark in the
   ring at the right. */
#company-reviews {
    padding: 30px 0 100px;
}
#company-reviews .container {
    max-width: calc(1188px + 40px);
}
#company-reviews .reviews-list {
    padding: 100px;
    border-radius: 20px;
    background: var(--halo-sky);
}
#company-reviews .reviews-list > .topic {
    margin: 0 auto 10px;
}
#company-reviews .title {
    margin-bottom: 30px;
}
/* Five pills are wider than a 360px phone: they wrap, centred, rather than
   push the page sideways — spaced by gaps instead of the base's side
   margins, so a second row lines up with the first. */
#company-reviews .filters .filter-stars {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
}
#company-reviews .filters .filter-stars .filter-stars-item {
    margin: 0;
    padding: 6px 16px;
    border: 1px solid var(--halo-blue);
    border-radius: 30px;
    background: #FFF;
    font-weight: 600;
}
#company-reviews .filters .filter-stars .filter-stars-item.active {
    border-color: var(--halo-blue);
    background: var(--halo-blue);
    color: #FFF;
}
#company-reviews .filters .filter-stars .filter-stars-item.active .icon {
    color: #FFF;
}
#company-reviews .list {
    margin-top: 30px;
}
#company-reviews .list .review-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "name stars ring"
        "type type ring"
        "text text text"
        "photos photos photos"
        "reply reply reply"
        "date date date"
        "bottom bottom bottom";
    align-items: center;
    column-gap: 12px;
    margin: 0 0 20px;
    padding: 30px 40px;
    border: 0;
    border-radius: 20px;
    background: #FFF;
    box-shadow: none;
}
#company-reviews .list .review-card:last-child {
    margin-bottom: 0;
}
#company-reviews .review-card .head,
#company-reviews .review-card .head .rate,
#company-reviews .review-card .head .rate .star-rating {
    display: contents;
}
#company-reviews .review-card .star-rating__stars {
    grid-area: stars;
}
#company-reviews .review-card .star-rating__stars,
#company-reviews .review-card .star-rating__star::before,
#company-reviews .review-card .star-rating__star--half::after {
    font-size: 15px;
}
#company-reviews .review-card .star-rating__star--half::after {
    top: 0;
}
#company-reviews .review-card .star-rating__star {
    margin-right: 3px;
}
#company-reviews .review-card .name {
    grid-area: name;
    margin: 0;
    color: var(--color-text);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
}
#company-reviews .review-card .work-type {
    grid-area: type;
    justify-self: start;
    margin: 8px 0 0;
    padding: 2px 12px;
    border-radius: 30px;
    background: var(--halo-sky);
    color: var(--color-text-third);
    font-size: 14px;
    font-weight: 500;
}
#company-reviews .review-card .text {
    grid-area: text;
    margin-top: 16px;
    color: var(--color-text);
    font-size: 18px;
    line-height: 27px;
}
#company-reviews .review-card .photos {
    grid-area: photos;
}
#company-reviews .review-card .company-reply {
    grid-area: reply;
    border-left-color: var(--halo-blue);
    border-radius: 0 10px 10px 0;
    background: var(--halo-sky);
}
#company-reviews .review-card .head .created_at {
    grid-area: date;
    margin-top: 12px;
    color: #3F3F3F;
    font-size: 14px;
    font-weight: 500;
}
#company-reviews .review-card .bottom_panel {
    grid-area: bottom;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--halo-line);
    font-size: 14px;
}
#company-reviews .review-card .bottom_panel .to_company {
    color: var(--halo-violet);
    font-weight: 600;
    text-decoration: none;
}
#company-reviews .review-card .bottom_panel .to_company:hover {
    color: var(--halo-violet-hover);
}
#company-reviews .get_more {
    display: block;
    width: fit-content;
    margin: 30px auto 0;
    color: var(--halo-orange-text);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

/* Stars are orange everywhere — the base paints some of them in the action
   colour. */
.star-rating__star--full,
.star-rating__star--half::after,
.review-card .head .rate .star-rating__star--full,
.review-card .head .rate .star-rating__star--half::after {
    color: var(--halo-orange);
}
/* …and in the review form's star input. */
.sri-input {
    --sri-star-color: #DDDDDD;
    --sri-star-filled: var(--halo-orange);
    --sri-star-hover: #FDB16B;
}

/* --------------------------------------------------------------- footer */

footer.halo-footer {
    padding: 0;
    background: none;
}
.halo-footer .cta {
    padding: 100px 0;
    background: var(--halo-sky-soft);
}
.halo-footer .cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 864px;
    margin: 0 auto;
}
.halo-footer .cta-text {
    flex: 0 1 576px;
}
.halo-footer .cta-title {
    margin-bottom: 8px;
    color: var(--color-text);
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
}
.halo-footer .cta-lead {
    color: var(--color-text);
    font-size: 18px;
    line-height: 27px;
}
.halo-footer .cta-button {
    display: inline-flex;
    margin-top: 22px;
    padding: 10px 25px;
    border-radius: 30px;
    background: var(--halo-action);
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    transition: background-color 0.2s ease;
}
.halo-footer .cta-button:hover {
    background: var(--halo-action-hover);
}
.halo-footer .cta-picture {
    flex: 0 0 auto;
    width: 220px;
    height: auto;
}
.halo-footer .main {
    padding: 62px 0 36px;
    background: var(--halo-navy);
}
footer.halo-footer .row {
    align-items: flex-start;
}
footer.halo-footer .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 32px;
    flex-shrink: 0;
}
footer.halo-footer .logo img {
    width: 48px;
    height: 48px;
}
.halo-footer .wordmark .name {
    color: #FFF;
}
.halo-footer .wordmark .tagline {
    color: rgba(255, 255, 255, 0.7);
}
footer.halo-footer .row .menu .col {
    padding: 0 0 0 48px;
}
footer.halo-footer .row .menu .col .label {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
}
footer.halo-footer .row .menu .col .item-menu {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    font-weight: 500;
}
footer.halo-footer .row .menu .col .item-menu:hover {
    color: #FFF;
    text-decoration: underline;
}
footer.halo-footer .row .panel {
    gap: 18px;
    align-items: flex-end;
}
footer.halo-footer .row .panel .auth .reg {
    color: #FFF;
}
footer.halo-footer .row .panel .auth .login {
    border-radius: 30px;
    background: var(--halo-action);
    color: #FFF;
    font-weight: 600;
}
footer.halo-footer .row .locale .lang,
footer.halo-footer .row .locale .lang::after,
footer.halo-footer .col-locale .locale .lang,
footer.halo-footer .col-locale .locale .lang::after {
    color: #FFF;
    font-size: 16px;
}
footer.halo-footer .row .locale .lang.active,
footer.halo-footer .col-locale .locale .lang.active {
    color: #FFB46E;
}
footer.halo-footer .bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 24px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
footer.halo-footer .bottom .copyright {
    color: #FFF;
    font-size: 16px;
    line-height: 24px;
}
footer.halo-footer .bottom .domain {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    line-height: 24px;
}

/* ------------------------------------------------------------------ 404 */

#not-found.halo-404 .container {
    padding-top: 0;
    padding-bottom: 0;
}
#not-found.halo-404 .box {
    padding: 60px 0 100px;
    text-align: center;
}
/* "404" with the zero drawn as a rating ring. */
#not-found.halo-404 .code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--halo-blue);
    font-size: 120px;
    font-weight: 600;
    line-height: 1;
}
#not-found.halo-404 .code .zero {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: conic-gradient(var(--halo-orange) 80%, var(--halo-ring-empty) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15.5px));
}
#not-found.halo-404 .title {
    margin-top: 28px;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
}
#not-found.halo-404 .text {
    max-width: 560px;
    margin: 12px auto 0;
    color: var(--color-text-alt);
    font-size: 18px;
    line-height: 1.6;
}
#not-found.halo-404 .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 28px;
    margin-top: 32px;
}
#not-found.halo-404 .btn {
    padding: 12px 32px;
    font-size: 18px;
}
#not-found.halo-404 .catalog-link {
    color: var(--color-text-third);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}

/* The loading rows' bones (lists.js) keep to these cells: the base sizes
   them in pixels for its own row, wider than a phone's cells here. */
#companies-list .list-rate_item.is-skeleton .skeleton-line {
    width: 100%;
    max-width: 130px;
}

/* ------------------------------------------------------------ responsive */

/* The bar loses the tagline and the menu a size before it would run out of
   room — a company's representative gets one more link in it. */
@media (max-width: 1439px) {

    header.halo-header .menu .item > a {
        padding: 8px 10px;
        font-size: 16px;
    }
    .halo-header .wordmark .tagline {
        display: none;
    }
    header.halo-header .panel .auth {
        margin-right: 18px;
    }
    header.halo-header .panel .auth .reg {
        font-size: 15px;
    }
}

@media (max-width: 1399px) {

    .list-rate_item,
    #rating .table-head {
        grid-template-columns: 60px minmax(0, 1fr) 56px 180px 120px 230px;
        padding-left: 40px;
        padding-right: 30px;
    }
    #home-preview .hero {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}

/* The rating card needs some 630px beside the gallery: the gallery gives
   way as the row narrows. */
@media (max-width: 1279px) {

    #company-preview .inner .left {
        flex-basis: 480px;
        width: 480px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .name {
        font-size: 28px;
        line-height: 34px;
    }
}

@media (max-width: calc(1140px + 30px)) {

    /* Down to 1022px the bar still holds a representative's six links. */
    header.halo-header .logo {
        margin-right: 16px;
    }
    header.halo-header .menu .item {
        margin-right: 0;
    }
    header.halo-header .menu .item > a {
        padding: 8px 5px;
        font-size: 14px;
    }
    header.halo-header .panel {
        margin-left: 16px;
    }
    header.halo-header .panel .auth {
        margin-right: 14px;
    }
    header.halo-header .panel .auth .reg {
        padding: 8px;
        font-size: 14px;
    }
    header.halo-header .panel .auth .login {
        padding: 10px 18px;
        font-size: 15px;
    }
    #home-preview .hero::before {
        display: none;
    }
    #home-preview .hero-title {
        font-size: 40px;
        line-height: 50px;
    }
    header.halo-header .locale .lang,
    header.halo-header .locale .lang::after {
        font-size: 16px;
    }
    .list-rate_item,
    #rating .table-head {
        grid-template-columns: 50px minmax(0, 1fr) 56px 140px 100px 190px;
        padding-left: 24px;
        padding-right: 20px;
    }
    #rating .table-head {
        font-size: 17px;
    }
    .list-rate_item .name,
    .list-rate_item .comment,
    .list-rate_item .progress .value {
        font-size: 18px;
    }
    .list-rate_item .star-rating__stars,
    .list-rate_item .star-rating__star::before,
    .list-rate_item .star-rating__star--half::after {
        font-size: 14px;
    }
    footer.halo-footer .row .menu .col {
        padding-left: 30px;
    }
    footer.halo-footer .wordmark .tagline {
        display: none;
    }
    #company-preview .inner .left {
        flex-basis: 320px;
        width: 320px;
    }
    #company-preview .inner .left .gallery .gallery-swiper {
        height: 270px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .name {
        font-size: 26px;
        line-height: 32px;
    }
}

@media (max-width: calc(991px + 30px)) {

    /* The base drops the menu into a dropdown here. */
    header.halo-header .bar {
        padding: 28px 0;
    }
    header.halo-header .menu {
        margin-left: 22px;
    }
    header.halo-header .panel .auth {
        margin-right: 0;
    }
    header.halo-header .menu .menu-box {
        border: 1px solid #E9E9E9;
        border-radius: 10px;
        box-shadow: var(--shadow-popover);
    }
    header.halo-header .menu .item > a {
        padding: 12px 40px 12px 12px;
        font-size: 18px;
    }
    header.halo-header .menu .item.locale-panel .locale {
        border-top-color: #E9E9E9;
    }
    header.halo-header .menu .mobile-button .icon {
        font-size: 30px;
    }

    #home-preview .hero {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 40px;
        padding-bottom: 75px;
    }
    #home-preview .intro {
        max-width: none;
        padding-top: 0;
        margin-bottom: 50px;
    }
    #home-preview .hero-title {
        font-size: 38px;
        line-height: 46px;
    }
    #home-preview .search-form {
        max-width: 100%;
    }
    #home-preview .aside {
        max-width: 560px;
        padding-top: 0;
    }

    section#rating,
    #home-about_us,
    #how_is_work {
        padding: 50px 0;
    }
    #rate_info {
        padding-bottom: 50px;
    }
    section#rating .title,
    #home-about_us .title,
    #how_is_work .title,
    #home-reviews .title,
    #partnership .box .title {
        margin-bottom: 30px;
        font-size: 30px;
    }

    /* A row in three lines, the ring at the right end of all three: the
       rank and the name, the stars and the reviews, the rating bar. */
    #rating .table-head {
        display: none;
    }
    .list-rate_item {
        grid-template-columns: 45px 45px 45px minmax(0, 1fr) 71px;
        grid-template-rows: 40px 35px 25px;
        grid-template-areas:
            "rank name name name ring"
            "stars stars stars comment ring"
            "progress progress progress progress ring";
        padding: 15px 20px;
    }
    .list-rate_item .star-rating__value {
        align-self: start;
        justify-self: end;
    }
    .list-rate_item .star-rating__stars {
        margin-left: 0;
    }
    .list-rate_item .comment {
        display: flex;
        justify-self: start;
    }
    .list-rate_item .comment .icon {
        font-size: 22px;
    }
    /* The base hides a row's rating bar below this width; the card keeps
       it, its figure before it. */
    .list-rate_item .progress {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    .list-rate_item .progress .progress-bar {
        flex: 1 1 auto;
        max-width: 260px;
    }
    .list-rate_item .name {
        white-space: normal;
    }

    #how_is_work .step .num {
        margin-bottom: 60px;
    }
    #home-reviews .box {
        padding: 50px 40px;
    }

    #catalog-preview .container > .row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
        gap: 30px;
        padding: 30px 0 60px;
    }
    #catalog-preview .left .title {
        font-size: 38px;
        line-height: 46px;
    }

    .halo-footer .cta {
        padding: 60px 0;
    }
    footer.halo-footer .row {
        flex-wrap: wrap;
    }

    #company-preview .inner .left {
        flex-basis: 280px;
        width: 280px;
    }
    #company-preview .inner .left .gallery .gallery-swiper {
        height: 230px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .name {
        font-size: 24px;
        line-height: 30px;
    }
    #company-preview .inner .right .info-box {
        padding: 20px;
    }
    #company-preview .inner .right .info-box .inner-info-box {
        padding: 20px;
    }
    #company-detail .left .title {
        font-size: 30px;
    }
    #company-reviews .reviews-list {
        padding: 50px 40px;
    }
    #create-review-preview .box .left .title,
    #cooperation-statement-preview .box .left .title {
        font-size: 36px;
        line-height: 44px;
    }
}

/* Beside a tablet's gallery the card's halves no longer fit side by side:
   the marks go under the name, as the base does on a phone. Under 769px the
   card is under the gallery, full width, and they fit again. */
@media (min-width: 769px) and (max-width: 900px) {

    #company-preview .inner .right .info-box {
        width: 100%;
    }
    #company-preview .inner .right .info-box .inner-info-box {
        flex-direction: column;
        align-items: flex-start;
    }
    #company-preview .inner .right .info-box .drive {
        width: 100%;
        max-width: 120px;
        height: 1px;
        margin: 20px 0;
    }
}

@media (max-width: 768px) {

    #home-about_us .principles {
        grid-template-columns: minmax(0, 1fr);
    }
    #home-about_us .principle-head .icon {
        font-size: 40px;
    }
    #home-about_us .principle-title {
        font-size: 22px;
        line-height: 30px;
    }
    #home-about_us .principle-text {
        font-size: 16px;
        line-height: 24px;
    }

    /* How it works: a strip that scrolls sideways a card at a time, the next
       card peeking in. */
    #how_is_work .steps {
        display: flex;
        gap: 12px;
        margin: 0 -20px;
        padding: 0 20px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 20px;
        scrollbar-width: none;
    }
    #how_is_work .steps::-webkit-scrollbar {
        display: none;
    }
    #how_is_work .step {
        flex: 0 0 86%;
        scroll-snap-align: start;
    }

    #home-reviews .container {
        padding: 0;
    }
    #home-reviews .box {
        padding: 40px 12px;
        border-radius: 0;
    }
    #home-reviews .review {
        padding: 30px 25px;
    }
    #home-reviews .review .text {
        font-size: 15px;
        line-height: 22px;
        text-align: left;
    }

    #catalog-preview .container > .row {
        grid-template-columns: minmax(0, 1fr);
        max-width: 600px;
        margin: 0 auto;
    }
    #rate_info > .container {
        padding: 30px 24px;
    }
    #rate_info .wrap-steps {
        padding-left: 0;
    }

    #company-preview .inner .left {
        flex-basis: auto;
        width: 100%;
    }
    #company-preview .inner .right {
        flex: 0 1 auto;
    }
    #company-preview .inner .left .gallery .gallery-swiper {
        height: 330px;
    }
    #company-reviews .container {
        padding: 0;
    }
    #company-reviews .reviews-list {
        padding: 40px 12px;
        border-radius: 0;
    }
    #company-reviews .list .review-card {
        padding: 30px 25px;
    }
    #company-reviews .review-card .text {
        font-size: 15px;
        line-height: 22px;
    }

    .halo-footer .cta-box {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    .halo-footer .cta-text {
        flex-basis: auto;
    }
    .halo-footer .cta-button {
        display: flex;
        justify-content: center;
    }
    /* The base pulls the phone menu out by the columns' side padding. */
    footer.halo-footer .logo {
        flex-basis: 100%;
        justify-content: center;
        margin: 0 0 30px;
    }
    footer.halo-footer .row .menu {
        order: 2;
        flex-basis: 100%;
        margin: 0;
        padding-top: 0;
    }
    footer.halo-footer .row .menu .col {
        padding: 0 16px 0 0;
    }
    footer.halo-footer .row .panel {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        margin-top: 30px;
    }
    footer.halo-footer .bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 576px) {

    header.halo-header .bar {
        padding: 25px 0;
    }
    header.halo-header .logo img {
        width: 44px;
        height: 44px;
    }
    .halo-header .wordmark .name {
        font-size: 18px;
        line-height: 22px;
    }
    .halo-header .wordmark .tagline,
    header.halo-header .panel .auth .reg {
        display: none;
    }
    header.halo-header .panel .auth .login {
        padding: 8px 16px;
        font-size: 14px;
    }

    #home-preview .hero {
        padding-top: 10px;
        padding-bottom: 50px;
    }
    #home-preview .intro {
        margin-bottom: 32px;
    }
    #home-preview .hero::before {
        display: none;
    }
    #home-preview .hero-title {
        font-size: 24px;
        font-weight: 600;
        line-height: 29px;
    }
    #home-preview .hero-text {
        font-size: 16px;
        line-height: 24px;
    }
    #home-preview .search-form,
    #catalog-preview .left .search-form {
        margin-top: 24px;
    }
    #home-preview .search-form .form-control,
    #catalog-preview .left .search-form input {
        height: 49px;
        padding: 0 84px 0 22px;
        font-size: 14px;
    }
    #home-preview .search-form .btn,
    #catalog-preview .left .search-form .btn {
        top: 0;
        right: 0;
        bottom: 0;
        padding: 0 24px;
        font-size: 16px;
    }
    #catalog-preview .left .search-form input {
        padding-right: 130px;
    }
    #catalog-preview .left .search-form .search-clear {
        right: 110px;
    }
    #home-preview .search-form .btn .label {
        display: none;
    }
    #home-preview .search-form .btn .icon {
        display: block;
    }
    #home-preview .bubble {
        max-width: 275px;
    }
    #home-preview .stats {
        padding: 15px;
    }
    #home-preview .stats .value {
        font-size: 28px;
        line-height: 40px;
    }
    #home-preview .stats .label {
        font-size: 12px;
        line-height: 18px;
    }

    section#rating,
    #home-about_us,
    #how_is_work {
        padding: 35px 0;
    }
    section#rating .title,
    #home-about_us .title,
    #how_is_work .title,
    #home-reviews .title,
    #partnership .box .title {
        margin-bottom: 20px;
        font-size: 22px;
        line-height: 30px;
    }

    /* The tabs turn into two pills, the open one filled. */
    #rating .tabs {
        gap: 15px;
        border: 0;
    }
    #rating .tab,
    #rating .tab:first-child {
        padding: 10px 15px;
        border: 1px solid var(--halo-blue);
        border-radius: 30px;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
    }
    #rating .tab-rating {
        background: var(--halo-blue);
        color: #FFF;
    }
    @supports selector(:has(*)) {
        #rating:has(#rate_info:target) .tab-rating {
            border-color: var(--halo-blue);
            background: none;
            color: var(--color-text);
            font-weight: 600;
        }
        #rating:has(#rate_info:target) .tab-info {
            border-color: var(--halo-blue);
            background: var(--halo-blue);
            color: #FFF;
        }
    }

    .list-rate_item {
        grid-template-columns: 36px 45px 45px minmax(0, 1fr) 60px;
        padding: 15px;
    }
    .list-rate_item::before {
        font-size: 20px;
    }
    .list-rate_item .name {
        font-size: 16px;
        line-height: 20px;
    }
    .list-rate_item .comment,
    .list-rate_item .progress .value {
        font-size: 18px;
    }
    .list-rate_item .star-rating__value {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    #rating .all,
    #rating .get_more {
        font-size: 18px;
    }

    #home-about_us .principle {
        padding: 30px 30px 24px;
    }

    #rate_info {
        padding-left: 12px;
        padding-right: 12px;
    }
    #rate_info .wrap-title .description,
    #rate_info .wrap-steps .step .inner .description {
        font-size: 15px;
    }

    #home-reviews .review .head {
        grid-template-areas:
            "who ring"
            "company ring";
    }
    #home-reviews .review .author {
        font-size: 16px;
    }
    #home-reviews .review .company {
        font-size: 20px;
    }
    #home-reviews .ring {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    #catalog-preview .left .title {
        font-size: 28px;
        line-height: 34px;
    }
    #catalog-preview .left .description {
        font-size: 15px;
        line-height: 24px;
    }

    .halo-footer .cta-title {
        font-size: 24px;
        line-height: 30px;
    }
    .halo-footer .cta-lead {
        font-size: 16px;
        line-height: 24px;
    }
    .halo-footer .cta-button {
        font-size: 16px;
    }
    footer.halo-footer .logo {
        flex-direction: column;
        text-align: center;
    }
    .halo-footer .wordmark .name {
        font-size: 28px;
        line-height: 34px;
        white-space: normal;
    }

    #company-preview .inner .left .gallery .gallery-swiper {
        height: 250px;
        padding-top: 36px;
        background-image:
            radial-gradient(circle at 24px 18px, #FFF 5px, transparent 5.5px),
            radial-gradient(circle at 42px 18px, #FFF 5px, transparent 5.5px),
            radial-gradient(circle at 60px 18px, #FFF 5px, transparent 5.5px);
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .name {
        font-size: 26px;
        line-height: 32px;
    }
    /* The base pins the card's button to the bottom of the box by its
       padding; this box is padded otherwise, so the button stays in the
       flow, under the site's rating. */
    #company-preview .inner .right .info-box .inner-info-box .part-left .panel {
        position: static;
        flex-wrap: wrap;
        gap: 12px 16px;
        margin-top: 18px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .panel .amount_reviews {
        margin-left: 0;
    }
    /* A review's head on a phone: the name, the stars under it, the ring at
       the right of both. */
    #company-reviews .list .review-card {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name ring"
            "stars ring"
            "type type"
            "text text"
            "photos photos"
            "reply reply"
            "date date"
            "bottom bottom";
        row-gap: 4px;
    }
    #company-reviews .review-card .name {
        font-size: 18px;
        line-height: 24px;
    }
    #company-reviews .review-card .star-rating__value {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    /* Narrower pills keep the five in one row down to a 360px phone. */
    #company-reviews .filters .filter-stars {
        gap: 8px;
    }
    #company-reviews .filters .filter-stars .filter-stars-item {
        padding: 6px 11px;
    }

    #not-found.halo-404 .code {
        font-size: 84px;
    }
    #not-found.halo-404 .code .zero {
        width: 72px;
        height: 72px;
    }
    #not-found.halo-404 .title {
        font-size: 26px;
    }
    #create-review-preview .box .left .title,
    #cooperation-statement-preview .box .left .title {
        font-size: 30px;
        line-height: 38px;
    }
    #company-detail .left .title {
        font-size: 26px;
    }
}

@media (max-width: 360px) {

    /* The lockup, the login and the burger in 280px: tighter gaps. */
    header.halo-header .logo {
        gap: 8px;
        margin-right: 10px;
    }
    header.halo-header .panel {
        margin-left: 10px;
    }
    header.halo-header .menu {
        margin-left: 12px;
    }
    header.halo-header .panel .auth .login {
        padding: 8px 14px;
    }
    #company-preview .inner .right .info-box,
    #company-preview .inner .right .info-box .inner-info-box {
        padding: 16px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .name {
        font-size: 22px;
        line-height: 28px;
    }
}

@media (max-width: 300px) {

    header.halo-header .logo img {
        width: 36px;
        height: 36px;
    }
    .halo-header .wordmark .name {
        font-size: 15px;
    }
    header.halo-header .logo {
        margin-right: 0;
    }
    header.halo-header .panel,
    header.halo-header .menu {
        margin-left: 8px;
    }
    header.halo-header .panel .auth .login {
        padding: 8px 12px;
    }
}

/* iOS Safari zooms the page into a field set under 16px and leaves it
   zoomed: on touch screens the fields keep to 16px. */
@media (pointer: coarse) {

    input.form-control,
    select.form-control,
    textarea.form-control {
        font-size: 16px !important;
    }
}

/* ----------------------------------------------------- the rings' marks */

/* --p for the rings of the cards: the average as a share of 5, from the
   data-rating app.js leaves on a .star-rating — a company's with one decimal
   (partials/cards/company-card), a review's the mean of its marks, a whole
   mark without its ".0". Matched by the first decimal, so any longer tail
   falls in its tenth. Generated; a card with no ratings prints no average at
   all. */
.star-rating[data-rating^="0.1"] { --p: 2; }
.star-rating[data-rating^="0.2"] { --p: 4; }
.star-rating[data-rating^="0.3"] { --p: 6; }
.star-rating[data-rating^="0.4"] { --p: 8; }
.star-rating[data-rating^="0.5"] { --p: 10; }
.star-rating[data-rating^="0.6"] { --p: 12; }
.star-rating[data-rating^="0.7"] { --p: 14; }
.star-rating[data-rating^="0.8"] { --p: 16; }
.star-rating[data-rating^="0.9"] { --p: 18; }
.star-rating[data-rating^="1.0"] { --p: 20; }
.star-rating[data-rating^="1.1"] { --p: 22; }
.star-rating[data-rating^="1.2"] { --p: 24; }
.star-rating[data-rating^="1.3"] { --p: 26; }
.star-rating[data-rating^="1.4"] { --p: 28; }
.star-rating[data-rating^="1.5"] { --p: 30; }
.star-rating[data-rating^="1.6"] { --p: 32; }
.star-rating[data-rating^="1.7"] { --p: 34; }
.star-rating[data-rating^="1.8"] { --p: 36; }
.star-rating[data-rating^="1.9"] { --p: 38; }
.star-rating[data-rating^="2.0"] { --p: 40; }
.star-rating[data-rating^="2.1"] { --p: 42; }
.star-rating[data-rating^="2.2"] { --p: 44; }
.star-rating[data-rating^="2.3"] { --p: 46; }
.star-rating[data-rating^="2.4"] { --p: 48; }
.star-rating[data-rating^="2.5"] { --p: 50; }
.star-rating[data-rating^="2.6"] { --p: 52; }
.star-rating[data-rating^="2.7"] { --p: 54; }
.star-rating[data-rating^="2.8"] { --p: 56; }
.star-rating[data-rating^="2.9"] { --p: 58; }
.star-rating[data-rating^="3.0"] { --p: 60; }
.star-rating[data-rating^="3.1"] { --p: 62; }
.star-rating[data-rating^="3.2"] { --p: 64; }
.star-rating[data-rating^="3.3"] { --p: 66; }
.star-rating[data-rating^="3.4"] { --p: 68; }
.star-rating[data-rating^="3.5"] { --p: 70; }
.star-rating[data-rating^="3.6"] { --p: 72; }
.star-rating[data-rating^="3.7"] { --p: 74; }
.star-rating[data-rating^="3.8"] { --p: 76; }
.star-rating[data-rating^="3.9"] { --p: 78; }
.star-rating[data-rating^="4.0"] { --p: 80; }
.star-rating[data-rating^="4.1"] { --p: 82; }
.star-rating[data-rating^="4.2"] { --p: 84; }
.star-rating[data-rating^="4.3"] { --p: 86; }
.star-rating[data-rating^="4.4"] { --p: 88; }
.star-rating[data-rating^="4.5"] { --p: 90; }
.star-rating[data-rating^="4.6"] { --p: 92; }
.star-rating[data-rating^="4.7"] { --p: 94; }
.star-rating[data-rating^="4.8"] { --p: 96; }
.star-rating[data-rating^="4.9"] { --p: 98; }
.star-rating[data-rating^="5.0"] { --p: 100; }
.star-rating[data-rating="1"] { --p: 20; }
.star-rating[data-rating="2"] { --p: 40; }
.star-rating[data-rating="3"] { --p: 60; }
.star-rating[data-rating="4"] { --p: 80; }
.star-rating[data-rating="5"] { --p: 100; }