/*
 * Podium (docs/multisite.md §Темы): a classic rating site — white pages under
 * a violet photo band, slate type, the companies as a table with green
 * striped rating bars, orange stars, a green action, Montserrat, square-ish
 * 4px shapes.
 *
 * 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 band (header, home and catalog heroes), the theme's own
 * home page (resources/themes/podium/views/pages/home), the company rows as a
 * table, the company page, 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.
 */

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

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    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 900;
    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 900;
    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 900;
    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: #4A5A69;
    --color-text-alt: #5E6C79;
    --color-text-secondary: #FFF;
    --color-text-link: #6B7783;
    --color-text-third: #4777A6;

    --color-bg: #FFFFFF;
    --color-bg-alt: #FFF;
    --color-bg-secondary: #F0A109;
    --color-bg-third: #EEF4FA;
    --color-bg-drive: #DCE6EE;
    --color-bg-effect: #FFFAEF;
    --color-bg-fourth: #4777A6;
    --color-bg-fifth: #585E8B;
    --color-bg-sixth: #6E74A0;
    --color-bg-empty: #FFFAEF;

    --color-border: #E3E9EE;
    --color-border-secondary: #C6DAE3;
    --color-border-alt: #FFF;

    --color-btn: #69A324;

    --progress-primary: #8CC234;
    --progress-bg: #ECECEC;

    --color-icon-star: #F0A109;
    --color-icon-primary: #4777A6;

    --color-danger: #E0463A;
    --color-success: #5E9A1E;
    --color-failure: #D23B30;

    --color-star-empty: #DADFE3;
    --skeleton-bg: #EEF1F4;

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

    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 6px;
    --radius-2xl: 8px;
    --radius-3xl: 4px;
    --radius-pill: 999px;

    --shadow-card: 0 6px 18px rgba(74, 90, 105, 0.09);
    --shadow-popover: 0 8px 24px rgba(74, 90, 105, 0.12);
    --shadow-overlay: 0 12px 32px 0 rgba(74, 90, 105, 0.14);

    /* No page glow: the pages are plain white under the band. */
    --glow-rgb: 255, 255, 255;

    /* Podium's own. The band is the photo under a violet veil; the same veil
       fills the big figures. */
    --podium-green: #8CC234;
    /* Buttons carry white text, so their green is a shade deeper than the
       bars' (3:1 against white). */
    --podium-button: #69A324;
    --podium-button-hover: #74B02B;
    --podium-orange: #F0A209;
    --podium-violet: #585E8B;
    --podium-sky: #F5FCFF;
    --podium-cream: #FFFAEF;
    --podium-cream-deep: #F1ECDF;
    --podium-row: #F8F8F8;
    --podium-rank: #E7EAED;
    --podium-veil: linear-gradient(180deg, rgba(104, 120, 192, 0.78) 0%, rgba(94, 106, 170, 0.80) 55%, rgba(74, 82, 136, 0.90) 100%);
    --podium-stripes: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
}

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

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

/* ------------------------------------------------------------- the band */

/* The violet photo band: the header carries it on inner pages; on the home
   and catalog pages the hero section does, and the header lies on it. */
.podium-header,
#home-preview,
#catalog-preview {
    background-color: #5D6596;
    background-image: var(--podium-veil), url('../img/band.jpg');
    background-size: cover;
    background-position: center 38%;
}
/* A browser without image-set() (Safari before 17) would void this
   declaration at computed time, veil and all — it holds a var(), so the
   JPEG one above could not stand in for it: it comes only where it is
   understood. */
@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
    .podium-header,
    #home-preview,
    #catalog-preview {
        background-image: var(--podium-veil), image-set(url('../img/band.webp') type('image/webp'), url('../img/band.jpg') type('image/jpeg'));
    }
}
#home-preview .podium-header,
#catalog-preview .podium-header {
    background: none;
}

/* Words set on a tinted plate — [[…]] in the theme's headings. */
.podium-header .slogan .mark,
#home-preview .hero-title .mark {
    padding: 0 10px;
    background: rgba(240, 161, 9, 0.24);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.podium-header .slogan .mark:nth-of-type(2n),
#home-preview .hero-title .mark:nth-of-type(2n) {
    background: rgba(140, 194, 52, 0.26);
}

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

