/* ==========================================================================
   Outsourcing Portal - Service Information / Guideline UI
   --------------------------------------------------------------------------
   Shared "premium government service page" skin for the outsourcing
   guideline pages (application, renewal, deposit, license-fee, social-security).

   EVERY selector is namespaced with `ogr-` (Outsourcing Guideline) and the
   page background override requires BOTH `outsourcing` and `ogr-host` body
   classes, so no other page in the project is affected.

   Palette
   --------------------------------------------------------------------------
   Primary ......... #0F4C81 / #145DA0
   Primary ink ..... #0B3A63
   Primary soft .... #EAF2FA
   Secondary ....... #2E7D32
   Success ......... #16A34A
   Success soft .... #F1FBF5
   Warning ......... #F59E0B
   Background ...... #F5F8FC
   Card ............ #FFFFFF
   Text ............ #1F2937
   Muted ........... #64748B
   Border .......... #E2E8F0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HOST (background only for the guideline pages)
   -------------------------------------------------------------------------- */
body.outsourcing.ogr-host {
    background: #f5f8fc;
}

/* --------------------------------------------------------------------------
   1.1 LATIN LABELS
   On the Bengali locale the whole page inherits the Siyam Rupali webfont, which
   renders the small English labels (subtitles, step names) poorly. Those labels
   get the portal's Latin face instead; anything explicitly marked lang="bn"
   (the Bengali step titles) falls back to the inherited Bengali face.
   -------------------------------------------------------------------------- */
.ogr-hero__subtitle,
.ogr-section__subtitle,
.ogr-step__title {
    font-family: 'Source Sans Pro', 'Segoe UI', Arial, Helvetica, sans-serif;
}

.ogr [lang="bn"] {
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   2. NAVIGATION ROW (breadcrumb stays as-is, only the back link is skinned)
   -------------------------------------------------------------------------- */
.ogr-topbar {
    margin: 0 0 16px;
}

.ogr-back {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #145da0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 76, 129, 0.06);
    -webkit-transition: background-color 0.2s ease, border-color 0.2s ease,
                        box-shadow 0.2s ease, transform 0.2s ease;
}

.ogr-back i {
    margin-right: 8px;
    font-size: 15px;
    position: static;
    top: 0;
}

.ogr-back:hover,
.ogr-back:focus {
    background: #f5f9fd;
    border-color: #c9dcee;
    color: #0f4c81;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 76, 129, 0.12);
    transform: translateX(-2px);
}

.ogr-back:focus {
    outline: 2px solid #145da0;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. MAIN CARD
   -------------------------------------------------------------------------- */
.ogr {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 76, 129, 0.08);
    padding: 38px 42px 42px;
    margin: 0 0 30px;
    color: #1f2937;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Thin brand accent along the top edge of the card */
.ogr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #0f4c81 0%, #145da0 55%, #16a34a 100%);
}

/* --------------------------------------------------------------------------
   4. PAGE HEADER
   -------------------------------------------------------------------------- */
.ogr-hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    position: relative;
}

.ogr-hero__icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    margin-right: 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, #145da0 0%, #0f4c81 100%);
    color: #ffffff;
    font-size: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-shadow: 0 10px 22px rgba(15, 76, 129, 0.26);
    position: static;
    top: 0;
}

.ogr-hero__body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.ogr-hero__title {
    margin: 0;
    padding: 0;
    border: 0;
    color: #0f4c81;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
}

.ogr-hero__subtitle {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1.5;
}

.ogr-hero__desc {
    margin: 14px 0 0;
    color: #1f2937;
    font-size: 15.5px;
    line-height: 1.9;
    max-width: 68ch;
}

