/*
 * Indigo (docs/multisite.md §Темы): a crisp white rating site with navy
 * bands — a white bar over a navy menu, titles in Prosto One, the companies
 * as light-grey rows (rank, an initial tile, the name, the average in green,
 * the reviews in blue, the rating with a green rise and a "+"), violet
 * buttons and stars, a violet card with clouds, a white card of figures where
 * the navy begins, the latest reviews hanging from it, a navy footer.
 *
 * 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/indigo/views/pages/home), the company rows, the catalog,
 * company, blog, account and form pages, the footer and the 404.
 *
 * Both typefaces are self-hosted next to this file (SIL OFL, licences
 * included), split per script with unicode-range so a uk/ru page fetches the
 * Latin and Cyrillic cuts only. Prosto One has a single weight; its faces are
 * declared for the whole weight range so a bold heading of the base keeps the
 * one drawn weight instead of a smeared synthetic bold. Montserrat is
 * variable and declared up to 700: the base's 800 headings come out bold,
 * not black.
 */

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

@font-face {
    font-family: 'Prosto One';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/prosto-one/prosto-one-cyrillic-400-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Prosto One';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/prosto-one/prosto-one-latin-ext-400-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: 'Prosto One';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/prosto-one/prosto-one-latin-400-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;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 700;
    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 700;
    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 700;
    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 700;
    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: #19191A;
    --color-text-alt: #4A4554;
    --color-text-secondary: #FFF;
    --color-text-link: #625C6E;
    --color-text-third: #3627EF;

    --color-bg: #FFFFFF;
    --color-bg-alt: #FFF;
    --color-bg-secondary: #7327EF;
    --color-bg-third: #F9F9F9;
    --color-bg-drive: #E4E1EC;
    --color-bg-effect: #F9F9F9;
    --color-bg-fourth: #7327EF;
    --color-bg-fifth: #050132;
    --color-bg-sixth: #2C2861;
    --color-bg-empty: #F4F3F8;

    --color-border: #ECEAF2;
    --color-border-secondary: #E4E1EC;
    --color-border-alt: #FFF;

    --color-btn: #7327EF;

    --progress-primary: #7327EF;
    --progress-bg: #ECEAF2;

    --color-icon-star: #7327EF;
    --color-icon-primary: #7327EF;

    --color-star-empty: #DCD8E6;
    --skeleton-bg: #F1EFF6;

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

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

    --shadow-card: 0 6px 24px rgba(5, 1, 50, 0.08);
    --shadow-popover: 0 8px 24px rgba(5, 1, 50, 0.10);
    --shadow-overlay: 0 12px 32px rgba(5, 1, 50, 0.14);

    /* No page glow: the pages are white, the bands navy or light grey. */
    --glow-rgb: 255, 255, 255;

    /* Indigo's own. The violet carries the action and the stars; the blue
       the links and the review counts; the green the average — a shade
       deeper as text than as the rise triangle, so it stays readable on the
       grey rows. */
    --indigo-navy: #050132;
    --indigo-violet: #7327EF;
    --indigo-violet-hover: #5D16D2;
    --indigo-violet-soft: #7263E4;
    --indigo-lilac: #F2EEFE;
    --indigo-blue: #3627EF;
    --indigo-blue-hover: #2316C2;
    --indigo-periwinkle: #4E55FE;
    --indigo-green: #00C78B;
    --indigo-green-text: #009E6E;
    --indigo-grey: #F9F9F9;
    --indigo-tile: #F4F3F8;
    --indigo-line: #ECEAF2;
    --indigo-chip: #D9D6E0;
    --indigo-muted: #625C6E;
    --indigo-faint: #9D98A6;
    --indigo-display: 'Prosto One', 'Montserrat', Arial, sans-serif;
}

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

body::before {
    display: none;
}
.container,
.full-container,
#how_is_work > .container,
#home-about_us .container,
#home-reviews .container,
#company-reviews .container,
#blog-article .container {
    max-width: calc(1170px + 40px);
}

/* Titles in the display face: one weight, no tracking. Card and form
   headings below stay in Montserrat. */
h1,
h2,
.title {
    color: var(--color-text);
    font-family: var(--indigo-display);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
h3,
#rate_info .wrap-steps .step .inner .title,
#profile .card-title,
#profile .reviews-title,
#company-widget .note-title {
    font-family: var(--font-sans);
}

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

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

/* Violet, 7px corners, small medium type — the reference action. */
.btn,
#how_is_work .button,
#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: 7px;
    background: var(--indigo-violet);
    color: #FFF;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.btn:not(:disabled):hover,
#how_is_work .button:hover,
#partnership .box .start_cooperation:hover,
#not-found .btn:hover {
    background: var(--indigo-violet-hover);
}

/* A dashed underline: the reference's secondary link. */
#rating .all,
#home-reviews .more,
#not-found.indigo-404 .catalog-link,
section#rating > .container > .prompt,
.indigo-footer .feedback,
.indigo-header .menu .item-pick > a {
    padding-bottom: 3px;
    border-bottom: 1px dashed currentColor;
    text-decoration: none;
}

/* The initial tile of a company — the home page's markup, indigo.js in the
   base rows: the letter in one of six colours on a tint of it. */
.mono {
    --tone: var(--indigo-violet);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 5px;
    background: color-mix(in srgb, var(--tone) 11%, #FFF);
    color: var(--tone);
    font-family: var(--indigo-display);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}
.mono--1 { --tone: #2F54EB; }
.mono--2 { --tone: #00996B; }
.mono--3 { --tone: #C2378F; }
.mono--4 { --tone: #E0590C; }
.mono--5 { --tone: var(--indigo-navy); }

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

header.indigo-header {
    position: relative;
    z-index: 5;
    background: #FFF;
}
/* The home and catalog heroes' base rules make their containers flex rows
   (and narrow them on a tablet). */
#home-preview header.indigo-header .full-container,
#catalog-preview header.indigo-header .full-container {
    display: block;
    max-width: calc(1170px + 40px);
}
.indigo-header .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 92px;
    padding: 12px 0;
}
.indigo-header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 24px;
    text-decoration: none;
    min-width: 0;
}
.indigo-header .logo picture {
    display: flex;
    flex-shrink: 0;
}
.indigo-header .logo img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.indigo-header .logo .name {
    overflow: hidden;
    color: var(--indigo-navy);
    font-family: var(--indigo-display);
    font-size: 26px;
    line-height: 32px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
header.indigo-header .panel {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}
.indigo-header .panel .search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    flex-shrink: 0;
    border: 1px solid var(--indigo-line);
    border-radius: 50%;
    background: var(--indigo-grey);
    color: var(--indigo-faint);
    font-size: 18px;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.indigo-header .panel .search:hover {
    border-color: var(--indigo-violet-soft);
    color: var(--indigo-violet);
}
.indigo-header .panel .write,
.indigo-header .panel .add,
.indigo-footer .actions .write,
.indigo-footer .actions .add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 11px 34px;
    border: 1px solid var(--indigo-violet);
    border-radius: 7px;
    background: var(--indigo-violet);
    color: #FFF;
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.indigo-header .panel .write:hover,
.indigo-footer .actions .write:hover {
    border-color: var(--indigo-violet-hover);
    background: var(--indigo-violet-hover);
}
.indigo-header .panel .add,
.indigo-footer .actions .add {
    border-color: var(--indigo-violet-soft);
    background: transparent;
    color: var(--indigo-violet-soft);
}
.indigo-header .panel .add:hover {
    border-color: var(--indigo-violet);
    background: var(--indigo-lilac);
    color: var(--indigo-violet);
}
header.indigo-header .panel .auth {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}
header.indigo-header .panel .auth .reg,
header.indigo-header .panel .auth .login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 0;
    border-radius: 0;
    background: none;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}
header.indigo-header .panel .auth .icon {
    font-size: 20px;
}
header.indigo-header .panel .auth .reg:hover,
header.indigo-header .panel .auth .login:hover {
    color: var(--indigo-violet);
}
header.indigo-header .locale .lang,
header.indigo-header .locale .lang::after {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
header.indigo-header .locale .lang.active {
    color: var(--indigo-violet);
}

/* The navy menu bar. */
.indigo-header .nav {
    background: var(--indigo-navy);
}
header.indigo-header .menu {
    display: block;
    margin: 0;
    padding: 0;
}
header.indigo-header .menu .menu-box {
    justify-content: space-between;
    width: 100%;
}
header.indigo-header .menu .item {
    margin: 0;
}
header.indigo-header .menu .item > a {
    display: inline-flex;
    padding: 24px 0;
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    white-space: nowrap;
    transition: color 0.2s ease;
}
header.indigo-header .menu .item > a:hover {
    color: #B9AEFF;
}
header.indigo-header .menu .item.active a {
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.55);
}
/* Its last link wears the dashed underline. */
header.indigo-header .menu .item-pick > a {
    padding: 4px 0;
}
header.indigo-header .menu .item-phone {
    display: none;
}

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

#home-preview {
    padding-bottom: 0;
    overflow: visible;
}
#home-preview header {
    margin-bottom: 0;
}
#home-preview .hero {
    padding-top: 64px;
    padding-bottom: 46px;
}
#home-preview .hero-title {
    max-width: 800px;
    color: var(--color-text);
    font-size: 56px;
    line-height: 70px;
}
#home-preview .hero-text {
    max-width: 640px;
    margin-top: 16px;
    color: var(--indigo-muted);
    font-size: 18px;
    line-height: 28px;
}