header.podium-header {
    position: relative;
    z-index: 5;
}
header.podium-header .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}
header.podium-header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 24px;
    text-decoration: none;
    flex-shrink: 0;
}
header.podium-header .logo img {
    width: 44px;
    height: 44px;
}
.podium-header .wordmark,
.podium-footer .wordmark {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.podium-header .wordmark .name,
.podium-footer .wordmark .name {
    color: #FFF;
    font-size: 26px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.podium-header .wordmark .tagline,
.podium-footer .wordmark .tagline {
    color: rgba(255, 255, 255, 0.78);
    font-size: 9px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0.14em;
    margin-top: 2px;
    white-space: nowrap;
}
header.podium-header .menu .item {
    margin-right: 2px;
}
header.podium-header .menu .item > a {
    display: inline-flex;
    align-items: center;
    padding: 14px 18px;
    border-radius: 4px;
    color: #FFF;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    transition: background-color 0.25s ease;
}
header.podium-header .menu .item > a:hover {
    background-color: var(--podium-button);
}
header.podium-header .menu .item.active a {
    border: 0;
    background-color: rgba(255, 255, 255, 0.14);
}
header.podium-header .menu .item.active a:hover {
    background-color: var(--podium-button);
}
header.podium-header .menu .item-home .icon {
    font-size: 16px;
    margin-right: 9px;
}
header.podium-header .menu .mobile-button {
    color: #FFF;
}
header.podium-header .panel {
    margin-left: 24px;
}
header.podium-header .panel .auth {
    margin-right: 20px;
}
header.podium-header .panel .auth .reg {
    color: #FFF;
    font-size: 15px;
}
header.podium-header .panel .auth .login {
    padding: 11px 20px;
    border-radius: 4px;
    background: var(--podium-button);
    color: #FFF;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
header.podium-header .panel .auth .login:hover {
    background: var(--podium-button-hover);
}
header.podium-header .locale .lang,
header.podium-header .locale .lang::after {
    color: #FFF;
}
header.podium-header .locale .lang.active {
    color: rgba(255, 255, 255, 0.55);
}

/* The band's slogan on inner pages. */
header.podium-header .slogan {
    color: #FFF;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    padding: 64px 0 76px;
}
#home-preview .podium-header .slogan,
#catalog-preview .podium-header .slogan,
#not-found .podium-header .slogan {
    display: none;
}

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

#home-preview {
    overflow: visible;
    padding-bottom: 0;
}
#home-preview header {
    margin-bottom: 0;
}
#home-preview .hero {
    padding-top: 120px;
    padding-bottom: 140px;
    text-align: center;
}
#home-preview .hero-title {
    max-width: 860px;
    margin: 0 auto;
    color: #FFF;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.28;
}

/* The search on the band: a white field and a square orange button — the
   home hero's and the catalog hero's. */
#home-preview .search-form,
#catalog-preview .left .search-form {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 701px;
    margin: 50px auto 0;
}
#home-preview .search-form .form-control,
#catalog-preview .left .search-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 64px;
    margin: 0;
    padding: 0 25px;
    border: 0;
    border-radius: 4px 0 0 4px;
    color: var(--color-text);
    font-size: 16px;
    line-height: 24px;
}
#home-preview .search-form .form-control::placeholder,
#catalog-preview .left .search-form input::placeholder {
    color: #9AA5AF;
}
#home-preview .search-form .btn,
#catalog-preview .left .search-form .btn {
    position: static;
    transform: none;
    flex: 0 0 auto;
    height: 64px;
    min-width: 65px;
    padding: 0 22px;
    border-radius: 0 4px 4px 0;
    background: var(--podium-orange);
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    opacity: 1;
    transition: background-color 0.2s ease;
}
#home-preview .search-form .btn .icon {
    font-size: 24px;
}
#home-preview .search-form .btn:disabled,
#catalog-preview .left .search-form .btn:disabled {
    opacity: 1;
    cursor: default;
}
#home-preview .search-form .btn:not(:disabled):hover,
#catalog-preview .left .search-form .btn:not(:disabled):hover {
    background: var(--podium-button);
}

/* ---------------------------------------------------------- home: stats */

/* Three figures on a pale strip that overlaps the band's lower edge; the
   figures are filled with the band's own photo under its veil. */
.podium-stats {
    position: relative;
    z-index: 2;
    margin-top: -25px;
}
.podium-stats .list {
    display: flex;
    margin: 0;
    padding: 27px 0 46px;
    list-style: none;
    border-radius: 4px;
    background: #F8FCFE;
}
.podium-stats .item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    text-align: center;
}
.podium-stats .item + .item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 56%;
    width: 2px;
    height: 101px;
    background: #DBE7F1;
    transform: translateY(-50%);
}
.podium-stats .value,
#not-found.podium-404 .code {
    font-size: 100px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    background-image: linear-gradient(180deg, rgba(112, 122, 186, 0.78), rgba(70, 76, 126, 0.9)), url('../img/band.jpg');
    background-image: linear-gradient(180deg, rgba(112, 122, 186, 0.78), rgba(70, 76, 126, 0.9)), image-set(url('../img/band.webp') type('image/webp'), url('../img/band.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.podium-stats .label {
    margin-top: 4px;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
}

/* -------------------------------------------------------- section titles */

section#rating .title,
#how_is_work .title,
#home-reviews .title,
#rate_info .wrap-title .title,
#home-about_us .title,
#partnership .box .title,
#company-detail .left .title,
#company-reviews .title,
#not-found .title {
    color: var(--color-text);
    font-weight: 700;
    letter-spacing: -0.005em;
}
section#rating .title,
#how_is_work .title,
#home-reviews .title {
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 40px;
    line-height: 1.25;
    text-align: center;
}

/* Section badges: no pill — a short green rule and small caps. */
.topic {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--color-text-link);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.topic::before {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: var(--podium-green);
}

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