.ogr-hero__divider {
    height: 1px;
    margin: 26px 0 0;
    border: 0;
    background: linear-gradient(90deg, #e2e8f0 0%, rgba(226, 232, 240, 0) 100%);
}

/* --------------------------------------------------------------------------
   5. TOP ACTION BUTTONS
   -------------------------------------------------------------------------- */
.ogr-actions {
    margin: 24px 0 0;
}

.ogr-action {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 46px;
    margin: 0 12px 12px 0;
    padding: 12px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f4c81;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 76, 129, 0.06);
    -webkit-transition: background-color 0.2s ease, border-color 0.2s ease,
                        box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ogr-action i {
    font-size: 18px;
    margin-right: 10px;
    position: static;
    top: 0;
    -webkit-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
}

.ogr-action__arrow {
    margin-right: 0 !important;
    margin-left: 10px;
    font-size: 15px !important;
    opacity: 0.65;
}

.ogr-action:hover,
.ogr-action:focus {
    text-decoration: none;
    color: #0f4c81;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 76, 129, 0.14);
}

.ogr-action:hover .ogr-action__arrow,
.ogr-action:focus .ogr-action__arrow {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
}

.ogr-action:focus {
    outline: 2px solid #145da0;
    outline-offset: 2px;
}

.ogr-action--primary {
    background: #f5f9fd;
    border-color: #d5e4f1;
    color: #0f4c81;
}

.ogr-action--primary:hover,
.ogr-action--primary:focus {
    background: #eaf2fa;
    border-color: #bfd6ec;
    color: #0b3a63;
}

.ogr-action--warning {
    background: #fffaf0;
    border-color: #f7dfb4;
    color: #b45309;
}

.ogr-action--warning:hover,
.ogr-action--warning:focus {
    background: #fff4e0;
    border-color: #f2cd8a;
    color: #92400e;
}

/* --------------------------------------------------------------------------
   6. SECTION HEADER
   -------------------------------------------------------------------------- */
.ogr-section {
    margin-top: 40px;
}

.ogr-section__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 4px;
}

.ogr-section__num {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: 14px;
    border: 1px solid #d5e4f1;
    border-radius: 12px;
    background: #eaf2fa;
    color: #145da0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ogr-section__body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.ogr-section__title {
    margin: 0;
    padding: 0;
    border: 0;
    color: #0b3a63;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
}

.ogr-section__subtitle {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.5;
}

.ogr-section__rule {
    display: block;
    width: 56px;
    height: 3px;
    margin: 12px 0 20px;
    border-radius: 2px;
    background: #145da0;
}

/* Lead paragraph that sits directly under a section header */
.ogr-lead {
    margin: 0 0 18px;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.9;
}