/* The search: a grey field with the magnifier, the violet button beside it —
   the home hero's and the catalog hero's. */
#home-preview .search-form,
#catalog-preview .left .search-form {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 600px;
    margin: 34px 0 0;
}
#home-preview .search-form .field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
#home-preview .search-form .field .icon {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--indigo-faint);
    font-size: 18px;
    pointer-events: none;
}
#home-preview .search-form .form-control,
#catalog-preview .left .search-form input {
    width: 100%;
    height: 45px;
    margin: 0;
    padding: 0 46px 0 16px;
    border: 1px solid var(--indigo-line);
    border-radius: 7px;
    background: var(--indigo-grey);
    color: var(--color-text);
    font-size: 15px;
    line-height: 20px;
}
#home-preview .search-form .form-control::placeholder,
#catalog-preview .left .search-form input::placeholder {
    color: var(--indigo-faint);
}
#home-preview .search-form .form-control:focus,
#catalog-preview .left .search-form input:focus {
    border-color: var(--indigo-violet-soft);
    background: #FFF;
}
#home-preview .search-form .btn,
#catalog-preview .left .search-form .btn {
    position: static;
    flex: 0 0 auto;
    transform: none;
    height: 45px;
    padding: 0 36px;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    opacity: 1;
}
#home-preview .search-form .btn:disabled,
#catalog-preview .left .search-form .btn:disabled {
    opacity: 1;
    cursor: default;
}

/* ------------------------------------------------------ the rating board */

section#rating {
    padding: 0 0 100px;
    overflow: visible;
}
#rating .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 30px;
    align-items: start;
}
section#rating .list-rate {
    padding-top: 0;
}
#rating .empty {
    padding: 30px 0;
    color: var(--color-text-alt);
}

/* The column heads: grey pills over the figures, a "?" leading to how the
   rating is counted. Same grid as the rows. */
.list-rate_item,
#rating .table-head {
    display: grid;
    grid-template-columns: 46px 64px minmax(0, 1fr) 136px 132px 104px 48px;
    grid-template-areas: "rank mono name score reviews rating plus";
    align-items: center;
    padding: 0 22px 0 30px;
}
#rating .table-head {
    margin-bottom: 16px;
}
#rating .table-head .chip {
    position: relative;
    justify-self: center;
    padding: 9px 12px;
    border: 1px solid var(--indigo-chip);
    border-radius: 30px;
    color: var(--indigo-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    white-space: nowrap;
}
#rating .table-head .col-average {
    grid-area: score;
}
#rating .table-head .col-reviews {
    grid-area: reviews;
}
#rating .table-head .col-rating {
    grid-area: rating;
}
#rating .table-head .hint {
    position: absolute;
    top: -9px;
    right: -9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #5A5466;
    color: #FFF;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}
#rating .table-head .hint:hover {
    background: var(--indigo-violet);
}

/* The shared company card (partials/cards/company-card) as a light-grey row:
   rank, initial, name, the average in green, the reviews in blue, the rating
   with a green rise, a "+". */
.list-rate_item {
    min-height: 96px;
    margin-top: 0;
    margin-bottom: 16px;
    padding-top: 22px;
    padding-bottom: 22px;
    border: 0;
    border-radius: 7px;
    background: var(--indigo-grey);
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.list-rate_item:last-child {
    margin-bottom: 0;
}
.list-rate_item:hover {
    background: #F4F3F8;
    box-shadow: none;
}
.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: var(--color-text);
    font-family: var(--font-sans) !important;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
}
/* The initial (indigo.js): a white tile like the reference's logos. */
.list-rate_item .mono {
    grid-area: mono;
    width: 64px;
    height: 48px;
    background: #FFF;
    font-size: 26px;
}
.list-rate_item .name {
    grid-area: name;
    margin: 0;
    padding: 0 16px 0 12px;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
}
.list-rate_item:hover .name {
    color: var(--indigo-violet);
}
/* The average: the figure alone, in green (no stars on the row). */
.list-rate_item .rate,
.list-rate_item .rate .star-rating {
    display: contents;
}
.list-rate_item .star-rating__value {
    grid-area: score;
    justify-self: center;
    margin: 0;
    color: var(--indigo-green-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
}
.list-rate_item .star-rating__stars {
    display: none;
}
.list-rate_item .comment {
    grid-area: reviews;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: var(--indigo-blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
}
.list-rate_item .comment .icon {
    margin: 0;
    color: var(--indigo-blue);
    font-family: 'heroicons-outline' !important;
    font-size: 17px;
}
/* The rating: its figure with the green rise; the bar is left out. */
.list-rate_item .progress {
    grid-area: rating;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}
.list-rate_item .progress .progress-bar {
    display: none;
}
.list-rate_item .progress .value {
    min-width: 0;
    margin: 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
}
.list-rate_item .progress::after {
    content: "";
    width: 10px;
    height: 9px;
    background: var(--indigo-green);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* The "+": the row opens the company. */
.list-rate_item::after {
    grid-area: plus;
    justify-self: end;
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background:
        linear-gradient(var(--color-text), var(--color-text)) center / 16px 1.5px no-repeat,
        linear-gradient(var(--color-text), var(--color-text)) center / 1.5px 16px no-repeat;
    transition: transform 0.2s ease;
}
.list-rate_item:hover::after {
    transform: rotate(90deg);
}
/* 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: 7px;
    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(--indigo-violet);
    outline-offset: 2px;
}

#rating .all {
    display: block;
    width: fit-content;
    margin: 22px 0 0 auto;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
}
#rating .all:hover,
#home-reviews .more:hover {
    color: var(--indigo-violet);
}

/* The violet card next to the rows: which company suits me — with clouds. */
#rating .pick {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    min-height: 284px;
    padding: 30px 20px 20px;
    border-radius: 7px;
    background: var(--indigo-periwinkle) url('../img/clouds.svg') right bottom / 270px auto no-repeat;
    color: #FFF;
}
#rating .pick-title {
    color: #FFF;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
}
#rating .pick-text {
    margin-top: 16px;
    color: #FFF;
    font-size: 13px;
    line-height: 16px;
}
#rating .pick-button {
    align-self: flex-start;
    margin-top: auto;
    padding: 11px 26px;
    white-space: nowrap;
    border-radius: 7px;
    background: #FFF;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    text-decoration: none;
    transition: color 0.2s ease, box-shadow 0.2s ease;
}
#rating .pick-button:hover {
    color: var(--indigo-violet);
    box-shadow: 0 6px 18px rgba(5, 1, 50, 0.18);
}