/* Green, square-ish, bold — 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: 4px;
    background: var(--podium-button);
    color: #FFF;
    font-weight: 700;
    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(--podium-button-hover);
}

/* Dashed links: "all companies", "how it is counted", "show more". */
section#rating .table-foot .dashed,
section#rating .prompt,
section#rating .get_more,
#company-reviews .get_more {
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
section#rating .table-foot .dashed:hover,
section#rating .prompt:hover,
section#rating .get_more:hover,
#company-reviews .get_more:hover {
    border-bottom-style: solid;
}

/* ------------------------------------------------------- the rating table */

section#rating {
    padding: 70px 0 40px;
    overflow: visible;
}
section#rating .title {
    padding-bottom: 49px;
}
section#rating .list-rate {
    padding-top: 0;
}

/* Rows of the shared company card laid out as table columns: rank, name,
   average with stars, reviews, rating bar. The column heads (home) use the
   same grid, shifted past the rank and the name. */
.list-rate_item,
section#rating .table-head {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 150px 110px 230px;
    column-gap: 24px;
    align-items: center;
}
section#rating .table-head {
    padding: 0 40px 14px 25px;
    color: #888;
    font-size: 16px;
    text-align: center;
}
section#rating .table-head .col-average {
    grid-column: 3;
}
section#rating .table-head .col-reviews {
    grid-column: 4;
}
section#rating .table-head .col-rating {
    grid-column: 5;
}
.list-rate_item {
    grid-template-areas: "rank name rate comment progress";
    margin-top: 0;
    padding: 17px 40px 17px 25px;
    border: 0;
    border-radius: 4px;
    background-color: transparent;
    transition: background-color 0.15s ease;
}
.list-rate_item:nth-child(odd) {
    background-color: var(--podium-row);
}
.list-rate_item[data-rank="1"] {
    background-color: var(--podium-cream);
}
.list-rate_item:hover {
    box-shadow: none;
    background-color: #EFF4F8;
}
.list-rate_item::before,
.list-rate_item--top::before {
    grid-area: rank;
    content: attr(data-rank);
    width: 28px;
    height: 28px;
    flex-basis: auto;
    border: 0;
    border-radius: 4px;
    background-color: var(--podium-rank);
    color: #1E2830;
    font-family: var(--font-sans) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}
.list-rate_item[data-rank="1"]::before {
    background-color: var(--podium-cream-deep);
}
.list-rate_item .name {
    grid-area: name;
    padding: 0;
    margin: 0;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-decoration: none;
}
.list-rate_item:hover .name {
    text-decoration: underline;
}
.list-rate_item .rate {
    grid-area: rate;
    display: flex;
    justify-content: center;
    padding: 0;
}
.list-rate_item .star-rating {
    gap: 8px;
}
.list-rate_item .star-rating__value {
    color: var(--color-text);
    font-size: 20px;
    font-weight: 700;
}
.list-rate_item .star-rating__stars,
.list-rate_item .star-rating__star::before,
.list-rate_item .star-rating__star--half::after {
    font-size: 16px;
}
.list-rate_item .star-rating__star--half::after {
    top: 0;
}
/* The count is underlined like a link, the bubble before it is not: an
   absolutely placed child takes no part in its parent's underline. The
   bubble is the outline cut of the same glyph. */
.list-rate_item .comment {
    grid-area: comment;
    justify-self: center;
    display: block;
    position: relative;
    padding: 0 0 0 26px;
    color: var(--color-text-third);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: underline;
}
.list-rate_item .comment .icon {
    position: absolute;
    left: 0;
    top: 50%;
    margin: 0;
    color: var(--color-text);
    font-family: 'heroicons-outline' !important;
    font-size: 17px;
    transform: translateY(-50%);
}
.list-rate_item .progress {
    grid-area: progress;
    position: relative;
    display: block;
    padding: 0;
}
.list-rate_item .progress .progress-bar {
    width: 100%;
}
.list-rate_item .progress-bar__track {
    height: 23px;
    border-radius: 4px;
    background: var(--progress-bg);
}
/* The score sits inside the green, so the fill never gets narrower than
   the figure it carries. */
.list-rate_item .progress-bar__fill {
    min-width: 36px;
    border-radius: 4px;
    background-color: #97D335;
    background-image: var(--podium-stripes);
}
/* …except a score of nothing, which shows no green at all (app.js writes the
   fill's width inline) and its 0 on the grey track. */
.list-rate_item .progress-bar__fill[style*="width: 0%"] {
    min-width: 0;
}
.list-rate_item .progress:has(.progress-bar__fill[style*="width: 0%"]) .value {
    color: var(--color-text-link);
}
.list-rate_item .progress .value {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 0;
    margin: 0;
    padding-left: 10px;
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 23px;
    text-align: left;
    pointer-events: none;
}
/* 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: 4px;
    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(--color-text-third);
    outline-offset: 2px;
}

section#rating .table-foot {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 36px;
    margin-top: 36px;
}
section#rating .table-foot .prompt {
    display: inline-block;
    margin: 0;
}
/* The catalog's own "how is it counted" link sits above its table, at the
   right end, under a title that keeps less air below. */
