.icon-outline-view { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2' width='12' height='2' rx='1'/%3E%3Crect x='5' y='7' width='9' height='2' rx='1'/%3E%3Crect x='8' y='12' width='6' height='2' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2' width='12' height='2' rx='1'/%3E%3Crect x='5' y='7' width='9' height='2' rx='1'/%3E%3Crect x='8' y='12' width='6' height='2' rx='1'/%3E%3C/svg%3E"); }

.icon-export-view, .icon-import-view { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.icon-export-view { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='7' y='1' width='2' height='7'/%3E%3Cpolygon points='3,7 13,7 8,13'/%3E%3Crect x='2' y='13' width='12' height='2' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='7' y='1' width='2' height='7'/%3E%3Cpolygon points='3,7 13,7 8,13'/%3E%3Crect x='2' y='13' width='12' height='2' rx='1'/%3E%3C/svg%3E"); }
.icon-import-view { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='7' y='8' width='2' height='7'/%3E%3Cpolygon points='3,9 13,9 8,3'/%3E%3Crect x='2' y='13' width='12' height='2' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='7' y='8' width='2' height='7'/%3E%3Cpolygon points='3,9 13,9 8,3'/%3E%3Crect x='2' y='13' width='12' height='2' rx='1'/%3E%3C/svg%3E"); }

:root  {
	--accordian-color: #212529;
	--accordian-text: #ffffff;
	--button-primary: #0d6efd;
	--button-primary-border: #0d6efd;
	--button-primary-text: #ffffff;
	--button-light: #f0f0f0;
	--button-light-border: #e0e0e0;
	--button-light-text: #000000;
	--button-delete: #666666;
	--button-delete-border: #666666;
	--button-delete-text: #ffffff;
	--table-header: #212529;
	--table-header-border: #4a525a;
	--carouselpageheader-height: 200px;
}

.site-container { width: 100%; max-width: none; padding-left: 25px; padding-right: 25px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

header { background-image: linear-gradient(to bottom, #363636, #2a2a2a, #1e1e1e, #121212, #000000); border-bottom: var(--color3) 5px solid; }
header .site-container { padding-top: 5px; padding-bottom: 10px; }
header .title { color: #fff; font-size: 26px; font-weight: 600; text-transform: uppercase; }
header .navbar { padding: 0 !important; margin: 0 !important; color: #fff !important; }
header .navbar-brand { margin: 0; padding: 0; }
header .navbar-nav { padding: 0 !important; margin: 0 !important; }
header .container-fluid { margin-left: 0 !important; padding-left: 0 !important; }
header .nav-item a { margin: 0 15px 0 0 !important; padding: 0 15px 0 0 !important; }
header .nav-item a { border-right: #666 1px solid; }
header .nav-item:last-child a { border-right: none; }
header .nav-item a, header .nav-item a:active, header .nav-item a:focus { color: #fff; }
header .nav-item a:hover { color: #ddd; }
header .dropdown .nav-item a { color: #000 !important; border: 0; padding: 3px 0 !important; margin: 5px 10px !important; white-space: nowrap; }
header .dropdown .nav-item:hover { background: #f2f2f2; }
header .navbar-toggler { position: absolute; right: 0 !important; top: -21px !important; font-size: 22px; font-weight: 600; line-height: 16px; margin: 0 !important; padding: 0 2px !important; color: #fff !important; border: none; }
header .navbar-toggler:focus, header .navbar-toggler:active, header .navbar-toggler-icon:focus { outline: none; box-shadow: none; }
header .navbar-toggler-icon { height: auto !important; width: auto !important; background: none; margin: 0 !important; padding: 0 !important; }
main .site-container { margin: 15px auto; min-height: 300px; position: relative; }
footer .site-container { border-top: #999 1px solid; padding-top: 15px; margin-top: 45px; }
label { cursor: pointer; }
h1 { margin: 0 0 8px 0; }

.table td, .table th { border: #ddd 1px solid; padding: 3px 10px; white-space: nowrap; }
.table th, .table tfoot td { background: var(--table-header); border: var(--table-header-border) 1px solid; color: #fff; font-weight: 600; padding: 2px 10px; }
.table .expand { width: 100% !important; }
.table th a { text-decoration: none; color: #fff; }
.table td a { text-decoration: none; color: #000; }
.table .edge { padding-right: 8px; }

.filters { margin: 0 0 25px 0; }
.filters label { display: inline-block !important; margin: 0 5px 0 0; padding: 0; }
.filters .row { margin-top: 5px; }
.filters .row:first-child { margin-top: 0 !important; }

.pagination .page-link { color: #000 !important; padding-left: 9px !important; padding-right: 9px !important; }
.pagination .active .page-link { color: #fff !important; }
.pagination2 { display: none; }

.alert p { margin: 0; }
.alert ul { padding: 0 !important; margin: 0 !important; }
.alert li { padding: 0 !important; margin: 0 0 0 15px !important; }

.col-form-label { white-space: nowrap; }

.modal .modal-header { border: none !important; text-align: center !important; display: block; }
.modal .modal-footer { border: none !important; text-align: center !important; display: block; padding-top: 0 !important; }

.breadcrumbs { font-size: 16px; margin: 10px 0 0 0; background: #f0f0f0; padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.breadcrumbs a { color: #000; text-decoration: none; }

.form-check-input { vertical-align: middle; margin: 0 5px 0 0; }
.form-check-label { vertical-align: middle; margin: 0 15px 0 0; }

.btn { min-width: 125px; margin-bottom: 5px; }
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: var(--button-primary) !important; border-color: var(--button-primary-border) !important; color: var(--button-primary-text) !important; }
.btn-light, .btn-light:hover, .btn-light:active, .btn-light:focus { background: var(--button-light) !important; border-color: var(--button-light-border) !important; color: var(--button-light-text) !important; }
.btn-delete, .btn-delete:hover, .btn-delete:active, .btn-delete:focus { background: var(--button-delete) !important; border-color: var(--button-delete-border) !important; color: var(--button-delete-text) !important; }

.accordion-item { margin-bottom: 8px; }
.accordion-item:not(:last-child) { border: none !important; }
.accordion-button { background: var(--accordian-color) !important; padding: 10px 15px; color: var(--accordian-text) !important; }
.accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.accordion-button:not(.collapsed)::after { 1px solid; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.accordion-button:focus { box-shadow: none; }

.sortable { list-style-type: none; margin: 0; padding: 0; }
.sortable li { cursor: pointer; margin: 5px 0; padding: 5px 10px; list-style-type: none; border: #ccc 1px solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

.multifileupload-area { width: 100% !important; border: #212529 2px dashed; text-align: center; padding: 25px; margin: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.multifileupload-area:hover { cursor: pointer; }
.multifileupload-area .bi-cloud-upload { color: #212529; font-size: 100px; margin: 10px 0; }
.multifileupload-area .smaller { font-size: 10px; }
.multifileupload-filename { display: none; }
.multifileupload-files { margin: 5px 0; }
.multifileupload-files .multifileupload-thumbnail { text-align: center; font-size: 10px; width: 50px; height: 50px; border: #000 1px solid; float: left; margin: 2px; }
.multifileupload-files .multifileupload-thumbnail img { width: 48px; height: 48px !important; }
.multifileupload-spinner { display: none; color: #fff; font-weight: bold; text-align: center; padding: 200px 0; background: rgba(255, 255, 255, 0.85); z-index: 9999999999 !important; width: 100%; height: 100%; min-height: 100%; position: fixed; top: 0; left: 0; }

.validation-required { margin: 0 0 3px 5px; color: #f00; font-size: 11px; vertical-align: bottom; display: inline-block; }
.validation-error { margin: 0 0 2px 5px; color: #f00; font-size: 12px; vertical-align: bottom; display: inline-block; }

.w100 { width: 100px !important; }
.w150 { width: 150px !important; }
.w200 { width: 200px !important; }
.labelwrap { white-space: normal; }
.field2line { padding-top: 12px; }
.captcha { border: #ccc 1px solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 2px; }
.red { color: #f00; }
.green { color: #090; }
.bold { font-weight: bold; }

.carouselpageheader { margin: 1px 0; text-align: center; cursor: pointer; }
.carouselpageheader .carousel-item { position: relative; height: var(--carouselpageheader-height); background: #000; display: table; }
.carouselpageheader .transbox1 { opacity: 0.5; position: absolute; top: 0; left: 0; background-size: cover; background-position: center center; width: 100%; height: var(--carouselpageheader-height); }
.carouselpageheader .transbox2 { position: absolute; top: 0; left: 0; width: 100%; height: var(--carouselpageheader-height); }
.carouselpageheader .transbox2 .transbox2inner { position: absolute; top: 50%; transform: translateY(-50%); text-align: center; width: 100%; }
.carouselpageheader .title { font-size: 28px; font-weight: bold; color: #fff; }
.carouselpageheader .desc { font-size: 16px; color: #fff; max-width: 1000px; margin: 0 auto; }
.carouselpageheader .btn-primary { margin: 10px 0; }

.bi-star-fill.req { color: #f00 !important; font-size: 12px; vertical-align: top; margin-left: 5px; }

.tag-pill { display: inline-block; padding: 4px 14px; margin: 0 6px 6px 0; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; opacity: 0.2; filter: grayscale(60%); transition: opacity .15s ease-in-out, filter .15s ease-in-out; user-select: none; }
.tag-pill.active { opacity: 1; filter: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, .15) inset; }
.tag-pill:not(.active):hover { opacity: 1; filter: none; }
.tag-pill.link-pill { cursor: default; }
.link-pill-remove { color: inherit; margin-left: 8px; text-decoration: none; font-weight: 700; }
.link-pill-remove:hover { color: inherit; opacity: .7; }

/* Collapsible "browse a full list" picker header (linked-entries picker, and reusable for similar pickers) */
.attr-card-toggle { border: 0; margin: 0; background-color: transparent; cursor: pointer; text-align: left; line-height: normal; }
.attr-card-toggle:hover { background-color: #eef0f2 !important; }
.attr-card-toggle:focus { outline: none; box-shadow: none; }
.attr-card-arrow { transition: transform 0.2s ease; }
.attr-card-toggle[aria-expanded="true"] .attr-card-arrow { transform: rotate(90deg); }

/* Bootstrap's .form-check floats the checkbox against a negative-margin label (misaligning once
   the label wraps, e.g. a long breadcrumb path) and reserves a min-height/margin sized for its
   own spaced-out form layout - flexbox with the paddings/min-height zeroed out gives a tight,
   evenly-centered row instead, sized for a dense pickable list */
.link-option { display: flex; align-items: center; gap: 8px; padding: 2px 4px; margin: 0; min-height: 0; }
.link-option .form-check-input { float: none; margin: 0; flex-shrink: 0; }
.link-option .form-check-label { margin-bottom: 0; line-height: 1.3; }

.entryform { max-width: 900px; }
.entryform .field-card > .card-header { display: block; font-weight: 600; }
.entryform .field-card { overflow: hidden; transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out; }
.entryform .field-card:focus-within, .entryform .field-card.focused { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }

.field-card-body { padding: 0 !important; }
.field-card-body .form-control, .field-card-body .form-select { border: none; border-radius: 0; box-shadow: none !important; }

textarea.compact-textarea { height: 60px; overflow-y: hidden; transition: height .2s ease-in-out; resize: none; }
textarea.compact-textarea:focus { height: 220px; overflow-y: auto; resize: vertical; }

.richtext-wrap { max-height: 90px; overflow: hidden; transition: max-height .25s ease-in-out; cursor: text; }
.richtext-wrap.expanded { max-height: none; overflow: visible; cursor: default; }
.richtext-wrap:not(.expanded) .tox-editor-header { display: none !important; }
.richtext-wrap:not(.expanded) .tox-statusbar { display: none !important; }
.richtext-wrap .tox-tinymce { border: none !important; }
.richtext-wrap .tox-statusbar { border-top: 1px solid #eee !important; }
.richtext-wrap .tox-statusbar__path, .richtext-wrap .tox-statusbar__wordcount { display: none !important; }

.colorpicker-element .input-group-addon, .colorpicker-element .add-on { display: flex; align-items: stretch; border-left: 1px solid #000 !important; box-sizing: border-box; }
.colorpicker-element .input-group-addon i, .colorpicker-element .add-on i { display: block; cursor: pointer; width: 40px !important; height: 100% !important; -webkit-border-bottom-right-radius: 5px !important; -moz-border-radius-bottomright: 5px !important; border-bottom-right-radius: 5px !important; border-left: 1px solid #ccc !important; box-sizing: border-box; }

.xbooknavigation { position: absolute; right: 0; top: 0; }
.booknavigation .action { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #dcdfe3; border-radius: 10px; background: #fff; color: #212529; text-decoration: none; transition: all .15s ease-in-out; }
.booknavigation .action:hover { background: #f8f9fa; border-color: #bfc6ce; color: #0d6efd; }
.booknavigation .action.active { background: #e9f2ff; border-color: #86b7fe; color: #0d6efd; }
.booknavigation .action i { font-size: 1.1rem; line-height: 1; }
.booknavigation form .form-control { margin-bottom: 0; }
.booknavigation form .btn { margin-bottom: 0; }

.page-breadcrumb-bar { padding: 8px 16px 3px; box-shadow: 0 0 0 1px #dcdfe3; border-radius: 10px; background: #f8f9fa; }
.page-breadcrumb-bar .breadcrumb { margin-bottom: 0; }
.page-breadcrumb-bar a { color: inherit; text-decoration: none; }

.outline-fieldbar { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; box-shadow: 0 0 0 1px #dcdfe3; border-radius: 10px; background: #f8f9fa; position: sticky; top: 25px; z-index: 10; }
.outline-fieldbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -25px; height: 25px; background: linear-gradient(to bottom, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 0.85) 10%, rgba(248, 249, 250, 0) 100%); pointer-events: none; }
.outline-fieldbar::before { content: ""; position: absolute; left: 0; right: 0; top: -25px; height: 25px; background: linear-gradient(to top, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 0.85) 10%, rgba(248, 249, 250, 0) 100%); pointer-events: none; }
.outline-fieldbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.outline-fieldbar-row-divider { padding-top: 12px; border-top: 1px solid #dcdfe3; }
.outline-fieldbar-label { font-weight: 600; }
.outline-fieldbar-fields { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: 1 1 auto; }
.outline-field-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; white-space: nowrap; }
.outline-fieldbar-actions { display: flex; gap: 6px; }

/* .tag-pill's own margin (meant for free-wrapping pill lists elsewhere) doubles up with this
   row's flex gap and its bottom margin throws off centering against the "Filter by:" label -
   zero it here and let the row's gap do the spacing instead */
#outlineFilterPills { gap: 4px 8px; }
#outlineFilterPills .tag-pill { margin: 0; }

.outline-layout { display: flex; align-items: flex-start; gap: 28px; }
.outline-nav-sidebar { flex: 0 0 260px; position: sticky; top: 115px; min-height: 500px; max-height: calc(100vh - 135px); overflow-y: auto; padding: 12px; border: 1px solid #dcdfe3; border-radius: 10px; background: #fff; }
.outline-main { flex: 1 1 auto; min-width: 0; }

.outline-nav-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; font-size: 0.85rem; }
.outline-nav-list { list-style: none; margin: 0; padding-left: 16px; }
.outline-nav-sidebar > .outline-nav-list { padding-left: 0; }
.outline-nav-item { margin: 2px 0; max-width: 100%; }
.outline-nav-item.collapsed > .outline-nav-list { display: none; }
.outline-nav-row { display: flex; align-items: center; gap: 4px; }
.outline-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; cursor: pointer; color: #6c757d; flex: 0 0 auto; }
.outline-nav-toggle::before { content: "\f282"; font-family: "bootstrap-icons"; font-size: 13px; transition: transform .1s ease-in-out; }
.outline-nav-item.collapsed > .outline-nav-row > .outline-nav-toggle::before { transform: rotate(-90deg); }
.outline-nav-link, .outline-nav-link:visited { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: #212529; font-size: 0.9rem; }
.outline-nav-link:hover { text-decoration: underline; }
.outline-nav-link.outline-nav-selected { font-weight: 700; }
.outline-nav-edit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #6c757d; text-decoration: none; font-size: 0.9rem; opacity: 0; transition: opacity .1s ease-in-out; }
.outline-nav-row:hover .outline-nav-edit { opacity: 1; }
.outline-nav-edit:hover { color: #0d6efd; }

.outline-back-to-top { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; min-width: 0; margin-bottom: 0; border-radius: 50%; border: none; background: #0d6efd; color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); cursor: pointer; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s ease-in-out; }
.outline-back-to-top.visible { opacity: 1; pointer-events: auto; }
.outline-back-to-top:hover { background: #0b5ed7; }

.outline-content { max-width: none; }
.outline-node { padding: 10px 0; border-bottom: 1px solid #eee; scroll-margin-top: 115px; }
.outline-title { font-weight: 700; }
.outline-level-1 { padding-left: 20px; }
.outline-level-2 { padding-left: 40px; }
.outline-level-3 { padding-left: 60px; }
.outline-level-4 { padding-left: 80px; }
.outline-level-5 { padding-left: 100px; }
.outline-level-6 { padding-left: 120px; }
.outline-level-0 .outline-title { font-size: 1.6rem; }
.outline-level-1 .outline-title { font-size: 1.35rem; }
.outline-level-2 .outline-title { font-size: 1.15rem; }
.outline-level-3 .outline-title { font-size: 1.05rem; }
.outline-level-4 .outline-title { font-size: 1rem; }
.outline-level-5 .outline-title { font-size: 0.95rem; }
.outline-level-6 .outline-title { font-size: 0.9rem; }
.outline-field { margin-top: 8px; }

/* Shown only because a descendant matches the active filter, not because this entry itself does -
   kept for hierarchy context; the header stays black and readable, everything else is muted so it
   doesn't read as an actual match (opacity would grey the title out too, so color is used instead) */
.outline-filtered-context { color: #999; }
.outline-filtered-context .outline-title { color: #000; }
.outline-field-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; }
.outline-field-value p { margin: 0 0 8px 0; }
.outline-field-value p:last-child { margin-bottom: 0; }

.skeleton-bar { display: inline-block; background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size: 400% 100%; animation: outline-skeleton-shimmer 1.4s ease infinite; border-radius: 4px; vertical-align: middle; }
.skeleton-bar-inline { width: 220px; max-width: 60%; height: 12px; }
.skeleton-bar-line { display: block; width: 100%; height: 12px; margin-top: 6px; }
.skeleton-bar-line.short { width: 60%; }
@keyframes outline-skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (max-width: 1400px) {
}

@media (max-width: 1200px) {
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {
	header .title { font-size: 16px; }
	header .nav-item a { border: none !important; margin: 5px 0 !important; color: #fff !important; }
	header .nav-item ul{ background: none !important; }
	header .dropdown .nav-item a { color: #fff !important; border: 0; padding: 3px 0 !important; margin: 5px 10px !important; white-space: nowrap; }
	header .dropdown .nav-item:hover { background: none; }
	.pagination1 { display: none; }
	.pagination2 { display: block; }
	.hmobile { display: none; }
	.carouselpageheader .transbox2 .transbox2inner { padding: 0 50px; }
	.carouselpageheader .title { font-size: 22px; font-weight: bold; color: #fff; }
	.carouselpageheader .desc { font-size: 14px; line-height: 16px; }
	}

@media (max-width: 576px) {
}

.homepage {
	max-width: 1400px;
	margin: 0 auto;
	color: #24382e;
}


/* HERO */

.homepage .homepage-hero {
	padding: 70px 50px 75px;
	border-bottom: 1px solid #d9ded7;
}

.homepage .homepage-hero-content {
	max-width: 850px;
}

.homepage .homepage-eyebrow {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #65786d;
}

.homepage .homepage-hero h1 {
	margin: 0 0 22px;
	font-size: 54px;
	line-height: 1.08;
	font-weight: 500;
	color: #263b31;
}

.homepage .homepage-lead {
	max-width: 760px;
	margin: 0 0 30px;
	font-size: 20px;
	line-height: 1.65;
	color: #46584f;
}

.homepage .homepage-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}


/* BUTTONS */

.homepage .homepage-button {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.homepage .homepage-button-primary {
	background: #41634f;
	border: 1px solid #41634f;
	color: #fff;
}

.homepage .homepage-button-primary:hover {
	background: #355342;
	border-color: #355342;
	color: #fff;
}

.homepage .homepage-button-secondary {
	background: transparent;
	border: 1px solid #829087;
	color: #344b3e;
}

.homepage .homepage-button-secondary:hover {
	background: #edf0eb;
	color: #344b3e;
}


/* INTRO */

.homepage .homepage-intro {
	max-width: 900px;
	margin: 0 auto;
	padding: 65px 40px 50px;
	text-align: center;
}

.homepage .homepage-intro h2 {
	margin: 0 0 18px;
	font-size: 36px;
	line-height: 1.2;
	font-weight: 500;
}

.homepage .homepage-intro p {
	margin: 0;
	font-size: 17px;
	line-height: 1.75;
	color: #536259;
}


/* FEATURES */

.homepage .homepage-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	padding: 0 40px 70px;
}

.homepage .homepage-feature {
	padding: 30px 32px;
	border: 1px solid #dce1db;
	border-radius: 6px;
	background: #fafbf8;
}

.homepage .homepage-feature h3 {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 500;
	color: #2e4739;
}

.homepage .homepage-feature p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #536259;
}


/* IMPORT / EXPORT */

.homepage .homepage-workflow {
	margin: 0 40px 70px;
	padding: 45px 50px;
	background: #edf0e9;
	border-radius: 6px;
}

.homepage .homepage-workflow-content {
	max-width: 850px;
}

.homepage .homepage-workflow h2 {
	margin: 0 0 14px;
	font-size: 30px;
	font-weight: 500;
}

.homepage .homepage-workflow p {
	margin: 0;
	font-size: 16px;
	line-height: 1.75;
	color: #506057;
}


/* FINAL CTA */

.homepage .homepage-final {
	padding: 25px 40px 80px;
	text-align: center;
}

.homepage .homepage-final h2 {
	margin: 0 0 16px;
	font-size: 36px;
	line-height: 1.3;
	font-weight: 500;
}

.homepage .homepage-final p {
	margin: 0 0 25px;
	font-size: 17px;
	color: #5a6960;
}


/* MOBILE */

@media (max-width: 800px) {

	.homepage .homepage-hero {
		padding: 45px 25px 50px;
	}

	.homepage .homepage-hero h1 {
		font-size: 40px;
	}

	.homepage .homepage-lead {
		font-size: 18px;
	}

	.homepage .homepage-intro {
		padding: 50px 25px 40px;
	}

	.homepage .homepage-features {
		grid-template-columns: 1fr;
		padding: 0 25px 50px;
	}

	.homepage .homepage-workflow {
		margin: 0 25px 50px;
		padding: 35px 30px;
	}

	.homepage .homepage-final {
		padding: 10px 25px 60px;
	}

}