/* --------------------------------------------------- home: the figures */

/* A white card where the navy band begins — the band runs on under the
   latest reviews. */
.figures {
    background: linear-gradient(#FFF 120px, var(--indigo-navy) 120px);
}
.figures-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    min-height: 330px;
    margin: 0;
    padding: 40px 30px;
    list-style: none;
    border: 1px solid var(--indigo-line);
    border-radius: 14px;
    background:
        url('../img/rings.svg') 52% -310px / 440px auto no-repeat,
        url('../img/rings.svg') -290px 160px / 520px auto no-repeat,
        url('../img/rings.svg') right -300px top 30px / 560px auto no-repeat,
        #FFF;
}
.figures .figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.figures .value {
    color: var(--indigo-navy);
    font-family: var(--indigo-display);
    font-size: 90px;
    line-height: 111px;
}
.figures .label {
    color: var(--indigo-navy);
    font-size: 22px;
    line-height: 27px;
}

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

#home-reviews {
    padding: 0 0 70px;
    background: none;
}
#home-reviews::before {
    display: none;
}
#home-reviews .band {
    padding: 90px 0 180px;
    background: var(--indigo-navy);
}
#home-reviews .title {
    max-width: none;
    margin: 0;
    color: #FFF;
    font-size: 48px;
    line-height: 62px;
    text-align: center;
}
#home-reviews .cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 30px;
    max-width: 970px;
    margin: -110px auto 0;
}
#home-reviews .review {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    border-radius: 14px;
    background: #FFF;
    box-shadow: 0 4px 30px rgba(5, 1, 50, 0.08);
}
#home-reviews .review .head {
    display: flex;
    align-items: center;
    gap: 30px;
}
#home-reviews .review .head .mono {
    width: 140px;
    height: 88px;
    border-radius: 5px;
    font-size: 48px;
}
#home-reviews .review .who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
#home-reviews .review .company {
    max-width: 100%;
    overflow: hidden;
    color: var(--color-text);
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#home-reviews .review .company:hover {
    color: var(--indigo-violet);
}
/* The stars first, the mark after them. */
#home-reviews .review .star-rating {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}
#home-reviews .review .star-rating__value {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
}
#home-reviews .star-rating__stars,
#home-reviews .star-rating__star::before,
#home-reviews .star-rating__star--half::after {
    font-size: 13px;
}
#home-reviews .star-rating__star--half::after {
    top: 0;
}
#home-reviews .star-rating__star {
    margin-right: 3px;
}
#home-reviews .review .author {
    color: var(--indigo-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
}
#home-reviews .review .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
    margin: 22px 0 0;
    color: var(--color-text);
    font-size: 16px;
    line-height: 24px;
    overflow-wrap: break-word;
}
#home-reviews .review .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--indigo-faint);
    font-size: 12px;
    line-height: 15px;
}
#home-reviews .review .work-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--indigo-muted);
    font-weight: 500;
}
#home-reviews .review .work-type::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--indigo-violet);
}
#home-reviews .review .date {
    margin-left: auto;
}
#home-reviews .more {
    display: block;
    width: fit-content;
    margin: 40px auto 0;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
}

/* ---------------------------------------- home: who is written about now */

.fresh {
    padding: 60px 0;
    background:
        url('../img/rings.svg') 30% -260px / 520px auto no-repeat,
        url('../img/rings.svg') left -320px bottom -300px / 560px auto no-repeat,
        var(--indigo-grey);
}
.fresh > .container {
    display: grid;
    grid-template-columns: minmax(0, 470px) minmax(0, 570px);
    justify-content: space-between;
    gap: 40px;
    align-items: center;
}
.fresh .title {
    max-width: none;
    margin: 0;
    font-size: 48px;
    line-height: 62px;
}
.fresh .lead {
    margin-top: 34px;
    color: var(--indigo-muted);
    font-size: 16px;
    line-height: 24px;
}
.fresh-button {
    display: inline-flex;
    margin-top: 60px;
    padding: 11px 40px;
    border-radius: 7px;
    background: var(--indigo-violet);
    color: #FFF;
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.fresh-button:hover {
    background: var(--indigo-violet-hover);
}
.fresh .tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fresh .tile a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
}
.fresh .tile-name {
    overflow: hidden;
    color: var(--indigo-muted);
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.fresh .tile-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    border-radius: 14px;
    background: #FFF;
    transition: box-shadow 0.2s ease;
}
.fresh .tile a:hover .tile-plate {
    box-shadow: var(--shadow-card);
}
.fresh .tile a:hover .tile-name {
    color: var(--indigo-violet);
}
.fresh .tile-plate .mono {
    width: 112px;
    height: 112px;
    border-radius: 14px;
    font-size: 64px;
}

/* ------------------------------------------------- home: how to choose */

#how_is_work {
    padding: 100px 0 70px;
}
#how_is_work .title {
    max-width: none;
    margin: 0 0 40px;
    font-size: 48px;
    line-height: 62px;
    text-align: center;
}
#how_is_work .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#how_is_work .step {
    padding: 36px 30px;
    border-radius: 14px;
    background: var(--indigo-grey);
}
#how_is_work .step .num {
    display: block;
    color: var(--indigo-violet);
    font-family: var(--indigo-display);
    font-size: 40px;
    line-height: 48px;
}
#how_is_work .step-title {
    margin-top: 22px;
    color: var(--color-text);
    font-size: 24px;
    font-weight: 500;
    line-height: 29px;
}
#how_is_work .step-text {
    margin-top: 12px;
    color: var(--indigo-muted);
    font-size: 16px;
    line-height: 24px;
}

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

/* The title and its words at the left, the four steps as grey cards at the
   right — on the home page and under the catalog. */
#rate_info {
    padding: 30px 0 100px;
    background: none;
}
#rate_info > .container {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 30px 60px;
    align-items: start;
}
#rate_info > .container > .topic {
    display: none;
}
#rate_info .wrap-title {
    display: block;
    margin: 0;
}
#rate_info .wrap-title .title {
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 40px;
    line-height: 50px;
    text-align: left;
}
#rate_info .wrap-title .description {
    margin-top: 20px;
    padding: 0;
    color: var(--indigo-muted);
    font-size: 16px;
    line-height: 24px;
}
#rate_info .wrap-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: none;
    margin: 0;
    padding: 0;
}
#rate_info .wrap-steps .step {
    display: block;
    margin: 0;
    padding: 26px 24px;
    border-radius: 14px;
    background: var(--indigo-grey);
}
#rate_info .wrap-steps .step .icon {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: none;
    color: var(--indigo-violet);
    font-family: var(--indigo-display);
    font-size: 30px;
    font-weight: 400;
    line-height: 36px;
}
#rate_info .wrap-steps .step .inner {
    flex-basis: auto;
    padding: 0;
}
#rate_info .wrap-steps .step .inner .title {
    margin: 14px 0 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
}
#rate_info .wrap-steps .step .inner .description {
    margin-top: 8px;
    color: var(--indigo-muted);
    font-size: 15px;
    line-height: 22px;
}