section#rating .title.full-title {
    padding-bottom: 26px;
}
section#rating > .container > .prompt {
    margin: 0 0 24px auto;
    color: var(--color-text-third);
}
section#rating .get_more {
    margin-top: 36px;
}

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

#rate_info {
    padding: 50px 0 60px;
}
#rate_info > .container > .topic {
    margin: 0 auto;
}
#rate_info .wrap-title {
    display: block;
    max-width: 820px;
    margin: 14px auto 0;
    text-align: center;
}
#rate_info .wrap-title .title {
    font-size: 36px;
    line-height: 1.25;
}
#rate_info .wrap-title .description {
    margin-top: 16px;
    padding: 0;
    color: var(--color-text-alt);
}
#rate_info .wrap-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 50px;
    max-width: 960px;
    margin: 44px auto 0;
}
#rate_info .wrap-steps .step {
    align-items: flex-start;
    margin: 0;
}
#rate_info .wrap-steps .step .icon {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 4px;
    background-color: var(--podium-cream-deep);
    color: #1E2830;
    font-size: 16px;
    font-weight: 600;
    line-height: 34px;
}
#rate_info .wrap-steps .step .inner {
    flex-basis: auto;
    padding-left: 16px;
}
#rate_info .wrap-steps .step .inner .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 34px;
}
#rate_info .wrap-steps .step .inner .description {
    margin-top: 4px;
    color: var(--color-text-alt);
    font-size: 15px;
    line-height: 1.6;
}

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

#how_is_work {
    padding: 69px 0 87px;
    background: #FFF url('../img/facets.svg') center / cover no-repeat;
}
#how_is_work > .container {
    max-width: calc(1200px + 40px);
}
#how_is_work .columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 60px;
    padding-top: 50px;
}
#how_is_work .column-title {
    color: var(--color-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
#how_is_work .column-title::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin: 18px 0;
    background: var(--podium-green);
}
#how_is_work .column-text {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.72;
}
#how_is_work .button {
    margin-top: 46px;
    padding: 0 40px;
    height: 55px;
    align-items: center;
    font-size: 15px;
}

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

#home-reviews {
    padding: 20px 0 60px;
}
#home-reviews::before {
    display: none;
}
#home-reviews .container {
    max-width: calc(1200px + 40px);
}
#home-reviews .box {
    padding: 61px 16px 40px;
    border-radius: 4px;
    background: var(--podium-sky);
}
#home-reviews .reviews {
    display: block;
    width: auto;
    max-width: 822px;
    margin: 0 auto;
    padding-top: 52px;
}
#home-reviews .review {
    margin-bottom: 44px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--color-border-secondary);
}
#home-reviews .review:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}
#home-reviews .review .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 13px;
    padding-bottom: 14px;
}
#home-reviews .review .author {
    color: var(--color-text);
    font-size: 18px;
    font-weight: 700;
}
#home-reviews .review .date {
    color: #8A949D;
    font-size: 16px;
}
#home-reviews .review .company {
    margin-left: auto;
    color: #5A7EA0;
    font-weight: 600;
    text-align: right;
    text-decoration: none;
}
#home-reviews .review .company:hover {
    text-decoration: underline;
}
#home-reviews .review .work-type {
    margin: -6px 0 8px;
    color: var(--color-text-link);
    font-size: 13px;
}
#home-reviews .review .text {
    color: var(--color-text);
    line-height: 1.5;
    overflow-wrap: break-word;
}
#home-reviews .star-rating__stars,
#home-reviews .star-rating__star::before,
#home-reviews .star-rating__star--half::after {
    font-size: 17px;
}
#home-reviews .star-rating__star--half::after {
    top: 0;
}

/* ------------------------------------------------------------- home: about */

#home-about_us {
    padding: 60px 0 40px;
}
#home-about_us .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 60px;
    align-items: center;
    max-width: calc(1200px + 40px);
}
#home-about_us .title {
    padding: 0 0 24px;
    font-size: 36px;
    line-height: 1.25;
    text-align: left;
}
#home-about_us .description {
    max-width: none;
    margin: 0;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.65;
    text-align: left;
}
#home-about_us .points {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
#home-about_us .point {
    position: relative;
    margin-top: 12px;
    padding-left: 30px;
    line-height: 1.5;
}
#home-about_us .point::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 11px;
    width: 10px;
    height: 3px;
    background: var(--podium-green);
}
#home-about_us .point .label {
    font-weight: 700;
}
#home-about_us .point .label::after {
    content: " —";
}
#home-about_us .more {
    display: inline-block;
    margin-top: 30px;
    color: var(--podium-orange);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
#home-about_us .more:hover {
    border-bottom-style: solid;
}
#home-about_us .image img {
    display: block;
    width: 100%;
    border-radius: 6px;
}

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