.ogr-lead strong {
    color: #0b3a63;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. RULES LIST
   -------------------------------------------------------------------------- */
.ogr-rules {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

.ogr-rule {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    padding: 20px 22px;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.ogr-rule:last-child {
    border-bottom: 0;
}

.ogr-rule:hover {
    background: #f8fbfe;
}

.ogr-rule__icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-right: 16px;
    border-radius: 10px;
    background: #eaf2fa;
    color: #145da0;
    font-size: 19px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: static;
    top: 0;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ogr-rule:hover .ogr-rule__icon {
    background: #145da0;
    color: #ffffff;
}

.ogr-rule__body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.ogr-rule__label {
    margin: 0 0 4px;
    color: #0f4c81;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

.ogr-rule__text {
    margin: 0;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.9;
}

.ogr-rule__text strong {
    color: #0b3a63;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   8. IMPORTANT INFORMATION CALLOUT
   -------------------------------------------------------------------------- */
.ogr-callout {
    padding: 24px 26px;
    border: 1px solid #cdeada;
    border-left: 5px solid #16a34a;
    border-radius: 14px;
    background: #f1fbf5;
}

.ogr-callout__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ogr-callout__icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-right: 12px;
    border-radius: 50%;
    background: #16a34a;
    color: #ffffff;
    font-size: 19px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-shadow: 0 6px 14px rgba(22, 163, 74, 0.26);
    position: static;
    top: 0;
}

.ogr-callout__title {
    margin: 0;
    color: #2e7d32;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

.ogr-callout__text {
    margin: 14px 0 0;
    color: #1f2937;
    font-size: 15px;
    line-height: 2.1;
}

.ogr-callout__text strong {
    color: #2e7d32;
    font-weight: 700;
}

/* Blue variant - for neutral "important information" notices
   (the green default is reserved for worked examples / success notes) */
.ogr-callout--info {
    border-color: #c9dcee;
    border-left-color: #145da0;
    background: #f2f8fd;
}

.ogr-callout--info .ogr-callout__icon {
    background: #145da0;
    box-shadow: 0 6px 14px rgba(20, 93, 160, 0.26);
}

.ogr-callout--info .ogr-callout__title {
    color: #0b3a63;
}

.ogr-callout--info .ogr-callout__text strong {
    color: #0b3a63;
}

/* Amount chips */
.ogr-chip {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 2px 11px;
    border: 1px solid #a7d9ba;
    border-radius: 999px;
    background: #ffffff;
    color: #226a35;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.8;
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(46, 125, 50, 0.08);
}

.ogr-chip--total {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.24);
}

/* --------------------------------------------------------------------------
   9. SYSTEM ACTIONS TIMELINE
   -------------------------------------------------------------------------- */
.ogr-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ogr-step {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 0 0 20px;
}

.ogr-step:last-child {
    margin-bottom: 0;
}

.ogr-step__marker {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 64px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 18px;
}

/* Vertical connector between the steps */
.ogr-step:not(:last-child) .ogr-step__marker::after {
    content: '';
    position: absolute;
    top: 64px;
    bottom: -20px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: #dbe7f2;
}

.ogr-step__badge {
    position: relative;
    z-index: 2;
    width: 46px;
    height: 46px;
    border: 2px solid #145da0;
    border-radius: 50%;
    background: #ffffff;
    color: #145da0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    top: 0;
    -webkit-transition: background-color 0.22s ease, color 0.22s ease,
                        box-shadow 0.22s ease;
    transition: background-color 0.22s ease, color 0.22s ease,
                box-shadow 0.22s ease;
}

.ogr-step__card {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 76, 129, 0.05);
    -webkit-transition: -webkit-transform 0.22s ease, box-shadow 0.22s ease,
                        border-color 0.22s ease;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
                border-color 0.22s ease;
}

.ogr-step:hover .ogr-step__card,
.ogr-step:focus-within .ogr-step__card {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    border-color: #d3e2ef;
    box-shadow: 0 12px 26px rgba(15, 76, 129, 0.12);
}

.ogr-step:hover .ogr-step__badge,
.ogr-step:focus-within .ogr-step__badge {
    background: #145da0;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 76, 129, 0.22);
}

.ogr-step__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 8px;
}

.ogr-step__icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 9px;
    background: #eaf2fa;
    color: #145da0;
    font-size: 17px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: static;
    top: 0;
    -webkit-transition: background-color 0.22s ease, color 0.22s ease;
    transition: background-color 0.22s ease, color 0.22s ease;
}

.ogr-step:hover .ogr-step__icon,
.ogr-step:focus-within .ogr-step__icon {
    background: #145da0;
    color: #ffffff;
}

.ogr-step__title {
    margin: 0;
    color: #64748b;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.5;
}

.ogr-step__text {
    margin: 0;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.9;
}

.ogr-step__text strong {
    color: #0b3a63;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. CALCULATION FORMULA BLOCK
   Used by the pages that publish an explicit formula (worker social security
   fund, license fee). The formula lines themselves are rendered as monospace
   "equation" strips so the arithmetic reads clearly.
   -------------------------------------------------------------------------- */
.ogr-formula {
    margin: 22px 0 0;
    padding: 24px 26px;
    border: 1px solid #d7e3f1;
    border-left: 5px solid #145da0;
    border-radius: 14px;
    background: #f7fafe;
}

.ogr-formula__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 16px;
}

.ogr-formula__icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-right: 12px;
    border-radius: 50%;
    background: #145da0;
    color: #ffffff;
    font-size: 19px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-shadow: 0 6px 14px rgba(20, 93, 160, 0.26);
    position: static;
    top: 0;
}