/* ------------------------------------------------- home: what we are */

/* Navy, running on into the footer. */
#home-about_us {
    padding: 100px 0 60px;
    background: var(--indigo-navy);
}
#home-about_us .title {
    max-width: none;
    margin: 0 0 40px;
    color: #FFF;
    font-size: 48px;
    line-height: 62px;
    text-align: left;
}
#home-about_us .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 60px;
}
#home-about_us .column > p {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
    line-height: 24px;
}
#home-about_us .column > p:first-child {
    margin-top: 0;
}
#home-about_us .column > .lead {
    color: #FFF;
    font-size: 18px;
    line-height: 27px;
}
#home-about_us .subtitle {
    margin-top: 28px;
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}
#home-about_us .column > .subtitle:first-child {
    margin-top: 0;
}
#home-about_us .criteria {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
#home-about_us .criteria li {
    position: relative;
    margin-top: 6px;
    padding-left: 20px;
    color: #FFF;
    font-size: 16px;
    line-height: 24px;
}
#home-about_us .criteria li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--indigo-green);
}

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

#catalog-preview {
    overflow: visible;
}
#catalog-preview .container > .row {
    display: block;
    padding: 64px 0 46px;
}
#catalog-preview .left {
    padding: 0;
}
#catalog-preview .left .topic,
#catalog-preview .right {
    display: none;
}
#catalog-preview .left .title {
    max-width: 800px;
    margin: 0;
    font-size: 56px;
    line-height: 70px;
    text-transform: none;
}
#catalog-preview .left .description {
    max-width: 720px;
    margin-top: 16px;
    color: var(--indigo-muted);
    font-size: 16px;
    line-height: 24px;
}
#catalog-preview .left .search-form {
    position: relative;
}
#catalog-preview .left .search-form input {
    padding-right: 46px;
}
#catalog-preview .left .search-form > input {
    flex: 1 1 auto;
    min-width: 0;
}
/* The "clear" cross sits inside the field's right end: pulled back over it
   by its margin, the gap to the button kept. */
#catalog-preview .left .search-form .search-clear {
    position: static;
    align-self: center;
    flex: 0 0 24px;
    margin: 0 16px 0 -56px;
    transform: none;
}

/* The catalog's list: the title and the link to the counting at the left,
   the rows the full width. */
section#rating > .container > .topic {
    display: none;
}
section#rating .title.full-title {
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 40px;
    line-height: 50px;
    text-align: left;
}
section#rating > .container > .prompt {
    display: inline-block;
    max-width: none;
    margin: 16px 0 34px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
}
section#rating > .container > .prompt:hover {
    color: var(--indigo-violet);
}
section#rating .companies-list .get_more {
    display: block;
    width: fit-content;
    margin: 30px auto 0;
    padding: 11px 40px;
    border: 1px solid var(--indigo-violet-soft);
    border-radius: 7px;
    color: var(--indigo-violet-soft);
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    text-decoration: none;
}
section#rating .companies-list .get_more:hover {
    border-color: var(--indigo-violet);
    background: var(--indigo-lilac);
    color: var(--indigo-violet);
}

/* The partnership card (catalog, partnership page): violet, with clouds. */
#partnership {
    padding: 0 0 100px;
}
#partnership .box {
    padding: 56px 60px;
    border: 0;
    border-radius: 14px;
    background: var(--indigo-periwinkle) url('../img/clouds.svg') right -20px bottom -20px / 420px auto no-repeat;
}
#partnership .box .topic,
#claim-invite .topic {
    padding: 0;
    border-radius: 0;
    background: none;
}
#partnership .box .topic {
    color: rgba(255, 255, 255, 0.8);
}
#partnership .box .title {
    margin: 12px 0 0;
    color: #FFF;
    font-size: 40px;
    line-height: 50px;
}
#partnership .box .description {
    color: rgba(255, 255, 255, 0.86);
}
#partnership .box .list-items .item .icon {
    color: #FFF;
}
#partnership .box .list-items .item .label {
    color: #FFF;
    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: rgba(255, 255, 255, 0.6);
}
#partnership .box .start_cooperation {
    padding: 12px 40px;
    background: #FFF;
    color: var(--color-text);
    font-size: 14px;
}
#partnership .box .start_cooperation:hover {
    background: #FFF;
    color: var(--indigo-violet);
}

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

#company-preview {
    overflow: visible;
}
#company-preview .inner {
    align-items: stretch;
    padding: 50px 0 60px;
}
#company-preview .inner .left {
    flex-basis: 370px;
    width: 370px;
}
#company-preview .inner .right {
    flex-basis: calc(100% - 370px);
    padding-left: 30px;
    align-items: stretch;
}
/* The gallery on a light-grey tile, like the reference's logo plate. */
#company-preview .inner .left .gallery .gallery-swiper {
    height: 226px;
    padding: 0;
    border-radius: 14px;
    background: var(--indigo-grey);
}
#company-preview .inner .left .gallery .gallery-swiper img {
    border-radius: 14px;
}
#company-preview .inner .left .gallery-swiper-bar .swiper-slide img {
    border-radius: 7px;
}
#company-preview .inner .right .info-box {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
#company-preview .inner .right .info-box > .topic {
    display: none;
}
#company-preview .inner .right .info-box .inner-info-box {
    align-items: stretch;
    gap: 30px;
    padding: 0;
}
#company-preview .inner .right .info-box .inner-info-box .part-left {
    flex: 1 1 auto;
    min-width: 0;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .name {
    font-family: var(--indigo-display);
    font-size: 48px;
    font-weight: 400;
    line-height: 58px;
    overflow-wrap: anywhere;
}
/* The site's rating: a violet figure-plate instead of the trophy. */
#company-preview .inner .right .info-box .inner-info-box .part-left .rate {
    color: var(--indigo-muted);
    font-size: 15px;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .rate::before {
    width: 42px;
    flex-basis: 42px;
    height: 42px;
    border: 0;
    border-radius: 7px;
    background: var(--indigo-lilac);
    color: var(--indigo-violet);
    font-size: 20px;
}
/* The base pins the button to the bottom of a padded box on a phone; this
   box has no padding, so the button stays in the flow under the rating. */
#company-preview .inner .right .info-box .inner-info-box .part-left .panel {
    position: static;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-top: 24px;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .btn {
    padding: 12px 40px;
    font-size: 13px;
    line-height: 15px;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .amount_reviews {
    margin: 0;
    color: var(--indigo-blue);
    font-weight: 600;
    white-space: nowrap;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .amount_reviews i {
    color: var(--indigo-blue);
}
#company-preview .inner .right .info-box .drive {
    display: none;
}
/* The averages: a light-grey card at the right. */
#company-preview .inner .right .info-box .part-right {
    flex: 0 0 300px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--indigo-grey);
}
#company-preview .inner .right .info-box .part-right .rate {
    color: var(--indigo-muted);
    font-size: 13px;
}
#company-preview .inner .right .info-box .part-right .rate .mark {
    color: var(--indigo-green-text);
    font-family: var(--indigo-display);
    font-size: 40px;
    font-weight: 400;
    line-height: 48px;
}
#company-preview .inner .right .info-box .part-right .list-rate .item-list-rate {
    margin-top: 6px;
}
#company-preview .inner .right .info-box .part-right .list-rate .item-list-rate .label {
    color: var(--indigo-muted);
    font-size: 14px;
    font-weight: 500;
}