#partnership {
    padding: 40px 0 80px;
}
#partnership .box {
    padding: 56px 60px;
    border: 1px solid var(--podium-cream-deep);
    border-radius: 4px;
    background-color: var(--podium-cream);
}
#partnership .box .topic {
    padding: 0;
    background: none;
    color: var(--color-text-link);
}
#partnership .box .title {
    font-size: 36px;
    line-height: 1.25;
}
#partnership .box .description {
    color: var(--color-text-alt);
}
#partnership .box .list-items .item .icon {
    color: var(--podium-orange);
}
#partnership .box .list-items .item .label {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}
#partnership .box .start_cooperation {
    padding: 16px 36px;
    font-size: 15px;
}

/* The other pages' heroes: sentence case, the theme's weight and size. */
#create-review-preview .box .left .title,
#cooperation-statement-preview .box .left .title {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
}

/* The company owners' invitation (partnership page): the same square, quiet
   box as the rest, its badge like every other badge. */
#claim-invite .box {
    border-radius: 4px;
}
#claim-invite .topic {
    padding: 0;
    background: none;
    color: var(--color-text-link);
}
#claim-invite .steps .num {
    border-radius: 4px;
    background-color: var(--podium-cream-deep);
    color: #1E2830;
}

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

#catalog-preview {
    overflow: visible;
}
#catalog-preview .container > .row {
    display: block;
    padding: 70px 0 96px;
}
#catalog-preview .left {
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
#catalog-preview .left .topic,
#catalog-preview .right {
    display: none;
}
#catalog-preview .left .title {
    margin: 0;
    color: #FFF;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}
#catalog-preview .left .description {
    max-width: 720px;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    line-height: 1.6;
}
#catalog-preview .left .search-form {
    margin-top: 40px;
}
#catalog-preview .left .search-form input {
    padding-right: 52px;
}
#catalog-preview .left .search-form .search-clear {
    right: calc(var(--podium-search-btn, 110px) + 10px);
}
#catalog-preview .left .search-form .btn {
    min-width: 110px;
}

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

#company-preview {
    overflow: visible;
}
#company-preview .inner {
    align-items: center;
    padding: 50px 0;
}
#company-preview .inner .left .gallery .gallery-swiper img,
#company-preview .inner .left .gallery-swiper-bar img {
    border-radius: 4px;
}
#company-preview .inner .right .info-box {
    padding: 10px;
    border: 0;
    border-radius: 4px;
    background-color: #F3F3F3;
}
#company-preview .inner .right .info-box .topic {
    display: inline-flex;
    margin: 14px 0 0 14px;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--podium-orange);
    color: #FFF;
    letter-spacing: 0.06em;
}
#company-preview .inner .right .info-box .topic::before {
    display: none;
}
#company-preview .inner .right .info-box .inner-info-box {
    margin-top: 10px;
    padding: 30px;
    border-radius: 4px;
    background: #FFF;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .name {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .rate::before {
    border: 0;
    border-radius: 4px;
    background-color: var(--podium-cream);
    color: var(--podium-orange);
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .btn {
    padding: 14px 24px;
    font-size: 15px;
}
#company-preview .inner .right .info-box .inner-info-box .part-left .panel .amount_reviews {
    color: var(--color-text-third);
}
#company-preview .inner .right .info-box .drive {
    background-color: var(--color-bg-drive);
}
#company-preview .inner .right .info-box .part-right .rate .mark {
    font-weight: 700;
}

#company-detail .left .title {
    font-size: 40px;
    line-height: 1.25;
}
#company-detail .left .description {
    color: var(--color-text);
    line-height: 1.6;
}
#company-detail .left .description ul {
    padding: 0;
    list-style: none;
}
#company-detail .left .description ul > li {
    position: relative;
    margin-top: 12px;
    padding-left: 30px;
}
#company-detail .left .description ul > li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 11px;
    width: 8px;
    height: 3px;
    background: var(--podium-green);
}
#company-detail .left .description ol {
    padding: 0;
    list-style: none;
    counter-reset: podium-step;
}
#company-detail .left .description ol > li {
    position: relative;
    margin-top: 16px;
    padding-left: 44px;
    counter-increment: podium-step;
}
#company-detail .left .description ol > li::before {
    content: counter(podium-step);
    position: absolute;
    left: 0;
    top: -2px;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--podium-cream-deep);
    color: #1E2830;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
}
#company-detail .right .label {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}
#company-detail .right .site a {
    color: var(--color-text-third);
    text-decoration: underline;
}
#company-detail .right .site a .icon,
#company-detail .right .contacts-box .item .icon {
    color: #B5BCC2;
}
#company-detail .right .contacts-box .item {
    color: var(--color-text);
}
#company-detail .right .owner-promo {
    border: 1px solid var(--podium-cream-deep);
    border-radius: 4px;
    background: var(--podium-cream);
}
#company-detail .right .owner-promo .action + .action {
    border-top-color: var(--podium-cream-deep);
}
#company-detail .right .top-list .topic {
    margin: 0 auto;
    color: var(--color-text);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
