/*
    COMPANY PAGE - one design system for the whole report.

    TYPE      36 display | 24 section | 28 stat-lg | 18 stat-sm | 15 item-title
              14 body | 13 meta | 12 label. Nothing else.
    WEIGHT    300 large numerals | 400 body | 500 titles and labels. Never 600/700.
    COLOUR    black = titles and values | gray-2 = body | gray-5 = labels and meta
              gray-6 = captions | primary-3 = links. Accent colour is earned, not decorative.
    SPACE     4 / 8 / 12 / 16 / 20 / 24 / 32. No other values.
    LINES     every rule is 1px and takes its colour from --surface-border, so both themes track it.
    SHAPE     3px radius, no shadows, no tinted markers, no pills.

    Scoped under .company_page where it overrides the shared shell; the data blocks
    (.co_*, .growth_*) are unscoped because company_window_details.html renders them
    outside .company_page, on the companies list.
*/

/* ------------------------------- TOKENS ------------------------------- */

/*
    Every border on this page goes through the platform's own --surface-border shorthand
    (defined in components.css, theme-swapped there), so this layer never invents a line colour.
    --co-line-strong is a *colour* only — for hover states and text-decoration-color, where a
    border shorthand can't be used.
*/
.company_page {
    --co-line-strong: rgba(15, 23, 42, 0.55);
    --co-panel: var(--gray-color-14);
    --co-radius: 3px;
    --co-tnum: "tnum" 1, "lnum" 1;
}

html.dark .company_page {
    --co-line-strong: rgba(255, 255, 255, 0.42);
    --co-panel: var(--gray-color-14);
}

/* ------------------------------- FLATTEN THE SHARED SHELL ------------------------------- */

/*
    All borders inside a section render at 1px. Only the width is overridden — the colour still
    comes from --surface-border, so both themes keep working. .growth_insight keeps its 2px accent.
*/
.company_page .section .co_stats,
.company_page .section .co_stat,
.company_page .section .co_legend_row,
.company_page .section .co_salary_top,
.company_page .section .co_block,
.company_page .section .growth_chart,
.company_page .section .growth_event,
.company_page .section .co_row,
.company_page .section .company_jobs_empty,
.company_page .section .co_table th,
.company_page .section .co_table td {border-width: 1px;}

.company_page .section,
.company_page .section.v3 {
    border: var(--surface-border); border-radius: var(--co-radius); box-shadow: none;
}
.company_page .section.v3 {padding: 24px 26px;}

/* hierarchy by size + tracking, never by weight */
.company_page .section_title,
.company_page .section.v3 > div:nth-of-type(1) {
    font-size: 24px; font-weight: 400; letter-spacing: -0.6px; line-height: 1.15;
}
.company_page .section_title.page {line-height: 1.15;}

.company_page .page_section_text {padding-top: 16px; font-size: 14px; line-height: 1.5;}
.company_page .page_section_text h2 {font-size: 15px; font-weight: 500;}
.company_page .page_section_text strong {font-weight: 500;}
.company_page .page_section_text a {text-decoration: underline; text-underline-offset: 2px;}

/* numerals align in columns everywhere on this page */
.company_page .tech_demand_salary {font-feature-settings: var(--co-tnum);}

/* sub-block titles: sentence case — letter-spacing dropped with the caps, size bumped to hold legibility */
.company_page .tech_block_title,
.co_block_title {
    font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0;
    color: var(--gray-color-3);
}
/* Technologies sub-headers sit a shade darker than Growth's labels */
.company_page .tech_block_title {color: var(--gray-color-3);}

/* pills -> rectangular hairline tags */
.company_page .technology_chip > span,
.company_page .page_technology_item > span,
.company_page .tech_demand_tag {
    border-radius: var(--co-radius); font-weight: 500;
}

.company_page .role_item,
.company_page .page_chip,
.company_page .btn_primary,
.company_page .page_technologies > div > span,
.company_page .page_company_item_technologies > span,
.company_page .page_section_card,
.company_page .company_video_item,
.company_page .section_empty {border-radius: var(--co-radius);}