.ogr-formula__title {
    margin: 0;
    color: #0b3a63;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.5;
}

.ogr-formula__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ogr-formula__item {
    padding: 12px 0;
    border-top: 1px dashed #dbe7f2;
}

.ogr-formula__item:first-child {
    padding-top: 0;
    border-top: 0;
}

.ogr-formula__item:last-child {
    padding-bottom: 0;
}

.ogr-formula__text {
    margin: 0;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.9;
}

.ogr-formula__text strong {
    color: #0b3a63;
    font-weight: 700;
}

/* The literal equation, e.g. "New Basic = Basic + 5% Interest" */
.ogr-formula__eq {
    display: block;
    margin-top: 8px;
    padding: 8px 14px;
    border: 1px solid #dbe7f2;
    border-radius: 8px;
    background: #ffffff;
    color: #145da0;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   11. DATA TABLE
   Wide calculation tables (6 columns) get a horizontal scroll container so the
   card never overflows on a phone.
   -------------------------------------------------------------------------- */
.ogr-table-wrap {
    margin: 20px 0 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.ogr-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ogr-table {
    width: 100%;
    min-width: 660px;
    margin: 0;
    border-collapse: collapse;
    font-size: 14.5px;
}

.ogr-table th,
.ogr-table td {
    padding: 12px 14px;
    text-align: center;
    border-bottom: 1px solid #eef2f7;
    line-height: 1.6;
}

.ogr-table thead th {
    background: #0f4c81;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.ogr-table tbody tr {
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.ogr-table tbody tr:nth-child(even) {
    background: #f8fbfe;
}

.ogr-table tbody tr:hover {
    background: #eef5fc;
}

.ogr-table tbody tr:last-child td {
    border-bottom: 0;
}

.ogr-table td {
    color: #1f2937;
    white-space: nowrap;
}

/* Emphasised summary row at the bottom of the table */
.ogr-table__total td {
    background: #eaf2fa;
    color: #0b3a63;
    font-weight: 700;
    border-top: 2px solid #bfd6ec;
    border-bottom: 0;
}

/* --------------------------------------------------------------------------
   12. BOTTOM CALL TO ACTION (optional block, English version)
   -------------------------------------------------------------------------- */
.ogr-cta {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #eef2f7;
    text-align: center;
}

.ogr-cta .ogr-action {
    margin-right: 0;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   13. RESPONSIVE - LAPTOP
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .ogr {
        padding: 34px 34px 38px;
    }
}

@media (max-width: 991px) {
    .ogr {
        padding: 30px 26px 32px;
    }

    .ogr-hero__title {
        font-size: 26px;
    }

    .ogr-hero__icon {
        width: 58px;
        height: 58px;
        font-size: 27px;
        border-radius: 16px;
        margin-right: 16px;
    }
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE - TWO COLUMN TIMELINE (tablet landscape and up)
   -------------------------------------------------------------------------- */
@media (min-width: 860px) {
    .ogr-steps {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* In a two column grid the even items close their column */
    .ogr-step:nth-child(2n) .ogr-step__marker::after {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE - TABLET / MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ogr {
        padding: 26px 20px 28px;
        border-radius: 14px;
    }

    .ogr::before {
        border-radius: 14px 14px 0 0;
    }

    .ogr-topbar {
        margin-bottom: 12px;
    }

    .ogr-hero {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .ogr-hero__icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
        border-radius: 15px;
        margin-right: 14px;
    }

    .ogr-hero__title {
        font-size: 22px;
    }

    .ogr-hero__subtitle {
        font-size: 13px;
    }

    .ogr-hero__desc {
        margin-top: 12px;
        font-size: 15px;
        line-height: 1.85;
    }

    .ogr-hero__divider {
        margin-top: 22px;
    }

    .ogr-actions {
        margin-top: 20px;
    }

    /* Stack the action buttons, keep a comfortable touch target */
    .ogr-action {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        margin: 0 0 12px;
        font-size: 14.5px;
    }

    .ogr-action__arrow {
        margin-left: auto !important;
    }

    .ogr-section {
        margin-top: 32px;
    }

    .ogr-section__num {
        width: 40px;
        height: 40px;
        font-size: 14px;
        border-radius: 11px;
        margin-right: 12px;
    }

    .ogr-section__title {
        font-size: 18px;
    }

    .ogr-section__rule {
        margin: 10px 0 16px;
    }

    .ogr-rule {
        padding: 16px 16px;
    }

    .ogr-rule__icon {
        width: 36px;
        height: 36px;
        font-size: 17px;
        border-radius: 9px;
        margin-right: 12px;
    }

    .ogr-rule__label,
    .ogr-rule__text,
    .ogr-step__text,
    .ogr-callout__text {
        font-size: 14.5px;
        line-height: 1.85;
    }

    .ogr-callout {
        padding: 20px 18px;
        border-left-width: 4px;
    }

    .ogr-callout__title {
        font-size: 16px;
    }

    .ogr-chip {
        font-size: 13px;
        padding: 1px 9px;
    }

    .ogr-step {
        margin-bottom: 18px;
    }

    .ogr-step:not(:last-child) .ogr-step__marker::after {
        bottom: -18px;
    }

    .ogr-step__marker {
        width: 56px;
        padding-top: 16px;
    }

    .ogr-step__badge {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .ogr-step:not(:last-child) .ogr-step__marker::after {
        top: 58px;
    }

    .ogr-step__card {
        padding: 15px 16px;
    }

    .ogr-cta {
        margin-top: 28px;
        padding-top: 24px;
    }

    .ogr-formula {
        padding: 20px 18px;
        border-left-width: 4px;
    }

    .ogr-formula__title {
        font-size: 15.5px;
    }

    .ogr-formula__text {
        font-size: 14.5px;
        line-height: 1.85;
    }

    .ogr-formula__eq {
        font-size: 13px;
        padding: 7px 12px;
    }

    .ogr-table-wrap {
        margin-top: 16px;
        border-radius: 10px;
    }

    .ogr-table {
        min-width: 600px;
        font-size: 14px;
    }

    .ogr-table th,
    .ogr-table td {
        padding: 10px 12px;
    }
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE - SMALL PHONES
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
    .ogr {
        padding: 22px 16px 26px;
    }

    .ogr-hero {
        display: block;
    }

    .ogr-hero__icon {
        margin: 0 0 14px;
    }

    .ogr-hero__title {
        font-size: 20px;
    }

    .ogr-section__title {
        font-size: 17px;
    }

    .ogr-step__marker {
        width: 50px;
    }

    .ogr-step:not(:last-child) .ogr-step__marker::after {
        top: 56px;
    }

    .ogr-step__badge {
        width: 40px;
        height: 40px;
        font-size: 13.5px;
    }

    .ogr-step__title {
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   17. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ogr-action,
    .ogr-action i,
    .ogr-back,
    .ogr-rule,
    .ogr-rule__icon,
    .ogr-step__card,
    .ogr-step__badge,
    .ogr-step__icon,
    .ogr-table tbody tr {
        -webkit-transition: none !important;
        transition: none !important;
    }

    .ogr-action:hover,
    .ogr-back:hover,
    .ogr-step:hover .ogr-step__card,
    .ogr-step:focus-within .ogr-step__card {
        -webkit-transform: none;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   18. PRINT
   -------------------------------------------------------------------------- */
@media print {
    body.outsourcing.ogr-host {
        background: #ffffff;
    }

    .ogr {
        border: 1px solid #cccccc;
        box-shadow: none;
    }

    .ogr-topbar,
    .ogr-actions,
    .ogr-cta {
        display: none;
    }

    /* let the calculation table print at full width instead of being cut off */
    .ogr-table-scroll {
        overflow: visible;
    }

    .ogr-table {
        min-width: 0;
    }
}