#company-detail .right .top-list .topic::before {
    display: none;
}
#company-detail .right .top-list .list {
    padding-top: 20px;
}
#company-detail .right .top-list .list .item {
    margin-top: 0;
    padding: 17px 20px;
    border: 0;
    border-radius: 4px;
    background-color: transparent;
}
#company-detail .right .top-list .list .item:nth-child(odd) {
    background-color: var(--podium-row);
}
#company-detail .right .top-list .list .item:first-child {
    background-color: var(--podium-cream);
}
#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 .name::before,
#company-detail .right .top-list .list .item:nth-child(-n+3) .name::before {
    content: counter(rate);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background-color: var(--podium-rank);
    color: #1E2830;
    font-family: var(--font-sans) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    margin-right: 14px;
}
#company-detail .right .top-list .list .item:first-child .name::before {
    background-color: var(--podium-cream-deep);
}
#company-detail .right .top-list .list .item .progress-bar__track {
    height: 8px;
    border-radius: 4px;
}
#company-detail .right .top-list .list .item .progress-bar__fill {
    border-radius: 4px;
    background-color: #97D335;
}

/* The reviews of a company: one pale panel, the reviews as a column of
   entries divided by hairlines — the name, the stars and the date on one
   line, the kind of work at its right end. */
#company-reviews {
    padding: 30px 0 80px;
}
#company-reviews .container {
    max-width: calc(1200px + 40px);
}
#company-reviews .reviews-list {
    padding: 61px 16px 40px;
    border-radius: 4px;
    background: var(--podium-sky);
}
#company-reviews .title {
    max-width: 900px;
    font-size: 36px;
    line-height: 1.25;
}
/* Five pills are wider than a 320px phone: they wrap, centred, spaced by
   gaps instead of the base's side margins. */
#company-reviews .filters .filter-stars {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
#company-reviews .filters .filter-stars .filter-stars-item {
    margin: 0;
    border-color: var(--color-border-secondary);
    border-radius: 4px;
}
#company-reviews .filters .filter-stars .filter-stars-item.active {
    border-color: var(--color-text-third);
    background: var(--color-text-third);
}
#company-reviews .list,
#company-reviews .no-reviews,
#company-reviews #reviews-pagination {
    max-width: 822px;
    margin-left: auto;
    margin-right: auto;
}
#company-reviews .list {
    margin-top: 44px;
}
#company-reviews .list .review-card {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    grid-template-areas:
        "name rate date type"
        "text text text text"
        "photos photos photos photos"
        "reply reply reply reply"
        "bottom bottom bottom bottom";
    align-items: center;
    column-gap: 13px;
    margin: 0 0 44px;
    padding: 0 0 34px;
    border-bottom: 1px solid var(--color-border-secondary);
    border-radius: 0;
    background: none;
}
#company-reviews .list .review-card:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}
#company-reviews .review-card .head {
    display: contents;
}
#company-reviews .review-card .head .rate {
    grid-area: rate;
}
#company-reviews .review-card .head .created_at {
    grid-area: date;
    color: #8A949D;
    font-size: 16px;
}
#company-reviews .review-card .name {
    grid-area: name;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}
#company-reviews .review-card .work-type {
    grid-area: type;
    justify-self: end;
    margin: 0;
    padding: 0;
    background: none;
    color: #5A7EA0;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
}
#company-reviews .review-card .text {
    grid-area: text;
    margin-top: 14px;
    line-height: 1.5;
}
#company-reviews .review-card .photos {
    grid-area: photos;
}
#company-reviews .review-card .company-reply {
    grid-area: reply;
}
#company-reviews .review-card .bottom_panel {
    grid-area: bottom;
    margin-top: 14px;
    font-size: 13px;
}
.review-card .head .rate .star-rating__value {
    font-size: 14px;
}
.review-card .company-reply {
    border-left-color: var(--podium-green);
    border-radius: 0 4px 4px 0;
    background: #FFF;
}

/* 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(--podium-orange);
}

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

footer.podium-footer {
    padding: 40px 0 0;
    background: var(--podium-violet);
}
footer.podium-footer .row {
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
footer.podium-footer .row .menu .col {
    padding: 0 64px 0 0;
}
footer.podium-footer .row .menu .col .label {
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
}
footer.podium-footer .row .menu .col .item-menu {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 400;
}
footer.podium-footer .row .menu .col .item-menu:hover {
    color: #FFF;
    text-decoration: underline;
}
footer.podium-footer .row .panel .auth .reg {
    color: #FFF;
}
footer.podium-footer .row .panel .auth .login {
    border-radius: 4px;
    background: var(--podium-button);
    color: #FFF;
    font-weight: 600;
}
footer.podium-footer .row .locale .lang.active,
footer.podium-footer .col-locale .locale .lang.active {
    color: rgba(255, 255, 255, 0.55);
}
footer.podium-footer .bottom {
    display: flex;
    align-items: center;
    padding: 22px 0;
}
footer.podium-footer .bottom .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 30px;
    padding-right: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
}
footer.podium-footer .bottom .logo img {
    width: 40px;
    height: 40px;
}
footer.podium-footer .bottom .wordmark .name {
    font-size: 22px;
    line-height: 26px;
}
footer.podium-footer .legal .copyright {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 18px;
    text-align: left;
}
footer.podium-footer .legal .domain {
    color: #FFF;
    font-size: 15px;
    line-height: 22px;
}

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

#not-found.podium-404 .container {
    padding-top: 0;
    padding-bottom: 0;
}
#not-found.podium-404 .box {
    padding: 70px 0 100px;
    text-align: center;
}
#not-found.podium-404 .code {
    font-size: 160px;
    line-height: 1;
}
#not-found.podium-404 .title {
    margin-top: 18px;
    font-size: 32px;
    line-height: 1.25;
}
#not-found.podium-404 .text {
    max-width: 560px;
    margin: 12px auto 0;
    color: var(--color-text-alt);
}
#not-found.podium-404 .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 28px;
    margin-top: 32px;
}
#not-found.podium-404 .btn {
    padding: 15px 34px;
    font-size: 15px;
}
#not-found.podium-404 .catalog-link {
    color: var(--color-text);
    font-size: 16px;
    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;
}

/* ------------------------------------------------------------ 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,
#partnership .box .title,
#company-detail .right .site a,
#company-detail .right .contacts-box .item {
    overflow-wrap: anywhere;
}

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

/* The bar holds the lockup, six entries (a company owner's seventh) and the
   panel down to 1022px, where the base drops the menu into a dropdown: the
   tagline goes first, then the entries tighten, then "Home" keeps its icon
   only — the logo is a link home too. */