.company_page .btn_primary {font-weight: 500;}

/* remove residual depth */
.company_page .copilot {border-radius: var(--co-radius); box-shadow: none;}
.company_page .technology_chip:hover {filter: none; transform: none;}
.company_page .technology_chip > span {transition: border-color .15s ease, background .15s ease;}

/* ------------------------------- HEADER ------------------------------- */

.company_page .page_header {border-bottom: var(--surface-border);}
.company_page .page_header_inner {padding: 32px 30px;}

.company_page .page_header_title {font-size: 32px; font-weight: 400; letter-spacing: -1px; line-height: 1.1;}
.company_page .page_header_photo {width: 100px; min-width: 100px; height: 100px; border-radius: var(--co-radius);}
.company_page .page_header_tags {padding-top: 4px; font-size: 13px; line-height: 1.55; color: var(--gray-color-4);}
.company_page .page_header_tags > b {font-weight: 500;}

/*
    Social marks live inside the badge row as square tinted chips, matching the badge shape but
    carrying the primary accent so they read as actionable links.
*/
.company_page .page_header_badges {align-items: center;}
.company_page .page_header_badges > .page_header_link {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    margin: 0; padding: 0; border: none; border-radius: var(--co-radius); text-decoration: none;
    background-color: var(--primary-color-9); color: var(--primary-color-3); transition: background-color .15s ease;
}
.company_page .page_header_badges > .page_header_link > i {padding-inline-end: 0; font-size: 14px; line-height: 1;}
.company_page .page_header_badges > .page_header_link:hover {background-color: var(--primary-color-7); color: var(--primary-color-2);}

/* Follow / menu: filled tint instead of an outline, matching the Favorite / View pair in Jobs */
.company_page .page_header_controls > .btn_primary.light {
    border-color: transparent; background-color: var(--primary-color-9); color: var(--primary-color-3);
}
.company_page .page_header_controls > .btn_primary.light:hover {
    background-color: var(--primary-color-7); color: var(--primary-color-2);
}

/* ------------------------------- CONTENTS RAIL ------------------------------- */

.co_contents {
    padding: 20px; border: var(--surface-border); border-radius: var(--co-radius);
    background: var(--white-color);
}
.co_contents_title {
    margin-bottom: 12px; color: var(--black-color); font-size: 15px; font-weight: 500; letter-spacing: 0;
}
.co_contents_list {display: flex; flex-direction: column; gap: 12px;}
.co_contents_item {position: relative;}
.co_contents_item > a {
    color: var(--gray-color-2); font-size: 13px; line-height: 1.35;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
    text-decoration-color: var(--co-line-strong);
}
.co_contents_item > a:hover {color: var(--black-color); text-decoration-color: currentColor;}
/* active marker: 3px bar in the gutter, not a fill */
.co_contents_item::before {
    content: ''; position: absolute; top: 50%; inset-inline-start: -20px; width: 3px; height: 16px;
    transform: translateY(-50%); background: var(--primary-color-3); opacity: 0; transition: opacity .15s ease;
}
.co_contents_item.active::before {opacity: 1;}
.co_contents_item.active > a {color: var(--black-color); font-weight: 500;}

/* ------------------------------- STAT STRIP (shared primitive) -------------------------------
    Used by Salary insights and Growth signals. Unscoped, like those blocks, because both are
    also rendered inside company_window_details.html where .company_page does not exist.
*/