#company-detail .left .title {
    margin-bottom: 24px;
    font-size: 40px;
    line-height: 50px;
    text-align: left;
}
#company-detail .left .description,
#company-detail .left .description > p {
    color: var(--color-text);
    font-size: 16px;
    line-height: 26px;
}
#company-detail .left .description ul {
    padding: 0;
    list-style: none;
}
#company-detail .left .description ul > li {
    position: relative;
    margin-top: 8px;
    padding-left: 22px;
}
#company-detail .left .description ul > li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--indigo-violet);
}
#company-detail .left .description ol {
    padding: 0;
    list-style: none;
    counter-reset: indigo-step;
}
#company-detail .left .description ol > li {
    position: relative;
    margin-top: 12px;
    padding-left: 40px;
    counter-increment: indigo-step;
}
#company-detail .left .description ol > li::before {
    content: counter(indigo-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--indigo-violet);
    font-family: var(--indigo-display);
    font-size: 18px;
    line-height: 26px;
}
/* The right column: light-grey cards — the site, the contacts, the owners'
   card, the top five. */
#company-detail .right .site,
#company-detail .right .socials,
#company-detail .right .messengers,
#company-detail .right .contacts {
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--indigo-grey);
}
#company-detail .right .label {
    color: var(--color-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
}
#company-detail .right .site a {
    color: var(--indigo-blue);
    font-size: 15px;
    overflow-wrap: anywhere;
}
#company-detail .right .site a .icon,
#company-detail .right .contacts-box .item .icon {
    color: var(--indigo-faint);
}
#company-detail .right .contacts-box .item {
    color: var(--color-text);
    font-size: 14px;
}
#company-detail .right .owner-promo {
    padding: 20px;
    border: 1px solid var(--indigo-violet-soft);
    border-radius: 14px;
    background: #FFF;
}
#company-detail .right .owner-promo .label {
    font-size: 16px;
    font-weight: 600;
}
#company-detail .right .owner-promo .action .link {
    color: var(--indigo-violet);
    font-weight: 600;
}
#company-detail .right .owner-promo .action + .action {
    border-top-color: var(--indigo-line);
}
/* The top five: grey rows with the initial, the name and the place as a big
   pale figure. */
#company-detail .right .top-list .topic {
    max-width: none;
    margin: 0 0 4px;
    color: var(--color-text);
    font-family: var(--indigo-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 34px;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}
#company-detail .right .top-list .list {
    counter-reset: indigo-top;
}
#company-detail .right .top-list .list .item {
    position: relative;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid var(--indigo-line);
    border-radius: 7px;
    background: var(--indigo-grey);
    counter-increment: indigo-top;
}
#company-detail .right .top-list .list .item a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    padding-right: 40px;
    text-decoration: none;
}
#company-detail .right .top-list .list .item .mono {
    width: 44px;
    height: 34px;
    background: #FFF;
    font-size: 18px;
}
#company-detail .right .top-list .list .item .name {
    margin: 0;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 19px;
}
#company-detail .right .top-list .list .item a:hover .name {
    color: var(--indigo-violet);
}
#company-detail .right .top-list .list .item .name::before,
#company-detail .right .top-list .list .item:nth-child(-n+3) .name::before {
    display: none;
}
#company-detail .right .top-list .list .item::after {
    content: counter(indigo-top);
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--color-text);
    opacity: 0.12;
    font-family: var(--indigo-display);
    font-size: 44px;
    line-height: 1;
    pointer-events: none;
}
#company-detail .right .top-list .list .item .progress-bar {
    display: none;
}

/* The reviews of a company: light-grey cards — the name, the stars with the
   mark, the kind of work and the date, the text. */
#company-reviews {
    padding: 30px 0 100px;
}
#company-reviews .reviews-list {
    padding: 0;
    border-radius: 0;
    background: none;
}
#company-reviews .reviews-list > .topic {
    display: none;
}
#company-reviews .title {
    max-width: none;
    margin: 0 0 24px;
    font-size: 48px;
    line-height: 62px;
    text-align: left;
}
#company-reviews .filters {
    justify-content: flex-start;
    margin-top: 0;
}
/* Five pills are wider than a phone under 377px: they wrap rather than push
   the page sideways, spaced by gaps instead of the base's side margins so a
   second row starts flush with the first. */
#company-reviews .filters .filter-stars {
    flex-wrap: wrap;
    gap: 8px 10px;
}
#company-reviews .filters .filter-stars .filter-stars-item {
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--indigo-chip);
    border-radius: 30px;
    background: #FFF;
    color: var(--indigo-muted);
    font-size: 13px;
    font-weight: 600;
}
#company-reviews .filters .filter-stars .filter-stars-item .icon {
    color: var(--indigo-violet);
}
#company-reviews .filters .filter-stars .filter-stars-item.active {
    border-color: var(--indigo-violet);
    background: var(--indigo-violet);
    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: minmax(0, 1fr) auto;
    grid-template-areas:
        "name date"
        "stars stars"
        "type type"
        "text text"
        "photos photos"
        "reply reply"
        "bottom bottom";
    align-items: center;
    column-gap: 16px;
    margin: 0 0 24px;
    padding: 24px 30px;
    border: 0;
    border-radius: 14px;
    background: var(--indigo-grey);
    box-shadow: none;
}
#company-reviews .list .review-card:last-child {
    margin-bottom: 0;
}
#company-reviews .review-card .head,
#company-reviews .review-card .head .rate {
    display: contents;
}
#company-reviews .review-card .head .rate .star-rating {
    grid-area: stars;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
#company-reviews .review-card .star-rating__value {
    color: var(--color-text);
    font-size: 18px;
    font-weight: 500;
}
#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: 19px;
}
#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: 24px;
    font-weight: 600;
    line-height: 30px;
}
#company-reviews .review-card .head .created_at {
    grid-area: date;
    align-self: start;
    margin: 6px 0 0;
    color: var(--indigo-faint);
    font-size: 13px;
    font-weight: 500;
}
#company-reviews .review-card .work-type {
    grid-area: type;
    justify-self: start;
    margin: 12px 0 0;
    padding: 3px 12px;
    border-radius: 30px;
    background: #FFF;
    color: var(--indigo-muted);
    font-size: 13px;
    font-weight: 500;
}
#company-reviews .review-card .text {
    grid-area: text;
    margin-top: 18px;
    color: var(--color-text);
    font-size: 16px;
    line-height: 24px;
}
#company-reviews .review-card .photos {
    grid-area: photos;
}
#company-reviews .review-card .company-reply {
    grid-area: reply;
    border-left-color: var(--indigo-violet);
    border-radius: 0 7px 7px 0;
    background: #FFF;
}
#company-reviews .review-card .bottom_panel {
    grid-area: bottom;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--indigo-line);
    font-size: 13px;
}
#company-reviews .review-card .bottom_panel .to_company {
    color: var(--indigo-blue);
    font-weight: 600;
    text-decoration: none;
}
#company-reviews .review-card .bottom_panel .to_company:hover {
    color: var(--indigo-blue-hover);
}
#company-reviews .get_more {
    display: block;
    width: fit-content;
    margin: 30px auto 0;
    padding: 11px 40px;
    border: 1px solid var(--indigo-violet-soft);
    border-radius: 7px;
    color: var(--indigo-violet-soft);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