@media (max-width: 1439px) {

    .podium-header .wordmark .tagline {
        display: none;
    }
}

@media (max-width: 1279px) {

    header.podium-header .menu .item > a {
        padding: 12px 12px;
        font-size: 14px;
    }
}

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

    header.podium-header .logo {
        margin-right: 16px;
    }
    header.podium-header .menu .item > a {
        padding: 12px 10px;
    }
    header.podium-header .menu .item-home > a {
        font-size: 0;
    }
    header.podium-header .menu .item-home .icon {
        margin-right: 0;
    }
    header.podium-header .panel {
        margin-left: 16px;
    }
    header.podium-header .panel .auth {
        margin-right: 12px;
    }
    .list-rate_item,
    section#rating .table-head {
        grid-template-columns: 28px minmax(0, 1fr) 140px 90px 180px;
        column-gap: 18px;
    }
    .list-rate_item,
    section#rating .table-head {
        padding-right: 24px;
    }
    footer.podium-footer .row .menu .col {
        padding-right: 40px;
    }
}

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

    /* The base drops the menu into a dropdown here: on violet, not white. */
    header.podium-header .menu .menu-box {
        border: 0;
        border-radius: 4px;
        background-color: #4C527F;
        box-shadow: var(--shadow-overlay);
    }
    header.podium-header .menu .item > a {
        padding: 12px 40px 12px 12px;
    }
    header.podium-header .menu .item-home > a {
        font-size: 14px;
    }
    header.podium-header .menu .item-home .icon {
        margin-right: 9px;
    }
    header.podium-header .menu .item > a:hover {
        font-weight: 500;
    }
    header.podium-header .menu .item.locale-panel .locale {
        border-top-color: rgba(255, 255, 255, 0.2);
    }
    header.podium-header .slogan {
        font-size: 30px;
        padding: 46px 0 56px;
    }
    #create-review-preview .box .left .title,
    #cooperation-statement-preview .box .left .title {
        font-size: 36px;
    }
    #home-preview .hero {
        padding-top: 80px;
        padding-bottom: 110px;
    }
    #home-preview .hero-title {
        font-size: 38px;
    }
    .podium-stats .value {
        font-size: 80px;
    }
    /* The base hides the rating bar of a row below this width; the table
       keeps it. */
    .list-rate_item .progress {
        display: block;
    }
    .list-rate_item,
    section#rating .table-head {
        grid-template-columns: 28px minmax(0, 1fr) 130px 70px 150px;
        column-gap: 14px;
        padding-left: 16px;
        padding-right: 16px;
    }
    #how_is_work .columns {
        gap: 30px;
    }
    #home-about_us .container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
        gap: 40px;
    }
    #company-preview .inner .right .info-box .inner-info-box {
        padding: 20px;
    }
}