.co_stats {
    display: flex; flex-wrap: wrap; margin-top: 20px;
    border-top: 1px dashed var(--gray-color-10); border-bottom: 1px dashed var(--gray-color-10);
}
.co_stat {flex: 1 1 150px; min-width: 0; padding: 16px 20px; border-inline-start: 1px dashed var(--gray-color-10);}
.co_stat:first-child {padding-inline-start: 0; border-inline-start: none;}
.co_stat_label {color: var(--gray-color-3); font-size: 12px; font-weight: 500;}
.co_stat_value {
    display: flex; align-items: baseline; gap: 4px; margin-top: 8px;
    color: var(--black-color); font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -1.1px;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.co_stat_value.sm {font-size: 18px; letter-spacing: -0.3px;}
.co_stat_unit {color: var(--gray-color-6); font-size: 14px; font-weight: 400; letter-spacing: 0;}
.co_stat_note {margin-top: 8px; color: var(--gray-color-6); font-size: 12px; line-height: 1.4;}

@media screen and (max-width: 768px) {
    .co_stat {flex: 1 1 100%; padding: 16px 0; border-inline-start: none; border-top: 1px dashed var(--gray-color-10);}
    .co_stat:first-child {border-top: none;}
}

/* ------------------------------- SUB-BLOCK (shared primitive) -------------------------------
    Growth Signals and Financials used to declare their own wrappers with different head
    spacing; both now share one rhythm so the two sections read as the same document.
*/

.co_block {margin-top: 0; padding-top: 20px; border-top: 1px dashed var(--gray-color-10);}
/* the stat strip already closes with a rule — don't draw a second one right under it */
.co_stats + .co_block {margin-top: 0; border-top: none;}
.co_block_flat {border-top: none;}
.co_block_head {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px;}

/* ------------------------------- CALLOUT ------------------------------- */

.co_callout {
    margin-top: 20px; padding: 24px; border-radius: var(--co-radius); background: var(--co-panel);
}
.co_callout_title {
    margin-bottom: 12px; color: var(--black-color); font-size: 18px; font-weight: 400; letter-spacing: -0.3px;
}
.co_callout_text {color: var(--gray-color-2); font-size: 14px; line-height: 1.5;}
.co_callout_text a {color: inherit; text-decoration: underline; text-underline-offset: 2px;}

/* ------------------------------- SALARY INSIGHTS -------------------------------
    Unscoped on purpose: company_salaries.html is also rendered inside
    company_window_details.html, which opens on the companies list where .company_page
    does not exist. Local tokens keep it self-sufficient there.
*/

.co_salary {--sal-tnum: "tnum" 1, "lnum" 1;}
.co_salary_desc {padding-top: 12px; color: var(--gray-color-5); font-size: 13px; line-height: 1.55;}

/* donut + legend */
.co_salary_chart {display: flex; align-items: center; gap: 32px; padding: 24px 0 20px;}
.co_donut_wrap {position: relative; flex: 0 0 160px; width: 160px; height: 160px;}
.co_donut {display: block; width: 100%; height: 100%;}
.co_donut_track {fill: none; stroke: var(--gray-color-14); stroke-width: 3.6;}
.co_donut_seg {fill: none; stroke: var(--sal-c, var(--gray-color-10)); stroke-width: 3.6;}
.co_donut_center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; pointer-events: none;
}
.co_donut_center_value {
    color: var(--black-color); font-size: 24px; font-weight: 300; line-height: 1;
    letter-spacing: -0.8px; font-feature-settings: var(--sal-tnum);
}
.co_donut_center_label {color: var(--gray-color-6); font-size: 12px; font-weight: 500;}

.co_legend {flex: 1; min-width: 0; display: flex; flex-direction: column;}
.co_legend_row {display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--gray-color-10);}
.co_legend_row:last-child {border-bottom: none;}
.co_legend_swatch {
    flex: 0 0 10px; width: 10px; height: 10px; border-radius: 2px;
    background: var(--sal-c, var(--gray-color-10));
}
.co_legend_title {
    flex: 1; min-width: 0; color: var(--gray-color-2); font-size: 14px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.co_legend_value {color: var(--gray-color-5); font-size: 14px; font-feature-settings: var(--sal-tnum);}

/* categorical ramp derived from the two brand hues, dark -> light, alternating */
.s1 {--sal-c: var(--primary-color-4);}
.s2 {--sal-c: var(--secondary-color-3);}
.s3 {--sal-c: var(--primary-color-6);}
.s4 {--sal-c: var(--secondary-color-5);}
.s5 {--sal-c: var(--primary-color-1);}
.s6 {--sal-c: var(--secondary-color-1);}
.s7 {--sal-c: var(--primary-color-5);}
.s8 {--sal-c: var(--secondary-color-4);}
.s9 {--sal-c: var(--gray-color-9);}
.s10 {--sal-c: var(--gray-color-11);}

.co_salary_top {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
    margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--gray-color-10);
}
.co_salary_top_label {color: var(--gray-color-5); font-size: 12px; font-weight: 500;}
.co_salary_top_title {flex: 1; min-width: 0; color: var(--black-color); font-size: 14px;}
.co_salary_top_value {
    color: var(--black-color); font-size: 15px; font-weight: 500; font-feature-settings: var(--sal-tnum);
}