#company-reviews .get_more:hover {
    border-color: var(--indigo-violet);
    background: var(--indigo-lilac);
    color: var(--indigo-violet);
}

/* Pagination: the figures in light frames, the current one filled blue. */
.pageLink {
    border-radius: 7px;
    color: var(--color-text);
}
.pageItem.active .pageLink {
    border-color: var(--indigo-blue);
    background: var(--indigo-blue);
    color: #FFF;
}

/* Stars are violet 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(--indigo-violet);
}
/* …and in the review form's star input. */
.sri-input {
    --sri-star-color: #DCD8E6;
    --sri-star-filled: var(--indigo-violet);
    --sri-star-hover: #A98BFF;
}

/* ----------------------------------------------------------------- blog */

#blog-listing .container {
    padding-top: 64px;
}
#blog-listing .topic {
    display: none;
}
#blog-listing .title {
    margin: 0;
    font-size: 56px;
    line-height: 70px;
    text-align: left;
}
#blog-listing .toolbar .search-form input,
#blog-listing .toolbar .filters .form-control {
    border-color: var(--indigo-line);
    border-radius: 7px;
    background-color: var(--indigo-grey);
}
#blog-listing .toolbar .search-form .btn {
    border-radius: 6px;
}
#blog-listing .toolbar .search-form .btn:disabled {
    opacity: 1;
    cursor: default;
}
/* The posts as rows: the title, the excerpt, the views and the date at the
   left, the picture at the right. */
#blog-listing .posts {
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
    margin-top: 50px;
}
#blog-listing .blog-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
    grid-template-areas:
        "name cover"
        "excerpt cover"
        "meta cover";
    grid-template-rows: auto auto 1fr;
    column-gap: 30px;
    min-height: 248px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
/* The picture fills the card's height instead of setting it: the engines
   share a spanning item's height out among the rows each its own way, so a
   card came out 248px in Firefox, 270px in Chrome and 300px in Safari. */
#blog-listing .blog-card .cover {
    grid-area: cover;
    height: auto;
    contain: size;
    border-radius: 10px;
}
#blog-listing .blog-card .name {
    grid-area: name;
    margin: 0;
    font-family: var(--indigo-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 34px;
}
#blog-listing .blog-card .name a {
    color: var(--indigo-blue);
}
#blog-listing .blog-card .name a:hover {
    color: var(--indigo-blue-hover);
}
#blog-listing .blog-card .excerpt {
    grid-area: excerpt;
    margin: 30px 0 0;
    color: var(--color-text);
    font-size: 16px;
    line-height: 22px;
}
#blog-listing .blog-card .meta {
    grid-area: meta;
    align-self: end;
    flex-direction: row-reverse;
    margin-top: 30px;
    color: var(--indigo-faint);
    font-size: 12px;
}
#blog-listing .blog-card .meta .views {
    padding: 6px 12px;
    border-radius: 5px;
    background: var(--indigo-violet);
    color: #FFF;
    font-size: 12px;
    line-height: 15px;
}
#blog-listing .blog-card .read-more {
    display: none;
}
#blog-listing .top-companies .topic {
    display: block;
    color: var(--color-text);
}

/* A post: the title in the display face, the side cards light grey. */
#blog-article .article-title {
    font-family: var(--indigo-display);
    font-weight: 400;
}

/* --------------------------------------------- partnership, forms, auth */

/* The other pages' heroes: the display face. */
#create-review-preview .box .left .title,
#cooperation-statement-preview .box .left .title,
#auth .title,
#profile .title {
    font-weight: 400;
    text-transform: none;
}
#create-review-preview .box .left .title,
#cooperation-statement-preview .box .left .title {
    font-size: 48px;
    line-height: 58px;
}
#claim-invite .topic {
    color: var(--indigo-violet);
}
#claim-invite .box {
    border-radius: 14px;
}
#claim-invite .steps .num {
    background-color: var(--indigo-lilac);
    color: var(--indigo-violet);
}
.form-control {
    border-color: var(--indigo-line);
    border-radius: 7px;
}
.form-control:focus {
    border-color: var(--indigo-violet-soft);
}

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

footer.indigo-footer {
    padding: 60px 0 36px;
    background: var(--indigo-navy);
}
footer.indigo-footer .row {
    align-items: flex-start;
}
footer.indigo-footer .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 32px;
    text-decoration: none;
    flex-shrink: 0;
}
footer.indigo-footer .logo img {
    width: 44px;
    height: 44px;
}
.indigo-footer .wordmark {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.indigo-footer .wordmark .name {
    color: #FFF;
    font-family: var(--indigo-display);
    font-size: 26px;
    line-height: 32px;
    white-space: nowrap;
}
.indigo-footer .wordmark .tagline {
    max-width: 190px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    line-height: 14px;
}
footer.indigo-footer .row .menu .col {
    padding: 0 0 0 40px;
}
footer.indigo-footer .row .menu .col .label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}
footer.indigo-footer .row .menu .col .item-menu {
    margin-top: 14px;
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    white-space: nowrap;
}
footer.indigo-footer .row .menu .col .item-menu:hover {
    color: #B9AEFF;
}
footer.indigo-footer .row .panel {
    gap: 22px;
    align-items: flex-end;
}
.indigo-footer .actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.indigo-footer .actions .add {
    border-color: #6F64E8;
    color: #9C93FF;
}
.indigo-footer .actions .add:hover {
    border-color: #B9AEFF;
    color: #FFF;
}
.indigo-footer .feedback {
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
}
.indigo-footer .feedback:hover {
    color: #B9AEFF;
}
footer.indigo-footer .row .panel .auth {
    gap: 6px;
}
footer.indigo-footer .row .panel .auth .reg {
    margin: 0;
    color: #FFF;
}
footer.indigo-footer .row .panel .auth .login {
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 7px;
    background: transparent;
    color: #FFF;
}
footer.indigo-footer .row .panel .auth .login:hover {
    border-color: #FFF;
}
footer.indigo-footer .row .locale .lang,
footer.indigo-footer .row .locale .lang::after,
footer.indigo-footer .col-locale .locale .lang,
footer.indigo-footer .col-locale .locale .lang::after {
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
}
footer.indigo-footer .row .locale .lang.active,
footer.indigo-footer .col-locale .locale .lang.active {
    color: #9C93FF;
}
footer.indigo-footer .bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
footer.indigo-footer .bottom .copyright,
footer.indigo-footer .bottom .domain {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 20px;
    text-align: left;
}

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

#not-found.indigo-404 .container {
    padding-top: 0;
    padding-bottom: 0;
}
#not-found.indigo-404 .box {
    padding: 70px 0 110px;
    background: url('../img/rings.svg') center -150px / 600px auto no-repeat;
    text-align: center;
}
#not-found.indigo-404 .code {
    color: var(--indigo-navy);
    font-family: var(--indigo-display);
    font-size: 170px;
    line-height: 1;
}
#not-found.indigo-404 .title {
    margin-top: 30px;
    font-size: 40px;
    line-height: 50px;
}
#not-found.indigo-404 .text {
    max-width: 560px;
    margin: 14px auto 0;
    color: var(--indigo-muted);
    font-size: 16px;
    line-height: 24px;
}
#not-found.indigo-404 .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 30px;
    margin-top: 34px;
}
#not-found.indigo-404 .btn {
    padding: 12px 40px;
    font-size: 14px;
}
#not-found.indigo-404 .catalog-link {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
}
#not-found.indigo-404 .catalog-link:hover {
    color: var(--indigo-violet);
}

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

/* ------------------------------------------------------------ long words */