@media (max-width: 768px) {

    header.podium-header .slogan {
        font-size: 22px;
        padding: 26px 0 36px;
    }
    #home-preview .hero {
        padding-top: 50px;
        padding-bottom: 80px;
    }
    #home-preview .hero-title {
        font-size: 30px;
    }
    #home-preview .search-form,
    #catalog-preview .left .search-form {
        margin-top: 34px;
    }
    #home-preview .search-form .form-control,
    #catalog-preview .left .search-form input,
    #home-preview .search-form .btn,
    #catalog-preview .left .search-form .btn {
        height: 56px;
    }
    #home-preview .search-form .form-control,
    #catalog-preview .left .search-form input {
        padding-left: 18px;
    }

    /* The figures stack, divided by hairlines. */
    .podium-stats .list {
        flex-direction: column;
        padding: 0 0 10px;
    }
    .podium-stats .item {
        max-width: 240px;
        width: 100%;
        margin: 0 auto;
        padding: 26px 0;
    }
    .podium-stats .item + .item::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        transform: none;
    }
    .podium-stats .value {
        font-size: 64px;
    }

    section#rating {
        padding-top: 50px;
    }
    section#rating .title,
    #how_is_work .title,
    #home-reviews .title {
        font-size: 28px;
    }
    section#rating .title {
        padding-bottom: 30px;
    }
    section#rating .table-head {
        display: none;
    }
    /* A row in two lines: the rank and the name, then the figures. */
    .list-rate_item {
        grid-template-columns: 28px auto auto minmax(0, 1fr);
        grid-template-areas:
            "rank name name name"
            "rate rate comment progress";
        column-gap: 12px;
        row-gap: 12px;
        padding: 14px 14px;
    }
    .list-rate_item .rate {
        justify-content: flex-start;
    }
    .list-rate_item .rate .star-rating {
        flex-direction: row;
    }
    .list-rate_item .comment {
        display: block;
    }
    .list-rate_item .name {
        white-space: normal;
    }

    #rate_info .wrap-title .title {
        font-size: 26px;
    }
    #rate_info .wrap-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin-top: 30px;
    }

    #how_is_work {
        padding: 50px 0 60px;
    }
    #how_is_work .columns {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 30px;
    }
    #how_is_work .column-text {
        font-size: 15px;
    }

    #home-reviews .box,
    #company-reviews .reviews-list {
        padding: 40px 16px 30px;
    }
    #home-reviews .reviews {
        padding-top: 32px;
    }
    #home-reviews .review .company {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    #home-about_us .container {
        grid-template-columns: minmax(0, 1fr);
    }
    #home-about_us .title {
        font-size: 28px;
    }

    #partnership .box {
        padding: 36px 20px;
    }
    #partnership .box .title {
        font-size: 26px;
    }

    #catalog-preview .container > .row {
        padding: 40px 0 60px;
    }
    #catalog-preview .left .title {
        font-size: 30px;
    }
    #catalog-preview .left .description {
        font-size: 14px;
    }

    #company-detail .left .title,
    #company-reviews .title {
        font-size: 26px;
    }
    #company-reviews .list .review-card {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "name rate date"
            "type type type"
            "text text text"
            "photos photos photos"
            "reply reply reply"
            "bottom bottom bottom";
        row-gap: 6px;
    }
    #company-reviews .review-card .work-type {
        justify-self: start;
        font-size: 14px;
    }

    /* The base pulls the phone menu out by the columns' side padding; these
       columns have none on the left. */
    footer.podium-footer .row .menu {
        flex-basis: 100%;
        margin: 0;
    }
    footer.podium-footer .row .menu .col {
        padding-right: 16px;
    }
    footer.podium-footer .bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    footer.podium-footer .bottom .logo {
        order: 0;
        flex-basis: auto;
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
    }

    #not-found.podium-404 .code {
        font-size: 110px;
    }
}

@media (max-width: 576px) {

    header.podium-header .logo img {
        width: 38px;
        height: 38px;
    }
    .podium-header .wordmark .name {
        font-size: 21px;
        line-height: 26px;
    }
    .podium-header .wordmark .tagline {
        display: none;
    }
    header.podium-header .panel .auth .reg {
        display: none;
    }
    /* The lockup, the login and the burger share 320px of a 360px phone:
       the panel's own margins go (the base hides the language switch the
       auth's right margin kept apart from), the logo's gap is enough. */
    header.podium-header .panel {
        margin-left: 0;
    }
    header.podium-header .panel .auth {
        margin-right: 0;
    }
    #home-preview .hero-title {
        font-size: 26px;
    }
    #home-preview .search-form .btn {
        min-width: 56px;
        padding: 0 16px;
    }
    #catalog-preview .left .search-form .btn {
        min-width: 0;
        padding: 0 16px;
    }
    .list-rate_item .star-rating__value {
        font-size: 18px;
    }

    /* The base pins the company 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 rating line. */
    #company-preview .inner .right .info-box {
        padding: 10px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .panel {
        position: static;
        margin-top: 18px;
    }

    /* A review's head on a phone: the name, then the stars with the date. */
    #company-reviews .list .review-card {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "name name"
            "rate date"
            "type type"
            "text text"
            "photos photos"
            "reply reply"
            "bottom bottom";
    }
    #create-review-preview .box .left .title,
    #cooperation-statement-preview .box .left .title {
        font-size: 30px;
    }
    /* The button and the count share a row while they fit. */
    #company-preview .inner .right .info-box .inner-info-box .part-left .panel {
        flex-wrap: wrap;
        gap: 10px 16px;
    }
    #company-preview .inner .right .info-box .inner-info-box .part-left .panel .amount_reviews {
        margin-left: 0;
    }
}

@media (max-width: 300px) {

    /* The lockup, the login and the burger in 240px. */
    header.podium-header .logo {
        gap: 8px;
        margin-right: 8px;
    }
    header.podium-header .logo img {
        width: 32px;
        height: 32px;
    }
    .podium-header .wordmark .name {
        font-size: 17px;
        line-height: 22px;
    }
    header.podium-header .panel .auth .login {
        padding: 9px 12px;
        font-size: 14px;
    }
    header.podium-header .menu {
        margin-left: 6px;
    }
}

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