.co_salary_note {margin-top: 16px; color: var(--gray-color-6); font-size: 12px; line-height: 1.5;}

@media screen and (max-width: 768px) {
    .co_salary_stat:first-child {border-top: none;}
    .co_salary_chart {flex-direction: column; align-items: stretch; gap: 20px; padding: 20px 0;}
    .co_donut_wrap {align-self: center;}
    .co_salary_desc {font-size: 15px;}
    .co_salary_note {font-size: 13px;}
}

/* ------------------------------- GROWTH SIGNALS -------------------------------
    Moved out of page.css (these classes are only ever rendered by company_growth.html,
    which appears on the company page and in company_window_details.html — both load this file).
    Status colour now comes from the platform ramps instead of hard-coded hex.
*/

.growth {--gr-accent: var(--gray-color-7); --gr-tnum: "tnum" 1, "lnum" 1;}
.growth_scaling {--gr-accent: var(--green-color-1);}
.growth_growing {--gr-accent: var(--primary-color-3);}
.growth_stable  {--gr-accent: var(--gray-color-7);}
.growth_slowing {--gr-accent: var(--red-color-2);}
.growth_freeze  {--gr-accent: var(--red-color-1);}

/* verdict — the momentum score sits in the shared stat strip */
.growth_status {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    color: var(--gr-accent); font-size: 12px; font-weight: 500;
}
.growth_status::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
/* momentum meter mirrors the Hiring Focus bars: rounded grey track + gradient fill */
.growth_track {width: 100%; height: 6px; margin-top: 12px; border-radius: 3px; background: var(--gray-color-13); overflow: hidden;}
.growth_track > div {height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary-color-3) 0%, var(--secondary-color-4) 100%); transition: width .4s ease;}


.growth_delta {
    color: var(--gray-color-5); font-size: 12px; font-weight: 500; font-feature-settings: var(--gr-tnum);
}
.growth_delta_up {color: var(--green-color-1);}
.growth_delta_down {color: var(--red-color-1);}

/* dynamics chart */
.growth_chart {width: 100%; height: 72px;}
.growth_chart_svg {display: block; width: 100%; height: 100%;}
.growth_bar {fill: var(--primary-color-6);}
.growth_bar_hot {fill: var(--primary-color-3);}
.growth_bar_zero {fill: var(--gray-color-13);}

/* hiring focus — bars mirror Industry adoption (label + gradient meter + %) */
.growth_roles_legend {margin-top: 4px; color: var(--gray-color-5); font-size: 12px; line-height: 1.5;}
.growth_roles {display: flex; flex-direction: column; gap: 11px; margin-top: 14px;}
.growth_role {display: flex; align-items: center; gap: 12px;}
.growth_role_title {
    flex-shrink: 0; width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    color: var(--black-color); font-size: 13px; font-weight: 500;
}
.growth_role_bar {flex: 1; height: 6px; border-radius: 3px; background: var(--gray-color-13); overflow: hidden;}
.growth_role_fill {display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary-color-3) 0%, var(--secondary-color-4) 100%);}
.growth_role_share {
    flex-shrink: 0; color: var(--gray-color-5); font-size: 12px; font-weight: 600; white-space: nowrap; font-feature-settings: var(--gr-tnum);
}
.growth_role_share .up {color: var(--green-color-1);}
.growth_role_share .down {color: var(--red-color-1);}

/* quiet note instead of the old tinted callout */
.growth_insight {
    margin-top: 16px; padding-inline-start: 12px; border-inline-start: 2px solid var(--primary-color-6);
    color: var(--gray-color-5); font-size: 13px; line-height: 1.55;
}