/* A company's name is often one long word, its site and e-mail longer
   still: they break rather than push a phone's page sideways (Firefox does
   not break an address at its hyphens). */
#create-review-preview .box .left .title,
#cooperation-statement-preview .box .left .title,
#create-review-form form .company_name,
#company-preview .inner .right .info-box .inner-info-box .part-left .name,
#company-detail .left .title,
#company-reviews .title,
#company-detail .right .site a,
#company-detail .right .contacts-box .item {
    overflow-wrap: anywhere;
}

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

@media (max-width: 1239px) {

    .indigo-header .panel .write,
    .indigo-header .panel .add {
        padding: 11px 22px;
    }
    header.indigo-header .panel {
        gap: 14px;
    }
}

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

    /* The white bar keeps the violet button only. */
    .indigo-header .panel .add {
        display: none;
    }
    header.indigo-header .menu .item > a {
        font-size: 13px;
    }

    .list-rate_item,
    #rating .table-head {
        grid-template-columns: 40px 64px minmax(0, 1fr) 124px 124px 96px 36px;
        padding-left: 22px;
        padding-right: 14px;
    }
    #rating .layout {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 24px;
    }
    #rating .pick {
        background-size: 240px auto;
    }
    #rating .pick-button {
        padding: 11px 18px;
    }
    #rating .table-head .chip {
        padding: 8px 9px;
        font-size: 11px;
    }

    .figures .value {
        font-size: 72px;
        line-height: 90px;
    }
    #home-reviews .review .head .mono {
        width: 110px;
    }

    #company-preview .inner .left {
        flex-basis: 320px;
        width: 320px;
    }
    #company-preview .inner .right .info-box .part-right {
        flex-basis: 260px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .name {
        font-size: 40px;
        line-height: 48px;
    }
    footer.indigo-footer .row .menu .col {
        padding-left: 26px;
    }
}

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

    #create-review-preview .box .left .title,
    #cooperation-statement-preview .box .left .title {
        font-size: 38px;
        line-height: 46px;
    }

    /* The phone header: one navy bar — the name, the account link, the
       burger (the menu bar's, set into the corner); the dropdown carries the
       navigation and the two buttons. */
    .indigo-header .top {
        background: var(--indigo-navy);
    }
    .indigo-header .bar {
        min-height: 70px;
        padding: 12px 52px 12px 0;
    }
    .indigo-header .logo img {
        width: 38px;
        height: 38px;
    }
    .indigo-header .logo .name {
        color: #FFF;
        font-size: 22px;
        line-height: 28px;
    }
    .indigo-header .panel .search,
    .indigo-header .panel .write,
    .indigo-header .panel .add {
        display: none;
    }
    header.indigo-header .panel .auth .reg,
    header.indigo-header .panel .auth .login {
        color: #FFF;
    }
    header.indigo-header .panel .auth .reg:hover,
    header.indigo-header .panel .auth .login:hover {
        color: #B9AEFF;
    }
    .indigo-header .nav {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 0;
        background: none;
    }
    .indigo-header .nav > .full-container {
        position: relative;
        height: 0;
    }
    header.indigo-header .menu {
        position: absolute;
        top: 16px;
        right: 20px;
        margin: 0;
    }
    header.indigo-header .menu .mobile-button {
        color: #FFF;
    }
    header.indigo-header .menu .mobile-button .icon {
        font-size: 32px;
    }
    header.indigo-header .menu .menu-box {
        top: calc(100% + 16px);
        width: auto;
        min-width: 250px;
        padding: 12px 20px;
        border: 1px solid var(--indigo-line);
        border-radius: 7px;
        background: #FFF;
        box-shadow: var(--shadow-popover);
    }
    header.indigo-header .menu .item > a,
    header.indigo-header .menu .item-pick > a {
        width: 100%;
        padding: 12px 30px 12px 4px;
        border: 0;
        color: var(--color-text);
        font-size: 16px;
        line-height: 20px;
    }
    header.indigo-header .menu .item > a:hover {
        color: var(--indigo-violet);
        font-weight: 500;
    }
    header.indigo-header .menu .item.active a {
        color: var(--indigo-violet);
    }
    header.indigo-header .menu .item-phone {
        display: block;
    }
    header.indigo-header .menu .item-pick > a {
        color: var(--indigo-violet);
        font-weight: 600;
    }
    header.indigo-header .menu .item.locale-panel .locale {
        border-top-color: var(--indigo-line);
    }

    #home-preview .hero,
    #catalog-preview .container > .row {
        padding-top: 44px;
        padding-bottom: 34px;
    }
    #home-preview .hero-title,
    #catalog-preview .left .title {
        font-size: 44px;
        line-height: 54px;
    }
    #blog-listing .title {
        font-size: 44px;
        line-height: 54px;
    }

    /* The board above the violet card. */
    #rating .layout {
        grid-template-columns: minmax(0, 1fr);
    }
    #rating .pick {
        position: static;
        min-height: 220px;
        background-size: 300px auto;
    }
    section#rating {
        padding-bottom: 70px;
    }

    .figures-card {
        min-height: 0;
        padding: 40px 20px;
    }
    .figures .value {
        font-size: 56px;
        line-height: 70px;
    }
    .figures .label {
        font-size: 18px;
        line-height: 22px;
    }
    #home-reviews .title,
    .fresh .title,
    #how_is_work .title,
    #home-about_us .title,
    #company-reviews .title {
        font-size: 38px;
        line-height: 48px;
    }
    #home-reviews .band {
        padding: 60px 0 150px;
    }
    #home-reviews .cards {
        gap: 24px 20px;
    }
    #home-reviews .review .head {
        gap: 18px;
    }
    #home-reviews .review .head .mono {
        width: 88px;
        height: 72px;
        font-size: 38px;
    }
    #home-reviews .review .company {
        font-size: 20px;
        line-height: 26px;
    }
    .fresh > .container {
        grid-template-columns: minmax(0, 1fr);
    }
    .fresh .lead {
        margin-top: 18px;
    }
    .fresh-button {
        margin-top: 28px;
    }
    #how_is_work {
        padding-top: 70px;
    }
    #how_is_work .steps {
        gap: 20px;
    }
    #how_is_work .step {
        padding: 28px 22px;
    }
    #rate_info > .container {
        grid-template-columns: minmax(0, 1fr);
    }
    #rate_info .wrap-title .title,
    section#rating .title.full-title,
    #company-detail .left .title {
        font-size: 34px;
        line-height: 42px;
    }
    #home-about_us {
        padding-top: 70px;
    }

    #company-preview .inner .left {
        flex-basis: 260px;
        width: 260px;
    }
    #company-preview .inner .left .gallery .gallery-swiper {
        height: 190px;
    }
    #company-preview .inner .right {
        padding-left: 24px;
    }
    #company-preview .inner .right .info-box .inner-info-box {
        flex-direction: column;
        gap: 20px;
    }
    #company-preview .inner .right .info-box .part-right {
        flex-basis: auto;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .panel {
        flex-direction: row;
        align-items: center;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .panel .btn {
        margin-top: 0;
    }

    #blog-listing .blog-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
        min-height: 200px;
    }

    footer.indigo-footer .row {
        flex-wrap: wrap;
    }
    footer.indigo-footer .row .panel {
        flex-basis: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        margin-top: 36px;
    }
    .indigo-footer .actions {
        flex-direction: row;
    }
    footer.indigo-footer .row .panel .locale {
        margin-left: auto;
    }
}

