/* Redesigned homepage (views/site/index_redesign.php, layout landing_redesign). */

:root {
    --hr-text: #222;
    --hr-muted: #717171;
    --hr-line: #e8e8e8;
    --hr-soft: #f7f7f7;
    --hr-accent: #bb344c;
    --hr-accent-dark: #a82b42;
    --hr-gutter: 32px;
    /* Neue Haas Grotesk from the Adobe Fonts kit (layouts load it), Inter if the kit is gone (6 Nov 2026) */
    --hr-font: 'neue-haas-grotesk-text', Inter, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
    --hr-font-head: 'neue-haas-grotesk-display', 'neue-haas-grotesk-text', Inter, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
body.home-redesign {
    margin: 0;
    background: #fff;
    color: var(--hr-text);
    font: 15px/1.6 var(--hr-font);
    -webkit-font-smoothing: antialiased;
}
/* resets use :where() so component classes below always win */
:where(.hr) button, :where(.hr) input, :where(.hr) select { font: inherit; color: inherit; }
:where(.hr) button { border: 0; background: none; padding: 0; cursor: pointer; }
:where(.hr) a { color: inherit; text-underline-offset: 3px; }
:where(.hr) img { max-width: 100%; }
.hr [hidden] { display: none !important; }
.hr svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hr :focus-visible { outline: 2px solid var(--hr-text); outline-offset: 2px; }

.hr-muted { color: var(--hr-muted); font-size: 13px; margin: 0; }
.hr-link { font-size: 13px; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.hr-textbutton { text-decoration: underline; font-size: 12px; }
.hr-primary {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hr-accent); color: #fff !important; border-radius: 999px;
    padding: 14px 22px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hr-primary:hover { background: var(--hr-accent-dark); }
.hr-eyebrow { font-size: 11px; letter-spacing: 1.5px; color: var(--hr-muted); margin: 0 0 6px; font-weight: 700; }

/* ---------- Header ---------- */
.hr-header {
    position: sticky; top: 0; z-index: 100;
    background: linear-gradient(180deg, #fff 65%, #fafafa 100%);
    border-bottom: 1px solid var(--hr-line);
    padding: 26px 3% 22px;
}
.hr-header__bar {
    display: grid;
    /* the categories take exactly the width their labels need, centred between logo and tools;
       the tools column grows to fit its content rather than overlapping them */
    grid-template-columns: minmax(110px, 1fr) max-content minmax(max-content, 1fr);
    grid-template-areas: "brand cats tools" "hero hero hero" "launch launch launch";
    align-items: center; column-gap: 20px; position: relative;
}
.hr-brand { grid-area: brand; display: block; width: clamp(140px, 15vw, 200px); }
.hr-brand img { display: block; width: 100%; height: auto; }

.hr-cats { grid-area: cats; display: grid; grid-template-columns: repeat(3, max-content); column-gap: clamp(14px, 2.2vw, 34px); justify-self: center; }
.hr-cat {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--hr-muted);
    border-bottom: 3px solid transparent; letter-spacing: -.2px;
}
.hr-cat:hover, .hr-cat[aria-pressed=true] { color: var(--hr-text); }
.hr-cat[aria-pressed=true] { border-bottom-color: var(--hr-text); }
/* one drawing per category (img_new/home-redesign/category-*.webp, 240px high) */
.hr-cat__art { display: block; height: 42px; }
.hr-cat__art img { display: block; height: 100%; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }

.hr-tools { grid-area: tools; justify-self: end; display: flex; align-items: center; gap: 10px; }
.hr-designers { font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 10px 12px; border-radius: 999px; }
.hr-designers:hover { background: #f2f2f2; }

.hr-hero { grid-area: hero; text-align: center; --mt: 22px; margin-top: var(--mt); contain: inline-size; }
/* .hr-hero__title: the same headline on the other pages, where it is not the page's h1 */
.hr-hero h1, .hr-hero .hr-hero__title { font-size: 34px; line-height: 1.15; letter-spacing: -1px; font-weight: 800; margin: 0 0 8px; color: var(--hr-text); max-width: none; }
.hr-hero p { font-size: 16px; color: var(--hr-muted); margin: 0 auto; max-width: 620px; }
.hr-designers-line { display: none; }
.hr-round { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f2f2f2; color: var(--hr-text); }
.hr-round:hover, .hr-round[aria-expanded=true] { background: #e6e6e6; }

/* contain: inline-size keeps the launch bar's content (e.g. a long scope name in its dropdown) from widening the
   header's columns, which would shift the logo, categories and tools when a category is picked */
.hr-launch {
    grid-area: launch; justify-self: center; contain: inline-size;
    display: flex; align-items: center; width: 87%; max-width: 1120px; height: 74px; --mt: 22px; margin-top: var(--mt); padding: 9px;
    background: #fff; border: 1px solid #dedede; border-radius: 999px;
    box-shadow: 0 12px 32px #00000012, 0 2px 5px #00000006;
}
.hr-launch__field {
    position: relative; flex: 1 1 0; min-width: 0; align-self: stretch;
    display: flex; flex-direction: column; justify-content: center;
    padding: 8px 22px; border-radius: 999px; cursor: pointer; transition: background .16s;
}
.hr-launch__field:first-child { flex: 1.2 1 0; }
.hr-launch__field--size { flex: .8 1 0; }
.hr-launch__field select:disabled { opacity: .55; cursor: default; }
.hr-launch__field.is-missing { box-shadow: inset 0 0 0 2px var(--hr-accent); }
.hr-launch__field + .hr-launch__field::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 30px; width: 1px; background: #ddd;
}
.hr-launch__field:hover { background: #f1f1f1; }
.hr-launch__field:focus-within { background: #fff; box-shadow: 0 3px 14px #00000016; }
.hr-launch__field span { font-size: 12px; font-weight: 700; line-height: 1.25; margin-bottom: 3px; }
.hr-launch__field select, .hr-launch__field input {
    width: 100%; min-width: 0; border: 0; padding: 0; margin: 0; background: transparent;
    font-size: 16px; color: var(--hr-muted); text-overflow: ellipsis; outline: none;
}
.hr-launch__go { height: 54px; margin-left: 8px; flex: none; }
.hr-short { display: none; }

.hr-launch-help { text-align: center; --mt: 13px; margin: var(--mt) 0 0; font-size: 12px; color: var(--hr-muted); }
.hr-launch-price { color: var(--hr-text); font-weight: 700; }
.hr-launch-price:not(:empty)::after, .hr-launch-proof::after, .hr-launch-reassure::after { content: ' ·'; font-weight: 400; color: var(--hr-muted); }
.hr-launch-proof { color: var(--hr-text); font-weight: 600; }
.hr-launch-help .hr-star { width: 12px; height: 12px; vertical-align: -1px; margin-right: 1px; fill: currentColor; stroke: none; }

/* compact pill, shown once the page is scrolled */
.hr-pill {
    grid-area: launch; justify-self: center; display: none; align-items: center;
    width: 100%; max-width: 430px; padding: 5px; background: #fff;
    border: 1px solid #ddd; border-radius: 999px; box-shadow: 0 5px 16px #00000016;
}
.hr-pill button { flex: 1; font-size: 14px; font-weight: 600; padding: 6px 12px; white-space: nowrap; }
.hr-pill button + button { border-left: 1px solid #ddd; }
.hr-pill .hr-pill__go { flex: 0 0 38px; height: 38px; border: 0; border-radius: 50%; background: var(--hr-accent); color: #fff; display: grid; place-items: center; padding: 0; margin-left: 5px; }
.hr-pill__go svg { width: 18px; height: 18px; }
/* single label instead of the three words on phones */
.hr-pill .hr-pill__mobile { display: none; text-align: left; padding-left: 14px; }

/*
 * Progressive shrink (home-redesign.js initHeader): the header floats above a placeholder of its full
 * height, so shrinking never moves the page. --p goes 0 -> 1 while scrolling; each folding part gets
 * its natural height in --h. At --p = 1 the header switches to the compact pill (.is-compact).
 */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.hr-header { --p: 0; --pad-top: 26px; --pad-bottom: 22px; --pad-end: 11px; --gap: 0px; }
.hr-header.is-floating {
    position: fixed; top: var(--hr-top, 0px); left: 0; right: 0;
    padding-top: calc(var(--pad-top) - (var(--pad-top) - var(--pad-end)) * var(--p));
    padding-bottom: calc(var(--pad-bottom) - (var(--pad-bottom) - var(--pad-end)) * var(--p));
}
.hr-header.is-floating .hr-header__bar { row-gap: calc(var(--gap) * (1 - var(--p))); }
.hr-header.is-floating :is(.hr-hero, .hr-cats, .hr-launch, .hr-launch-help) {
    max-height: calc(var(--h, 1000px) * (1 - var(--p)));
    opacity: calc(1 - var(--p) * 1.8);
}
.hr-header.is-floating :is(.hr-hero, .hr-launch, .hr-launch-help) { margin-top: calc(var(--mt, 0px) * (1 - var(--p))); }
.hr-header.is-floating .hr-designers { opacity: calc(1 - var(--p) * 1.8); }
/* clip only while folding, so the launch bar keeps its shadow when fully open */
.hr-header.is-moving :is(.hr-hero, .hr-cats, .hr-launch, .hr-launch-help) { overflow: hidden; }
/* animate --p when the pill opens the header (scrolling itself sets --p directly) */
.hr-header.is-animating { transition: --p .3s ease; }
.hr-header-space { pointer-events: none; }

.hr-header.is-compact { background: #fff; }
.hr-header.is-compact .hr-header__bar { grid-template-areas: "brand launch tools"; }
.hr-header.is-compact .hr-brand { width: 150px; }
.hr-header.is-compact .hr-cats,
.hr-header.is-compact .hr-hero,
.hr-header.is-compact .hr-designers,
.hr-header.is-compact .hr-launch,
.hr-header.is-compact .hr-launch-help { display: none; }
.hr-header.is-compact .hr-pill { display: flex; animation: hr-fade-in .18s ease; }
@keyframes hr-fade-in { from { opacity: 0; transform: translateY(-4px); } }

/* menu panel */
.hr-panel {
    position: absolute; right: 3%; top: calc(100% - 8px); width: 310px; max-width: calc(100% - 32px);
    background: #fff; border: 1px solid #eee; border-radius: 18px; box-shadow: 0 8px 35px #00000020; padding: 14px; z-index: 110;
}
.hr-menuitem {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px;
    font-size: 14px; text-align: left; text-decoration: none; border-radius: 8px;
}
.hr-menuitem:hover { background: var(--hr-soft); }
.hr-menuitem svg { width: 20px; height: 20px; flex: none; stroke-width: 1.6; }
.hr-menuitem--split { justify-content: space-between; }
.hr-menuitem small { display: block; font-size: 12px; color: var(--hr-muted); margin-top: 3px; line-height: 1.4; }
.hr-divider { height: 1px; background: #e5e5e5; margin: 8px; }
.hr-panel__title { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px 8px; font-size: 15px; }
.hr-panel__title button { font-size: 18px; padding: 0 6px; }
.hr-panel__label { font-size: 12px; font-weight: 700; margin: 10px 10px 6px; }
.hr-choices { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 6px; }
.hr-choices button { border: 1px solid #ddd; border-radius: 20px; padding: 5px 12px; font-size: 13px; }
.hr-choices button[aria-pressed=true] { background: var(--hr-text); border-color: var(--hr-text); color: #fff; }

/* ---------- Sections ---------- */
.hr-section { padding: 30px var(--hr-gutter); border-top: 1px solid #eee; max-width: 1600px; margin: 0 auto; }
/* "How it works" under the launch bar scrolls here; the margin keeps the title below the floating header */
#hr-how { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html:has(#hr-how) { scroll-behavior: smooth; } }
.hr-section--first { border-top: 0; }
.hr-section h2 { font-size: 23px; line-height: 1.25; letter-spacing: -.5px; margin: 0 0 7px; font-weight: 700; }
.hr-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.hr-title__actions { display: flex; align-items: center; gap: 14px; }
.hr-chip { border: 1px solid #ddd; border-radius: 25px; padding: 7px 13px; font-size: 12px; white-space: nowrap; }
.hr-note { font-size: 11px; color: var(--hr-muted); margin: 10px 0; }

/* single-row responsive carousels */
.hr-row {
    --cards: 4; display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--cards) - 1) * 18px) / var(--cards));
    gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: thin; padding: 4px 1px 12px; margin-top: 14px;
}
.hr-row > * { scroll-snap-align: start; min-width: 0; }
.hr-row--quotes, .hr-row--live { --cards: 3; }
.hr-rowcontrols { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.hr-rowcontrols button { border: 1px solid #ddd; border-radius: 50%; width: 34px; height: 34px; background: #fff; font-size: 18px; display: grid; place-items: center; }
.hr-rowcontrols button:disabled { opacity: .3; cursor: default; }

.hr-project a { text-decoration: none; display: block; }
.hr-project img { display: block; width: 100%; aspect-ratio: 1.1; object-fit: cover; border-radius: 14px; }
.hr-tag { font-size: 10px; color: var(--hr-muted); margin-top: 9px; letter-spacing: .6px; text-transform: uppercase; }
.hr-project h3 { font-size: 14px; font-weight: 700; line-height: 1.4; margin: 6px 0 4px; }
.hr-project p { font-size: 12px; color: var(--hr-muted); margin: 2px 0; }
.hr-award strong { color: #333; }

.hr-activity { background: #f5f3ef; border-radius: 18px; padding: 28px; margin-top: 28px; }
.hr-activity__head { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.hr-activity__head h2 { font-size: 22px; margin: 0; }
.hr-activity__numbers { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; }
.hr-activity__numbers > div { display: flex; flex-direction: column; padding: 0 20px; border-right: 1px solid #d9d5cd; min-width: 0; }
.hr-activity__numbers > div:first-child { padding-left: 0; }
.hr-activity__numbers > div:last-child { border: 0; padding-right: 0; }
.hr-activity__numbers span { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.hr-activity__numbers strong { display: block; background: #ece9e3; border-radius: 14px; text-align: center; padding: 19px 8px; font-size: 32px; font-weight: 800; letter-spacing: -1px; white-space: nowrap; }
.hr-activity__numbers small { margin-top: 10px; font-size: 11px; color: var(--hr-muted); }

.hr-quote { margin: 0; border: 1px solid #e4e4e4; border-radius: 16px; padding: 18px; overflow: hidden; }
.hr-quote__image { display: block; width: calc(100% + 36px); max-width: none; height: 155px; object-fit: cover; margin: -18px -18px 15px; }
.hr-quote p { font-size: 17px; line-height: 1.5; letter-spacing: -.3px; margin: 0 0 18px; }
.hr-quote footer { font-size: 12px; }
.hr-quote__project { color: var(--hr-muted); font-size: 11px; margin: 6px 0 8px; }
.hr-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f1f1f1; margin-right: 8px; }

.hr-how { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; margin-top: 22px; }
.hr-video-cover { position: relative; display: block; width: 100%; aspect-ratio: 16/11; overflow: hidden; border-radius: 22px; background: #293430; color: #fff; text-align: left; }
.hr-video-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-video-cover__shade { position: absolute; inset: 0; background: linear-gradient(0deg, #000c, transparent 90%); }
.hr-video-cover__play { position: absolute; top: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--hr-text); display: grid; place-items: center; }
.hr-video-cover__play svg { fill: currentColor; stroke: none; }
.hr-video-cover__label { position: absolute; left: 26px; right: 26px; bottom: 25px; display: grid; gap: 12px; }
.hr-video-cover__label small { font-size: 11px; letter-spacing: 1.2px; }
.hr-video-cover__label strong { font-size: 32px; line-height: 1.12; letter-spacing: -.8px; }
.hr-video-cover__label span { font-size: 14px; font-weight: 600; }
.hr-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 20px; }
.hr-steps li { counter-increment: step; position: relative; padding-left: 46px; }
.hr-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: #f3f3f3; display: grid; place-items: center; font-size: 12px; }
.hr-steps h3 { font-size: 15px; margin: 4px 0 6px; }
.hr-steps p { font-size: 13px; color: var(--hr-muted); margin: 0; }
.hr-how__app { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; padding: 6px 12px 6px 6px; border: 1px solid #e5e5e5; border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none; }
.hr-how__app:hover { border-color: #bbb; }
.hr-how__app img { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.hr-video-guide { font-size: 14px; margin-top: 22px; }

.hr-eyebrow--live { display: flex; align-items: center; gap: 7px; color: #637568; }
.hr-eyebrow--live span { width: 6px; height: 6px; border-radius: 50%; background: #63816a; }
.hr-brief { display: flex; flex-direction: column; padding: 22px; border: 1px solid #e7e7e7; border-radius: 18px; background: #fafaf9; text-decoration: none; transition: box-shadow .16s, border-color .16s; }
.hr-brief:hover { border-color: #c9c9c9; box-shadow: 0 5px 18px #00000008; }
.hr-brief__category { font-size: 12px; color: var(--hr-muted); margin-bottom: 14px; }
.hr-brief h3 { font-size: 17px; line-height: 1.35; letter-spacing: -.25px; margin: 0 0 8px; }
.hr-brief .hr-muted { margin-bottom: 20px; }
.hr-brief__details { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5; font-size: 12px; color: var(--hr-muted); }
.hr-brief__details strong { font-size: 15px; color: var(--hr-text); }
.hr-countdown { font-variant-numeric: tabular-nums; font-size: 13px; color: #555; }
.hr-brief__view { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; padding-top: 15px; }

.hr-faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 35px; background: #fafafa; }
.hr-faq details { padding: 15px 0; border-bottom: 1px solid #e2e2e2; font-size: 14px; }
.hr-faq summary { font-weight: 700; cursor: pointer; }
.hr-faq details p { color: #666; font-size: 13px; }
.hr-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; }

/* ---------- Footer ---------- */
.hr-footer { padding: 36px var(--hr-gutter) 22px; background: var(--hr-soft); border-top: 1px solid #e5e5e5; color: #333; }
.hr-footer__links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; max-width: 1600px; margin: 0 auto; }
.hr-footer h3 { font-size: 13px; margin: 0 0 12px; }
.hr-footer__links a { display: block; font-size: 13px; text-decoration: none; padding: 5px 0; }
.hr-footer__links a:hover { text-decoration: underline; }
.hr-footer__base { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-top: 1px solid #ddd; margin: 28px auto 0; padding-top: 22px; max-width: 1600px; font-size: 12px; }
.hr-footer__legal { display: flex; flex-wrap: wrap; gap: 9px; }
.hr-footer__legal a { text-decoration: none; }
.hr-footer__legal [data-privacy-choices]:not([hidden]) { display: inline-flex; align-items: center; gap: 9px; }
.hr-footer__legal [data-privacy-choices] a { display: inline-flex; align-items: center; }
.hr-footer__right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hr-footer__locale { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.hr-footer__locale svg { width: 18px; height: 18px; }
/* the footer on pages without the new header (logged-in users): its Language and Currency open that header's menu */
.hr--no-header .hr-footer__locale { display: none; }
.hr-social { display: flex; gap: 16px; }
.hr-social img { display: block; width: 19px; height: 19px; }

/* ---------- Dialogs ---------- */
.hr-dialog { border: 0; border-radius: 28px; padding: 36px; width: min(480px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow: auto; scrollbar-width: thin; color: var(--hr-text); background: #fff; box-shadow: 0 24px 90px #0003; font-family: inherit; }
.hr-dialog::backdrop { background: #0006; }
.hr-dialog__close { position: absolute; right: 16px; top: 14px; font-size: 27px; width: 40px; height: 40px; line-height: 1; }
/* the login form is compact, so it fits common laptop screens without a scrollbar */
.hr-auth { padding: 28px 32px 26px; width: min(420px, calc(100% - 32px)); }
.hr-auth__logo { display: block; width: 170px; height: auto; margin: 6px auto 26px; }
.hr-auth h2 { text-align: center; font-size: 24px; line-height: 1.2; letter-spacing: -.6px; margin: 0 0 4px; font-weight: 800; }
.hr-auth__caption { text-align: center; font-size: 14px; color: var(--hr-muted); margin: 0 0 12px; }
.hr-auth label { display: block; font-size: 13px; font-weight: 700; margin: 10px 0 4px; }
.hr-auth input { width: 100%; height: 46px; border: 1px solid #b0b0b0; border-radius: 12px; padding: 0 14px; font-size: 16px; background: #fff; }
.hr-auth__forgot { display: block; text-align: right; font-size: 13px; margin: 8px 0 14px; }
.hr-auth__submit { width: 100%; height: 48px; border-radius: 12px; background: var(--hr-accent); color: #fff; font-size: 16px; font-weight: 700; }
.hr-auth__divider { display: flex; align-items: center; gap: 16px; margin: 14px 0 12px; color: var(--hr-muted); font-size: 13px; }
.hr-auth__divider::before, .hr-auth__divider::after { content: ''; flex: 1; height: 1px; background: #e5e5e5; }
.hr-auth__alt { display: block; text-align: center; border: 1px solid #ddd; border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 600; text-decoration: none; }
.hr-auth__switch { text-align: center; font-size: 14px; margin: 14px 0 0; }
/* no scrollbar on the sign-in dialog: it fits most screens, and still scrolls (wheel, touch) on very short ones */
.hr-auth { scrollbar-width: none; }
.hr-auth::-webkit-scrollbar { display: none; }
.hr-auth .sa-social { gap: 8px; margin-bottom: 0; }
/* laptops: a little tighter, so the three sign-in buttons fit without scrolling */
@media (max-height: 820px) {
    .hr-auth { padding-top: 22px; padding-bottom: 20px; }
    .hr-auth__logo { width: 150px; margin: 2px auto 20px; }
    .hr-auth__caption { margin-bottom: 4px; }
    .hr-auth label { margin-top: 8px; }
    .hr-auth__forgot { margin: 6px 0 10px; }
    .hr-auth__divider { margin: 10px 0 8px; }
    .hr-auth__switch { margin-top: 10px; }
}
/* short screens (small laptops, landscape phones): tighter still */
@media (max-height: 640px) {
    .hr-auth { padding: 20px 28px 18px; }
    .hr-auth__logo { width: 140px; margin-bottom: 18px; }
    .hr-auth h2 { font-size: 21px; }
    .hr-auth__caption { display: none; }
    .hr-auth input { height: 42px; }
    .hr-auth__submit { height: 44px; }
    .hr-auth__alt { padding: 10px; }
}
.hr-auth__switch button { font-weight: 700; text-decoration: underline; }
.hr-auth__choice { display: block; border: 1px solid #ddd; border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; text-decoration: none; }
.hr-auth__choice:hover { border-color: var(--hr-text); }
.hr-auth__choice span { display: block; font-size: 13px; color: var(--hr-muted); margin-top: 3px; }
.hr-video { width: min(860px, calc(100% - 32px)); }
.hr-video h2 { margin: 0 40px 16px 0; font-size: 24px; }
.hr-video__frame { aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; margin-bottom: 14px; }
.hr-video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Responsive ---------- */
@media (min-width: 1450px) { .hr-row--projects { --cards: 6; } .hr-row--quotes { --cards: 4; } }
@media (min-width: 1200px) and (max-width: 1449px) { .hr-row--projects { --cards: 5; } }
@media (max-width: 900px) {
    .hr-header__bar { column-gap: 14px; }
    .hr-cats { column-gap: 12px; }
    /* the three longer names wrap, so they still fit beside the logo */
    .hr-cat { font-size: 12px; max-width: 96px; text-align: center; line-height: 1.25; }
    .hr-cat__art { height: 28px; }
    .hr-launch { width: 92%; }
    /* the header link no longer fits beside the categories: offer it under the launch bar */
    .hr-designers { display: none; }
    .hr-designers-line { display: block; margin-top: 6px; }
    .hr-designers-line a { font-weight: 700; }
    .hr-hero h1, .hr-hero .hr-hero__title { font-size: 30px; }
    .hr-launch__field { padding-inline: 16px; }
    .hr-row--projects { --cards: 3; }
    .hr-row--quotes, .hr-row--live { --cards: 2; }
}
@media (max-width: 650px) {
    :root { --hr-gutter: 18px; }
    .hr-header { padding: 18px 5% 18px; --pad-top: 18px; --pad-bottom: 18px; --pad-end: 10px; --gap: 14px; }
    .hr-header__bar { grid-template-columns: 1fr auto; grid-template-areas: "brand tools" "hero hero" "cats cats" "launch launch"; row-gap: 14px; }
    .hr-hero { --mt: 4px; }
    .hr-hero h1, .hr-hero .hr-hero__title { font-size: 24px; letter-spacing: -.6px; }
    .hr-hero p { font-size: 14px; }
    .hr-brand { width: 150px; }
    .hr-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; width: 100%; max-width: 420px; }
    .hr-cat { font-size: 11px; text-align: center; max-width: none; }
    .hr-cat__art { height: 30px; }
    .hr-launch { display: grid; grid-template-columns: 1fr; width: 100%; height: auto; --mt: 4px; padding: 8px; border-radius: 28px; }
    .hr-launch__field { padding: 12px 16px; min-height: 64px; border-radius: 20px; }
    .hr-launch__field + .hr-launch__field::before { left: 16px; right: 16px; top: 0; transform: none; width: auto; height: 1px; }
    .hr-launch__go { width: 100%; height: 52px; margin: 8px 0 0; border-radius: 20px; }
    .hr-launch-help { font-size: 11px; }
    .hr-launch-proof { display: block; margin-bottom: 3px; }
    .hr-launch-proof::after { content: none; }
    .hr-header.is-compact { padding: 10px 4%; }
    .hr-header.is-compact .hr-header__bar { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 0; }
    .hr-header.is-compact .hr-brand { width: 104px; }
    .hr-header.is-compact .hr-round { width: 30px; height: 30px; }
    .hr-header.is-compact .hr-round svg { width: 17px; height: 17px; }
    .hr-pill button[data-expand]:not(.hr-pill__go):not(.hr-pill__mobile) { display: none; }
    .hr-pill .hr-pill__mobile { display: block; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .hr-pill .hr-pill__go { flex-basis: 30px; height: 30px; margin-left: 4px; }
    .hr-row--projects { --cards: 2; }
    .hr-row--quotes, .hr-row--live { --cards: 1.2; }
    .hr-activity { padding: 22px; }
    .hr-activity__numbers { grid-template-columns: 1fr; }
    .hr-activity__numbers > div { padding: 0 0 20px; margin-bottom: 20px; border-right: 0; border-bottom: 1px solid #d9d5cd; }
    .hr-activity__numbers > div:last-child { padding: 0; margin: 0; border: 0; }
    .hr-how, .hr-faq { grid-template-columns: 1fr; gap: 24px; }
    .hr-video-cover { aspect-ratio: 16/9; }
    .hr-video-cover__label strong { font-size: 24px; }
    .hr-cta { flex-direction: column; align-items: flex-start; }
    .hr-footer__links { grid-template-columns: 1fr 1fr; }
    .hr-footer__base { flex-direction: column; align-items: flex-start; }
    .hr-dialog { padding: 28px 22px 22px; border-radius: 24px; }
}
@media (max-width: 400px) {
    .hr-row--projects { --cards: 1.3; }
}
@media (max-width: 360px) {
    /* foldable cover screens (Galaxy Fold 280-344px) */
    .hr-pill .hr-pill__mobile .hr-full { display: none; }
    .hr-pill .hr-pill__mobile .hr-short { display: inline; }
    .hr-pill { padding: 3px; }
    .hr-pill .hr-pill__mobile { padding: 4px 6px 4px 8px; font-size: 12px; text-overflow: clip; }
    .hr-header.is-compact .hr-header__bar { column-gap: 6px; }
    .hr-header.is-compact .hr-brand { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
    .hr * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- The header on the other public pages (views/common/_redesign_header.php) ----------
 * Those pages keep the site's Bootstrap and styles.css, which set a font on every element, large h1/h2 sizes
 * and room for the old fixed mobile header: the header brings back its own. */
body.hr-page-body { padding-top: 0; }
.hr--page { color: var(--hr-text); font-size: 15px; line-height: 1.6; text-align: left; }
.hr--page, .hr--page * { font-family: var(--hr-font); }
.hr--page p { font-size: inherit; }
.hr--page h2 { line-height: 1.25; letter-spacing: normal; }
.hr--page .hr-header { z-index: 1030; }
/* opened from the pill, the full header lies over the page */
.hr-header[data-mode=compact].is-open { box-shadow: 0 18px 44px #00000024; }

/* ---- Continue with Google, Apple or Facebook (views/site/_auth_social_redesign.php, js_new/social-signin.js): on the
 * redesigned login and sign up and in the dialog above; Google draws its own button, 44px high like these ---- */
.sa-auth__or { display: flex; align-items: center; gap: 14px; margin: 24px 0 16px; font-size: 13px; color: var(--hr-muted); }
.sa-auth__or::before, .sa-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--hr-line); }
.sa-social { display: grid; gap: 10px; margin-bottom: 18px; }
.sa-social.is-busy { opacity: .55; pointer-events: none; }
.sa-social__google { display: flex; justify-content: center; min-height: 44px; }
/* Log-in and sign-up pages: Google draws its own button and stops at 400px wide, so the Apple button matches it (Imdat, 11 Nov 2026) */
.sa-auth .sa-social { max-width: 400px; margin-left: auto; margin-right: auto; gap: 12px; }
/* the old styles make #socialLogin inline-block, which ignores the centring and the gap */
.sa-auth #socialLogin.sa-social { display: grid; }
/* Sign up: no rule between the caption and the buttons */
.sa-auth #iama_portion { border-bottom: 0; padding-bottom: 0; }
.sa-social__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; padding: 0 18px; border: 1px solid #dadce0; border-radius: 999px; background: #fff; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; color: #1f1f1f; cursor: pointer; }
.sa-social__btn:hover { border-color: #c2c4c8; background: #f8f9fa; }
.sa-social__btn svg { width: 19px; height: 19px; flex: none; stroke: none; }
.sa-social__btn--apple { border-color: #000; background: #000; color: #fff; }
.sa-social__btn--apple:hover { border-color: #000; background: #222; }
.sa-social__error { margin: -6px 0 14px; font-size: 13px; color: var(--hr-accent); text-align: center; }
.sa-social__note { margin: 0 0 22px; font-size: 13px; line-height: 1.5; color: var(--hr-muted); text-align: center; }

/* ---------- The logged-in users' header (views/common/_member_header.php): one bar, the menu as the guests' ---------- */
/* the wrapper sticks (a sticky header only sticks inside its parent, here no taller than itself) */
.hr--member { position: sticky; top: 0; z-index: 1030; }
.hr-header--member { position: relative; padding: 14px 3%; background: #fff; }
.hr-header--member .hr-header__bar { grid-template-columns: max-content minmax(0, 1fr) max-content; grid-template-areas: "brand nav tools"; column-gap: 28px; }
.hr-header--member .hr-brand { width: 150px; }
.hr-member-nav { grid-area: nav; display: flex; gap: 4px; min-width: 0; }
.hr-member-nav a { padding: 9px 13px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--hr-text); text-decoration: none; white-space: nowrap; }
.hr-member-nav a:hover { background: #f2f2f2; }
.hr-member-nav a[aria-current=page] { background: var(--hr-text); color: #fff; }
.hr-member-search input { width: 180px; height: 40px; padding: 0 16px; border: 1px solid #e3e3e3; border-radius: 999px; background: #fafafa; font-size: 14px; }
.hr-member-search input:focus { outline: none; border-color: var(--hr-text); background: #fff; }
.hr-member-photo { overflow: hidden; }
.hr-member-photo img { width: 100%; height: 100%; object-fit: cover; }
.hr-panel__member { display: none; }
@media (max-width: 1180px) { .hr-member-search { display: none; } }
@media (max-width: 900px) {
    .hr-member-nav { display: none; }
    .hr-header--member .hr-header__bar { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "brand tools"; }
    .hr-panel__member { display: block; }
}

/* ---------- The headings in Neue Haas Grotesk Display (6 Nov 2026; Inter 5 Nov, Nunito Sans before): medium weight,
 * slightly tight ---------- */
.hr h1, .hr .hr-hero__title, .hr h2 { font-family: var(--hr-font-head); }
.hr h1, .hr .hr-hero__title { font-weight: 500; letter-spacing: -0.012em; }
.hr h2 { font-weight: 500; letter-spacing: -0.008em; }
.hr h3 { font-weight: 600; letter-spacing: 0; }

/* ---------- People's photos as a squircle (the smooth app-icon shape, a superellipse with n 2.7, rounder than an app icon; 6 Nov 2026) instead of
 * circles: the About page's people, profile tops, the Top 50, My Home, the testimonials' initials, the sign-in photo.
 * A mask, so it works on <img> and on background images; html body outranks the pages' own border-radius ---------- */
:root { --hr-squircle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100 50 L99.92 56.63 L99.68 61.06 L99.29 64.90 L98.73 68.37 L98.02 71.57 L97.15 74.54 L96.13 77.32 L94.95 79.92 L93.61 82.35 L92.12 84.62 L90.48 86.73 L88.68 88.68 L86.73 90.48 L84.62 92.12 L82.35 93.61 L79.92 94.95 L77.32 96.13 L74.54 97.15 L71.57 98.02 L68.37 98.73 L64.90 99.29 L61.06 99.68 L56.63 99.92 L50 100 L43.37 99.92 L38.94 99.68 L35.10 99.29 L31.63 98.73 L28.43 98.02 L25.46 97.15 L22.68 96.13 L20.08 94.95 L17.65 93.61 L15.38 92.12 L13.27 90.48 L11.32 88.68 L9.52 86.73 L7.88 84.62 L6.39 82.35 L5.05 79.92 L3.87 77.32 L2.85 74.54 L1.98 71.57 L1.27 68.37 L0.71 64.90 L0.32 61.06 L0.08 56.63 L0 50 L0.08 43.37 L0.32 38.94 L0.71 35.10 L1.27 31.63 L1.98 28.43 L2.85 25.46 L3.87 22.68 L5.05 20.08 L6.39 17.65 L7.88 15.38 L9.52 13.27 L11.32 11.32 L13.27 9.52 L15.38 7.88 L17.65 6.39 L20.08 5.05 L22.68 3.87 L25.46 2.85 L28.43 1.98 L31.63 1.27 L35.10 0.71 L38.94 0.32 L43.37 0.08 L50 0 L56.63 0.08 L61.06 0.32 L64.90 0.71 L68.37 1.27 L71.57 1.98 L74.54 2.85 L77.32 3.87 L79.92 5.05 L82.35 6.39 L84.62 7.88 L86.73 9.52 L88.68 11.32 L90.48 13.27 L92.12 15.38 L93.61 17.65 L94.95 20.08 L96.13 22.68 L97.15 25.46 L98.02 28.43 L98.73 31.63 L99.29 35.10 L99.68 38.94 L99.92 43.37Z'/%3E%3C/svg%3E"); }
html body :is(.hr-avatar, .ab-person img, .sp-head__photo, .sr-designer__photo, .sr-card__photo, .cm-head__photo,
    .sa-auth .fb-img-wrapper .fb-img, .dm-home #teams .team-list .item .img) {
    border-radius: 0;
    -webkit-mask: var(--hr-squircle) center / 100% 100% no-repeat;
    mask: var(--hr-squircle) center / 100% 100% no-repeat;
}

/* ---------- The small photos on competition pages in the same squircle (Imdat, 11 Nov 2026): Latest Jurors and
 * Submitted designers ---------- */
html body .project-head .box-jury > ul li.voter-block:not(.more-jurors-btn) { background: none; box-shadow: none; border-radius: 0; }
html body .project-head .box-jury > ul li.voter-block:not(.more-jurors-btn) a {
    border-radius: 0; background-color: lightgrey;
    -webkit-mask: var(--hr-squircle) center / 100% 100% no-repeat; mask: var(--hr-squircle) center / 100% 100% no-repeat;
}
/* Submitted designers keep their line, in the brand red (Imdat, 11 Nov 2026): 3px thick, 2.5px from the 54px photo
 * all the way round. --hr-sq-ring is that band, drawn as the squircle offset outwards (not scaled up, which would
 * leave the gap uneven at the corners); its 65px box sits 2.5px outside the 60px em. */
:root { --hr-sq-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 65'%3E%3Cpath fill-rule='evenodd' d='M65.00 32.50 L64.98 35.26 L64.92 37.19 L64.81 38.90 L64.66 40.50 L64.46 42.01 L64.22 43.45 L63.92 44.84 L63.58 46.18 L63.19 47.48 L62.74 48.73 L62.24 49.95 L61.69 51.12 L61.08 52.25 L60.43 53.35 L59.72 54.40 L58.95 55.40 L58.14 56.36 L57.28 57.28 L56.36 58.14 L55.40 58.95 L54.40 59.72 L53.35 60.43 L52.25 61.08 L51.12 61.69 L49.95 62.24 L48.73 62.74 L47.48 63.19 L46.18 63.58 L44.84 63.92 L43.45 64.22 L42.01 64.46 L40.50 64.66 L38.90 64.81 L37.19 64.92 L35.26 64.98 L32.50 65.00 L29.74 64.98 L27.81 64.92 L26.10 64.81 L24.50 64.66 L22.99 64.46 L21.55 64.22 L20.16 63.92 L18.82 63.58 L17.52 63.19 L16.27 62.74 L15.05 62.24 L13.88 61.69 L12.75 61.08 L11.65 60.43 L10.60 59.72 L9.60 58.95 L8.64 58.14 L7.72 57.28 L6.86 56.36 L6.05 55.40 L5.28 54.40 L4.57 53.35 L3.92 52.25 L3.31 51.12 L2.76 49.95 L2.26 48.73 L1.81 47.48 L1.42 46.18 L1.08 44.84 L0.78 43.45 L0.54 42.01 L0.34 40.50 L0.19 38.90 L0.08 37.19 L0.02 35.26 L0.00 32.50 L0.02 29.74 L0.08 27.81 L0.19 26.10 L0.34 24.50 L0.54 22.99 L0.78 21.55 L1.08 20.16 L1.42 18.82 L1.81 17.52 L2.26 16.27 L2.76 15.05 L3.31 13.88 L3.92 12.75 L4.57 11.65 L5.28 10.60 L6.05 9.60 L6.86 8.64 L7.72 7.72 L8.64 6.86 L9.60 6.05 L10.60 5.28 L11.65 4.57 L12.75 3.92 L13.88 3.31 L15.05 2.76 L16.27 2.26 L17.52 1.81 L18.82 1.42 L20.16 1.08 L21.55 0.78 L22.99 0.54 L24.50 0.34 L26.10 0.19 L27.81 0.08 L29.74 0.02 L32.50 0.00 L35.26 0.02 L37.19 0.08 L38.90 0.19 L40.50 0.34 L42.01 0.54 L43.45 0.78 L44.84 1.08 L46.18 1.42 L47.48 1.81 L48.73 2.26 L49.95 2.76 L51.12 3.31 L52.25 3.92 L53.35 4.57 L54.40 5.28 L55.40 6.05 L56.36 6.86 L57.28 7.72 L58.14 8.64 L58.95 9.60 L59.72 10.60 L60.43 11.65 L61.08 12.75 L61.69 13.88 L62.24 15.05 L62.74 16.27 L63.19 17.52 L63.58 18.82 L63.92 20.16 L64.22 21.55 L64.46 22.99 L64.66 24.50 L64.81 26.10 L64.92 27.81 L64.98 29.74Z M61.98 29.80 L61.92 27.95 L61.82 26.33 L61.68 24.84 L61.50 23.44 L61.27 22.11 L61.00 20.84 L60.69 19.63 L60.34 18.46 L59.94 17.34 L59.49 16.26 L59.01 15.22 L58.47 14.23 L57.90 13.27 L57.28 12.35 L56.61 11.47 L55.91 10.64 L55.15 9.85 L54.36 9.09 L53.53 8.39 L52.65 7.72 L51.73 7.10 L50.77 6.53 L49.78 5.99 L48.74 5.51 L47.66 5.06 L46.54 4.66 L45.37 4.31 L44.16 4.00 L42.89 3.73 L41.56 3.50 L40.16 3.32 L38.67 3.18 L37.05 3.08 L35.20 3.02 L32.50 3.00 L29.80 3.02 L27.95 3.08 L26.33 3.18 L24.84 3.32 L23.44 3.50 L22.11 3.73 L20.84 4.00 L19.63 4.31 L18.46 4.66 L17.34 5.06 L16.26 5.51 L15.22 5.99 L14.23 6.53 L13.27 7.10 L12.35 7.72 L11.47 8.39 L10.64 9.09 L9.85 9.85 L9.09 10.64 L8.39 11.47 L7.72 12.35 L7.10 13.27 L6.53 14.23 L5.99 15.22 L5.51 16.26 L5.06 17.34 L4.66 18.46 L4.31 19.63 L4.00 20.84 L3.73 22.11 L3.50 23.44 L3.32 24.84 L3.18 26.33 L3.08 27.95 L3.02 29.80 L3.00 32.50 L3.02 35.20 L3.08 37.05 L3.18 38.67 L3.32 40.16 L3.50 41.56 L3.73 42.89 L4.00 44.16 L4.31 45.37 L4.66 46.54 L5.06 47.66 L5.51 48.74 L5.99 49.78 L6.53 50.77 L7.10 51.73 L7.72 52.65 L8.39 53.53 L9.09 54.36 L9.85 55.15 L10.64 55.91 L11.47 56.61 L12.35 57.28 L13.27 57.90 L14.23 58.47 L15.22 59.01 L16.26 59.49 L17.34 59.94 L18.46 60.34 L19.63 60.69 L20.84 61.00 L22.11 61.27 L23.44 61.50 L24.84 61.68 L26.33 61.82 L27.95 61.92 L29.80 61.98 L32.50 62.00 L35.20 61.98 L37.05 61.92 L38.67 61.82 L40.16 61.68 L41.56 61.50 L42.89 61.27 L44.16 61.00 L45.37 60.69 L46.54 60.34 L47.66 59.94 L48.74 59.49 L49.78 59.01 L50.77 58.47 L51.73 57.90 L52.65 57.28 L53.53 56.61 L54.36 55.91 L55.15 55.15 L55.91 54.36 L56.61 53.53 L57.28 52.65 L57.90 51.73 L58.47 50.77 L59.01 49.78 L59.49 48.74 L59.94 47.66 L60.34 46.54 L60.69 45.37 L61.00 44.16 L61.27 42.89 L61.50 41.56 L61.68 40.16 L61.82 38.67 L61.92 37.05 L61.98 35.20 L62.00 32.50Z'/%3E%3C/svg%3E"); }
html body .arcfolioland .singned-designer-list a em { position: relative; box-sizing: border-box; padding: 3px; border-radius: 0; box-shadow: none !important; }
html body .arcfolioland .singned-designer-list a.submited em::before {
    content: ""; position: absolute; inset: -2.5px; background: var(--hr-accent);
    -webkit-mask: var(--hr-sq-ring) center / 100% 100% no-repeat; mask: var(--hr-sq-ring) center / 100% 100% no-repeat;
}
html body .arcfolioland .singned-designer-list a em i {
    position: relative; z-index: 1; width: 54px; height: 54px; margin: 0; border: 0; border-radius: 0; background-color: #f2f2f2;
    -webkit-mask: var(--hr-squircle) center / 100% 100% no-repeat; mask: var(--hr-squircle) center / 100% 100% no-repeat;
}
/* Online now (User::isOnline, Imdat 11 Nov 2026): the same band in green, in place of the red one while they're on the
 * site, glowing softly like the Top 50's (sr-online-glow, site-redesign.css) */
html body .arcfolioland .singned-designer-list a.is-online em::before {
    content: ""; position: absolute; inset: -2.5px; background: #22c55e;
    -webkit-mask: var(--hr-sq-ring) center / 100% 100% no-repeat; mask: var(--hr-sq-ring) center / 100% 100% no-repeat;
}
html body .arcfolioland .singned-designer-list a.is-online em { animation: sr-online-glow 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    html body .arcfolioland .singned-designer-list a.is-online em { animation: none; filter: drop-shadow(0 0 5px rgba(34, 197, 94, .55)); }
}
/* The Wall tab's people panel (views/project/runningCompetitionsPagesNew/_people_panel.php): the client first */
.arcfolioland .cp-owner { display: flex; align-items: center; gap: 14px; margin: 0 4px 36px; }
html body .arcfolioland .singned-designer-list .cp-owner a { margin: 0; flex: none; }
.arcfolioland .cp-owner__text { display: flex; flex-direction: column; gap: 3px; font-size: 15px; line-height: 1.3; }
.arcfolioland .cp-owner__text b { font-weight: 700; color: var(--hr-text, #222); }
.arcfolioland .cp-owner__text span { font-size: 13px; color: var(--hr-muted, #6b6b6b); }

/* A running competition, for its client: the suggested award under Add to award (runningCompetitionsPagesNew/_header_top_redesign.php) */
.rc-suggest { margin: 10px 0 0; font-size: 14px; color: var(--hr-muted, #6b6b6b); }

/* The old default picture, the black Arcbazar logo in a circle (/img/vote_icons/icon-logo-48-black.svg, still set by
 * many views), shows as the new app icon on redesigned pages, as in the new views (avatar-default.png) */
html body.site-redesign [style*="icon-logo-48-black.svg"] { background-image: url(/img_new/brand/avatar-default.png) !important; }
html body.site-redesign img[src*="icon-logo-48-black.svg"] { content: url(/img_new/brand/avatar-default.png); }
/* Anna's open chat (js_new/chatbot/arcbazar-chat.js): her photo in the middle and the app icon in the header, in the squircle */
html body #arcbazar-chat-widget-root :is(.abc-intro-avatar, .abc-header-avatar) {
    border-radius: 0; background: none;
    -webkit-mask: var(--hr-squircle) center / 100% 100% no-repeat; mask: var(--hr-squircle) center / 100% 100% no-repeat;
}

/* ---------- Built from Arcbazar designs (views/site/home_redesign/_built.php): clients' photos of what was built,
 * a green "Built" badge on each ---------- */
.hr-built__image { position: relative; display: block; }
.hr-built__badge { padding: 4px 11px; border-radius: 999px; background: #1e7b3a; font-size: 12px; font-weight: 800; color: #fff; }
.hr-built__badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
/* SpaceApp's AI likeness score beside "Built" (ProjectBuiltReview) */
.hr-built__score { padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 800; color: #1e7b3a; }

/* ---------- Countdowns as four boxes, days, hours, minutes, seconds (js_new/countdown.js and initCountdowns with
 * data-countdown-boxes; the designer's My Home's older plugin in site-redesign.css): light grey, red in the last day ---------- */
.is-boxes { display: inline-flex; gap: 4px; vertical-align: middle; }
.is-boxes .cd-box { display: grid; justify-items: center; min-width: 38px; padding: 5px 4px 4px; border-radius: 9px; background: #f0f0f0; color: var(--hr-text); }
.is-boxes .cd-box b { font-size: 15px; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; }
.is-boxes .cd-box small { font-size: 9px; line-height: 1.2; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.is-boxes.is-soon .cd-box { background: var(--hr-accent); color: #fff; }
.hr-countdown.is-boxes { font-size: inherit; color: inherit; }

/* ---------- A client's byline (views/common/_client_byline.php): their photo and name with a public profile,
 * Arcbazar's own picture otherwise (as in the Top 50); in the photos' squircle ---------- */
.cl-by { display: inline-flex; align-items: center; gap: 10px; margin: 0; vertical-align: middle; }
html body .cl-by img.cl-by__photo { flex: none; width: 40px; height: 40px; object-fit: cover; background: var(--hr-soft); border-radius: 0;
    -webkit-mask: var(--hr-squircle) center / 100% 100% no-repeat; mask: var(--hr-squircle) center / 100% 100% no-repeat; }
html body .cl-by--large img.cl-by__photo { width: 56px; height: 56px; }
.cl-by a { font-weight: 700; color: inherit; }

/* Signed-up designers: room between the faces, so their rings don't touch (Imdat, 12 Nov 2026) */
html body .arcfolioland .singned-designer-list a:not(.cp-owner__face) { margin-right: 14px; margin-bottom: 10px; }