/* timeline */
.growth_timeline {display: flex; flex-direction: column;}
.growth_event {display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--gray-color-10);}
.growth_event:last-child {border-bottom: none;}
/* each event carries a round tinted badge; the colour keys off the event's own icon class */
.growth_event_icon {
    flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border-radius: 50%; background: var(--primary-color-9); color: var(--primary-color-3); font-size: 12px; line-height: 1;
}
.growth_event_icon > i, .growth_event_icon::before {padding-inline-end: 0;}
.growth_event_icon.icon_plus_3 {background: var(--green-color-5); color: var(--green-color-1);}
.growth_event_icon.icon_minus_1 {background: var(--red-color-4); color: var(--red-color-1);}
.growth_event_icon.icon_star {background: var(--secondary-color-7); color: var(--secondary-color-1);}
.growth_event_text {flex: 1; min-width: 0; color: var(--gray-color-2); font-size: 14px; line-height: 1.4;}
.growth_event_date {
    color: var(--gray-color-7); font-size: 12px; white-space: nowrap; font-feature-settings: var(--gr-tnum);
}

@media screen and (max-width: 768px) {
    .growth_role_title, .growth_event_text {font-size: 15px;}
    .growth_chart {height: 84px;}
}

/* ------------------------------- FINANCIALS -------------------------------
    Rounds + investors merged into one section. Unscoped for the same reason as the other
    data blocks: it is also rendered inside company_window_details.html.
*/

/* sub-blocks here carry no top divider */
.co_fin .co_block {border-top: none;}

/* the stat strip runs tighter here and its figures step down to 24px */
.co_fin .co_stat {padding-top: 16px; padding-bottom: 16px;}
.co_fin .co_stat_value {margin-top: 6px; font-size: 24px; letter-spacing: -0.6px;}
.co_fin .co_stat_value.sm {font-size: 24px; letter-spacing: -0.6px;}

/* rounds table: Round hugs the left edge, the trailing figure column hugs the right */
.co_fin .co_table th:first-child, .co_fin .co_table td:first-child {padding-inline-start: 0;}
.co_fin .co_table th:last-child, .co_fin .co_table td:last-child {padding-inline-end: 0;}



/* ------------------------------- JOBS LIST -------------------------------
    Row treatment now lives in job.css as the base for .job_item_position, shared with /jobs and
    job_simular. Only the company-section specifics stay here.
*/

.company_jobs_item {margin-top: 0;}
/* nothing follows the last row inside the card, so a closing rule would float above the padding */
.company_jobs_item .job_item_position:last-of-type {border-bottom: none; padding-bottom: 0;}
/* the last row's own padding plus the card's 26px left too much air under the list */
.company_page .section.v3:has(.company_jobs_item) {padding-bottom: 20px;}

.company_jobs_empty {
    padding: 32px 20px; border: var(--surface-border); border-radius: var(--co-radius, 3px);
    color: var(--gray-color-5); font-size: 14px; text-align: center;
}

@media screen and (max-width: 768px) {
    .company_jobs_empty {font-size: 15px;}
}

/* ------------------------------- ROW (shared primitive) -------------------------------
    One list row for News, Facts, Products, Team and Investors. They used to each have their
    own markers, tinted date pills and icon links, which is what made the page read as five
    different designs. Unscoped so the details modal gets it too.
*/

/* the underline sits on the inner span so a leading icon is not struck through */
.co_link {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    color: var(--primary-color-3); font-size: 13px; text-decoration: none;
}
.co_link > i {flex-shrink: 0; font-size: 13px;}
.co_link > span {
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
}
.co_link:hover {color: var(--primary-color-1);}

/* tinted meta tag — the News date, kept as a tag rather than plain text */
.co_tag {
    display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--co-radius, 3px);
    background: var(--primary-color-9); color: var(--primary-color-3);
    font-size: 12px; font-weight: 500; white-space: nowrap;
}