@media (max-width: 768px) {

    /* A row in two lines: the rank, the initial and the name with the "+";
       under them the average, the reviews and the rating. */
    #rating .table-head {
        display: none;
    }
    .list-rate_item {
        grid-template-columns: 34px 56px repeat(3, minmax(0, 1fr)) 28px;
        grid-template-areas:
            "rank mono name name name plus"
            "score score reviews reviews rating rating";
        row-gap: 18px;
        padding: 20px 16px 18px 20px;
    }
    .list-rate_item .mono {
        width: 56px;
        height: 44px;
        font-size: 24px;
    }
    .list-rate_item .star-rating__value,
    .list-rate_item .comment,
    .list-rate_item .progress {
        justify-self: start;
    }
    .list-rate_item .progress {
        justify-self: end;
        margin-right: 8px;
    }
    .list-rate_item .name {
        white-space: normal;
    }
    .list-rate_item::after {
        margin-right: 4px;
    }

    .figures {
        background: linear-gradient(#FFF 90px, var(--indigo-navy) 90px);
    }
    .figures-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        padding: 46px 20px;
    }
    #home-reviews .cards {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
    }
    #how_is_work .steps,
    #rate_info .wrap-steps,
    #home-about_us .columns {
        grid-template-columns: minmax(0, 1fr);
    }

    #company-preview .inner {
        flex-direction: column;
        gap: 24px;
        padding-top: 34px;
    }
    #company-preview .inner .left {
        flex-basis: auto;
        width: 100%;
    }
    #company-preview .inner .left .gallery .gallery-swiper {
        height: 240px;
    }
    #company-preview .inner .right {
        flex-basis: auto;
        padding-left: 0;
    }
    #company-detail .right {
        margin-top: 30px;
    }

    #blog-listing .blog-card {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "cover"
            "name"
            "excerpt"
            "meta";
    }
    #blog-listing .blog-card .cover {
        height: 220px;
        margin-bottom: 20px;
    }
    #blog-listing .blog-card .excerpt {
        margin-top: 16px;
    }
    #blog-listing .blog-card .meta {
        margin-top: 18px;
    }

    #partnership .box {
        padding: 40px 24px;
        background-size: 300px auto;
    }
    #partnership .box .title {
        font-size: 32px;
        line-height: 40px;
    }

    /* The base pulls the phone menu out by the columns' side padding. */
    footer.indigo-footer .logo {
        flex-basis: 100%;
        margin: 0 0 30px;
    }
    footer.indigo-footer .row .menu {
        order: 2;
        flex-basis: 100%;
        margin: 0;
        padding-top: 0;
    }
    footer.indigo-footer .row .menu .col {
        padding: 0 16px 0 0;
    }
    footer.indigo-footer .row .panel {
        order: 3;
        margin-top: 30px;
    }
    footer.indigo-footer .bottom {
        flex-direction: column;
    }
}

@media (max-width: 576px) {

    .container,
    .full-container {
        padding: 0 15px;
    }
    .indigo-header .bar {
        min-height: 64px;
        padding-right: 46px;
    }
    .indigo-header .logo {
        gap: 10px;
        margin-right: 12px;
    }
    .indigo-header .logo img {
        width: 34px;
        height: 34px;
    }
    .indigo-header .logo .name {
        font-size: 19px;
        line-height: 24px;
    }
    header.indigo-header .panel {
        gap: 10px;
    }
    header.indigo-header .panel .auth .reg,
    header.indigo-header .panel .auth .login {
        font-size: 15px;
    }
    header.indigo-header .menu {
        top: 13px;
        right: 15px;
    }

    #home-preview .hero,
    #catalog-preview .container > .row {
        padding-top: 34px;
        padding-bottom: 28px;
    }
    #home-preview .hero-title,
    #catalog-preview .left .title,
    #blog-listing .title {
        font-size: 30px;
        line-height: 38px;
    }
    #home-preview .hero-text,
    #catalog-preview .left .description {
        font-size: 15px;
        line-height: 22px;
    }
    #home-preview .search-form,
    #catalog-preview .left .search-form {
        flex-direction: column;
        gap: 10px;
        margin-top: 24px;
    }
    #home-preview .search-form .btn,
    #catalog-preview .left .search-form .btn {
        width: 100%;
    }
    #catalog-preview .left .search-form .search-clear {
        position: absolute;
        top: 22px;
        right: 12px;
        margin: 0;
        transform: translateY(-50%);
    }

    .list-rate_item {
        grid-template-columns: 30px 52px repeat(3, minmax(0, 1fr)) 24px;
        padding: 18px 12px 16px 16px;
    }
    .list-rate_item::before {
        font-size: 16px;
    }
    .list-rate_item .mono {
        width: 52px;
        height: 40px;
        font-size: 22px;
    }
    .list-rate_item .name {
        font-size: 16px;
        line-height: 20px;
    }
    .list-rate_item .star-rating__value,
    .list-rate_item .progress .value {
        font-size: 17px;
    }

    .figures-card {
        padding: 40px 16px;
    }
    .figures .value {
        font-size: 52px;
        line-height: 62px;
    }
    #home-reviews .title,
    .fresh .title,
    #how_is_work .title,
    #home-about_us .title,
    #company-reviews .title {
        font-size: 28px;
        line-height: 36px;
    }
    /* 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: 8px 12px;
    }
    #home-reviews .band {
        padding: 50px 0 140px;
    }
    #home-reviews .review {
        padding: 20px 16px;
    }
    #home-reviews .review .head .mono {
        width: 72px;
        height: 60px;
        font-size: 32px;
    }
    #home-reviews .review .text {
        font-size: 15px;
        line-height: 22px;
    }
    .fresh .tiles {
        gap: 16px;
    }
    .fresh .tile-plate {
        height: 140px;
    }
    .fresh .tile-plate .mono {
        width: 84px;
        height: 84px;
        font-size: 48px;
    }
    #how_is_work .step-title {
        font-size: 20px;
        line-height: 26px;
    }
    #rate_info .wrap-title .title,
    section#rating .title.full-title,
    #company-detail .left .title {
        font-size: 28px;
        line-height: 36px;
    }
    #home-about_us .column > .lead {
        font-size: 16px;
        line-height: 24px;
    }

    #company-preview .inner .right .info-box .inner-info-box .part-left .name {
        font-size: 32px;
        line-height: 40px;
    }
    #company-preview .inner .left .gallery .gallery-swiper {
        height: 200px;
    }
    #company-reviews .list .review-card {
        grid-template-areas:
            "name name"
            "date date"
            "stars stars"
            "type type"
            "text text"
            "photos photos"
            "reply reply"
            "bottom bottom";
        padding: 20px 16px;
    }
    #company-reviews .review-card .name {
        font-size: 20px;
        line-height: 26px;
    }
    #company-reviews .review-card .head .created_at {
        margin-top: 4px;
    }
    #company-reviews .review-card .text {
        font-size: 15px;
        line-height: 22px;
    }

    #blog-listing .blog-card .name {
        font-size: 22px;
        line-height: 28px;
    }

    .indigo-footer .actions {
        flex-direction: column;
        width: 100%;
    }
    footer.indigo-footer .row .panel {
        flex-direction: column;
        align-items: flex-start;
    }
    footer.indigo-footer .row .panel .locale {
        margin-left: 0;
    }

    #not-found.indigo-404 .code {
        font-size: 110px;
    }
    #not-found.indigo-404 .title {
        font-size: 28px;
        line-height: 36px;
    }
    #create-review-preview .box .left .title,
    #cooperation-statement-preview .box .left .title {
        font-size: 30px;
        line-height: 38px;
    }
}

@media (max-width: 320px) {

    #not-found.indigo-404 .code {
        font-size: 84px;
    }
}

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