.co_rows {display: flex; flex-direction: column; margin-top: 18px;}
.co_row {display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--gray-color-10);}
.co_row:last-child {border-bottom: none; padding-bottom: 0;}
/* News, Products and People close the section with a rule under the last row, so the first row gets a matching one on top */
.section.v3 > .co_rows > .co_row:first-child {border-top: 1px dashed var(--gray-color-10);}
.co_row_thumb {
    flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden;
    border-radius: var(--co-radius, 3px); background: var(--gray-color-15);
}
.co_row_thumb.round {border-radius: 50%;}
.co_row_thumb > img {width: 100%; height: 100%; object-fit: cover;}
.co_row_body {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px;}
.co_row_top {display: flex; align-items: baseline; justify-content: space-between; gap: 16px;}
.co_row_title {
    min-width: 0; color: var(--black-color); font-size: 15px; font-weight: 500; line-height: 1.4;
    text-decoration: none;
}
a.co_row_title:hover {color: var(--primary-color-3);}
.co_row_meta {
    color: var(--gray-color-6); font-size: 13px; white-space: nowrap;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.co_row_sub {color: var(--gray-color-5); font-size: 13px; line-height: 1.5;}
.co_row_desc {color: var(--gray-color-2); font-size: 14px; line-height: 1.5;}

@media screen and (max-width: 768px) {
    .co_row_top {flex-direction: column; align-items: flex-start; gap: 4px;}
    .co_row_title {font-size: 16px;}
    .co_row_sub, .co_row_desc {font-size: 15px;}
}

/* ------------------------------- FLAT TABLE ------------------------------- */

.co_table_wrap {overflow-x: auto; margin-top: 16px;}
.co_table {width: 100%; border-collapse: collapse; font-size: 14px;}
.co_table th {
    padding: 12px 16px; border-bottom: 1px dashed var(--gray-color-10);
    color: var(--gray-color-5); font-size: 12px; font-weight: 500; text-align: start; white-space: nowrap;
}
.co_table td {
    padding: 12px 16px; border-bottom: 1px dashed var(--gray-color-10);
    color: var(--gray-color-2); font-weight: 400; line-height: 1.4;
}
.co_table th.num, .co_table td.num {text-align: end; font-feature-settings: var(--co-tnum, "tnum" 1, "lnum" 1);}
.co_table td.key {color: var(--black-color);}
.co_table_caption {
    margin-bottom: 12px; color: var(--gray-color-5); font-size: 12px; font-weight: 400;
}

/* ------------------------------- STICKY ASIDE ------------------------------- */

@media screen and (min-width: 1025px) {
    .company_page .grid {gap: 16px;}
    .company_page .grid_column {gap: 16px;}
    /* anchor targets clear the fixed menu */
    .company_page .page_pane {scroll-margin-top: 66px;}
    /*
        The aside now holds only the rail (+ investors / rounds when present), so sticking the
        whole column is safe — which it was not while salaries and insights lived here. max-height
        + overflow keeps the bottom reachable if a company ever has a long investor list, so
        nothing can become unscrollable.
    */
    .company_page .grid_column:nth-of-type(2) {
        position: sticky; top: 66px; align-self: start;
        max-height: calc(100vh - 78px); overflow-y: auto;
        scrollbar-width: thin; scrollbar-color: var(--gray-color-11) transparent;
    }
}

@media screen and (max-width: 1024px) {
    .co_contents {display: none;}
    .company_page .page_header_title {font-size: 28px; letter-spacing: -1px;}
    .company_page .page_header_inner {padding: 16px 0;}
    .company_page .section.v3 {padding: 0; border: 0;}
    .co_callout {padding: 20px;}
    .co_table th, .co_table td {padding: 12px;}
}

@media screen and (max-width: 768px) {
    .company_page .page_header_title {font-size: 24px; letter-spacing: -0.6px;}
    .company_page .page_header_tags {font-size: 14px;}
    .company_page .section_title, .company_page .section.v3 > div:nth-of-type(1) {font-size: 20px;}
    .co_callout_text {font-size: 15px;}
}

/* ------------------------------- PRINT ------------------------------- */

.print .co_contents {display: none;}