@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

.timiix-howmanyhours-page {
--tmx-blue: #3154C8;
--tmx-blue-dark: #2445B0;
--tmx-navy: #0B1730;
--tmx-muted: #52627A;
--tmx-border: #D9E2F0;
--tmx-soft: #F7F9FC;
--tmx-success: #087A45;
--tmx-white: #FFFFFF;
position: relative;
width: 100%;
overflow: hidden;
box-sizing: border-box;
padding: 52px 12px 64px;
background: #F2F8F8;
color: var(--tmx-navy);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.timiix-howmanyhours-page *,
.timiix-howmanyhours-page *::before,
.timiix-howmanyhours-page *::after {
box-sizing: border-box;
}
.timiix-howmanyhours-page .tmx-howmanyhours-hero {
max-width: 820px;
margin: 0 auto 30px;
text-align: center;
}
.timiix-howmanyhours-page .tmx-howmanyhours-title {
margin: 0;
color: var(--tmx-navy);
font-size: 38px;
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 800;
}
.timiix-howmanyhours-page .tmx-howmanyhours-subtitle {
max-width: 650px;
margin: 14px auto 0;
color: var(--tmx-muted);
font-size: 16px;
line-height: 1.65;
}
.timiix-howmanyhours-page .tmx-howmanyhours-toolbox {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 28px 18px;
overflow: hidden;
background: var(--tmx-white);
border: 1px solid var(--tmx-border);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(15, 35, 70, 0.08);
animation: tmx-howmanyhours-reveal 420ms ease both;
}
.timiix-howmanyhours-page .tmx-howmanyhours-eyebrow {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
color: var(--tmx-blue);
font-size: 11px;
line-height: 1.2;
letter-spacing: 0.14em;
font-weight: 800;
}
.timiix-howmanyhours-page .tmx-howmanyhours-eyebrow::before {
width: 7px;
height: 7px;
flex: 0 0 7px;
content: "";
border-radius: 50%;
background: var(--tmx-blue);
box-shadow: 0 0 0 4px rgba(49, 84, 200, 0.1);
}
.timiix-howmanyhours-page .tmx-howmanyhours-heading {
margin: 0;
color: var(--tmx-navy);
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.03em;
font-weight: 800;
}
.timiix-howmanyhours-page .tmx-howmanyhours-helper {
margin: 10px 0 0;
color: var(--tmx-muted);
font-size: 14px;
line-height: 1.55;
}
.timiix-howmanyhours-page .tmx-howmanyhours-result {
margin: 30px 0 24px;
padding: 26px 16px;
text-align: center;
border: 1px solid #E4EAF3;
border-radius: 18px;
background: linear-gradient(180deg, #FFFFFF 0%, #F9FBFE 100%);
}
.timiix-howmanyhours-page .tmx-howmanyhours-total {
display: block;
color: var(--tmx-navy);
font-size: 58px;
line-height: 1;
letter-spacing: -0.055em;
font-weight: 800;
transition: opacity 220ms ease, transform 220ms ease;
}
.timiix-howmanyhours-page .tmx-howmanyhours-total.tmx-is-updating {
opacity: 0.65;
transform: translateY(-2px);
}
.timiix-howmanyhours-page .tmx-howmanyhours-total-label {
display: block;
margin-top: 10px;
color: var(--tmx-blue);
font-size: 12px;
line-height: 1.2;
letter-spacing: 0.14em;
font-weight: 800;
}
.timiix-howmanyhours-page .tmx-howmanyhours-target-context {
margin: 10px 0 0;
color: var(--tmx-muted);
font-size: 14px;
line-height: 1.45;
}
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-grid,
.timiix-howmanyhours-page .tmx-howmanyhours-info-grid {
display: grid;
gap: 10px;
}
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-card,
.timiix-howmanyhours-page .tmx-howmanyhours-info-card {
min-width: 0;
border: 1px solid var(--tmx-border);
background: var(--tmx-white);
transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-card {
min-height: 112px;
padding: 18px 10px;
text-align: center;
border-radius: 16px;
box-shadow: 0 8px 22px rgba(15, 35, 70, 0.045);
}
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-card:hover,
.timiix-howmanyhours-page .tmx-howmanyhours-info-card:hover {
border-color: #B8C8E7;
box-shadow: 0 12px 26px rgba(15, 35, 70, 0.08);
transform: translateY(-2px);
}
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-number {
display: block;
color: var(--tmx-navy);
font-size: 30px;
line-height: 1;
letter-spacing: -0.04em;
font-weight: 800;
}
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-label,
.timiix-howmanyhours-page .tmx-howmanyhours-info-label {
display: block;
color: var(--tmx-muted);
font-size: 10px;
line-height: 1.3;
letter-spacing: 0.12em;
font-weight: 800;
}
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-label {
margin-top: 10px;
}
.timiix-howmanyhours-page .tmx-howmanyhours-info-grid {
grid-template-columns: 1fr;
margin-top: 20px;
}
.timiix-howmanyhours-page .tmx-howmanyhours-info-card {
padding: 16px;
border-radius: 14px;
}
.timiix-howmanyhours-page .tmx-howmanyhours-info-value {
display: block;
margin-top: 8px;
color: var(--tmx-navy);
font-size: 15px;
line-height: 1.4;
font-weight: 750;
overflow-wrap: anywhere;
}
.timiix-howmanyhours-page .tmx-howmanyhours-controls {
margin-top: 28px;
padding-top: 25px;
border-top: 1px solid #E6ECF4;
}
.timiix-howmanyhours-page .tmx-howmanyhours-controls-title {
margin: 0 0 15px;
color: var(--tmx-navy);
font-size: 17px;
line-height: 1.3;
font-weight: 750;
}
.timiix-howmanyhours-page .tmx-howmanyhours-fields {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.timiix-howmanyhours-page .tmx-howmanyhours-field label {
display: block;
margin-bottom: 7px;
color: var(--tmx-navy);
font-size: 13px;
line-height: 1.3;
font-weight: 700;
}
.timiix-howmanyhours-page .tmx-howmanyhours-field input {
display: block;
width: 100%;
min-width: 0;
min-height: 48px;
padding: 0 13px;
color: var(--tmx-navy);
background: var(--tmx-white);
border: 1px solid var(--tmx-border);
border-radius: 11px;
outline: none;
font: inherit;
font-size: 15px;
transition: border-color 220ms ease, box-shadow 220ms ease;
}
.timiix-howmanyhours-page .tmx-howmanyhours-field input:focus {
border-color: var(--tmx-blue);
box-shadow: 0 0 0 4px rgba(49, 84, 200, 0.12);
}
.timiix-howmanyhours-page .tmx-howmanyhours-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.timiix-howmanyhours-page .tmx-howmanyhours-button {
min-height: 48px;
flex: 1 1 150px;
padding: 11px 16px;
border: 1px solid var(--tmx-border);
border-radius: 11px;
color: var(--tmx-navy);
background: var(--tmx-white);
cursor: pointer;
font: inherit;
font-size: 14px;
font-weight: 750;
transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.timiix-howmanyhours-page .tmx-howmanyhours-button:hover {
border-color: #AFC1E5;
box-shadow: 0 7px 18px rgba(15, 35, 70, 0.08);
transform: translateY(-1px);
}
.timiix-howmanyhours-page .tmx-howmanyhours-button:focus-visible {
outline: 3px solid rgba(49, 84, 200, 0.25);
outline-offset: 2px;
}
.timiix-howmanyhours-page .tmx-howmanyhours-button-primary {
color: var(--tmx-white);
background: var(--tmx-blue);
border-color: var(--tmx-blue);
}
.timiix-howmanyhours-page .tmx-howmanyhours-button-primary:hover {
background: var(--tmx-blue-dark);
border-color: var(--tmx-blue-dark);
}
.timiix-howmanyhours-page .tmx-howmanyhours-status {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 18px 0 0;
color: var(--tmx-muted);
font-size: 13px;
line-height: 1.5;
}
.timiix-howmanyhours-page .tmx-howmanyhours-status::before {
width: 8px;
height: 8px;
flex: 0 0 8px;
margin-top: 5px;
content: "";
border-radius: 50%;
background: var(--tmx-success);
box-shadow: 0 0 0 4px rgba(8, 122, 69, 0.1);
}
@keyframes tmx-howmanyhours-reveal {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 320px) and (max-width: 374px) {
.timiix-howmanyhours-page { padding: 38px 12px 48px; }
.timiix-howmanyhours-page .tmx-howmanyhours-hero { margin-bottom: 22px; }
.timiix-howmanyhours-page .tmx-howmanyhours-title { font-size: 32px; }
.timiix-howmanyhours-page .tmx-howmanyhours-subtitle { font-size: 14px; }
.timiix-howmanyhours-page .tmx-howmanyhours-toolbox { width: calc(100% - 0px); padding: 23px 14px; border-radius: 22px; }
.timiix-howmanyhours-page .tmx-howmanyhours-heading { font-size: 23px; }
.timiix-howmanyhours-page .tmx-howmanyhours-helper,
.timiix-howmanyhours-page .tmx-howmanyhours-target-context { font-size: 13px; }
.timiix-howmanyhours-page .tmx-howmanyhours-total { font-size: 48px; }
.timiix-howmanyhours-page .tmx-howmanyhours-result { margin: 24px 0 18px; padding: 23px 10px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-grid { gap: 8px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-card { min-height: 102px; padding: 16px 7px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-number { font-size: 27px; }
.timiix-howmanyhours-page .tmx-howmanyhours-info-card { padding: 14px; }
.timiix-howmanyhours-page .tmx-howmanyhours-actions { display: grid; grid-template-columns: 1fr; }
.timiix-howmanyhours-page .tmx-howmanyhours-button { width: 100%; }
}
@media (min-width: 375px) and (max-width: 429px) {
.timiix-howmanyhours-page { padding: 44px 14px 54px; }
.timiix-howmanyhours-page .tmx-howmanyhours-hero { margin-bottom: 25px; }
.timiix-howmanyhours-page .tmx-howmanyhours-title { font-size: 35px; }
.timiix-howmanyhours-page .tmx-howmanyhours-subtitle { font-size: 15px; }
.timiix-howmanyhours-page .tmx-howmanyhours-toolbox { padding: 26px 16px; }
.timiix-howmanyhours-page .tmx-howmanyhours-heading { font-size: 24px; }
.timiix-howmanyhours-page .tmx-howmanyhours-total { font-size: 53px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-card { padding: 18px 9px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-number { font-size: 29px; }
.timiix-howmanyhours-page .tmx-howmanyhours-actions { display: grid; grid-template-columns: 1fr; }
.timiix-howmanyhours-page .tmx-howmanyhours-button { width: 100%; }
}
@media (min-width: 430px) and (max-width: 767px) {
.timiix-howmanyhours-page { padding: 54px 20px 68px; }
.timiix-howmanyhours-page .tmx-howmanyhours-hero { margin-bottom: 30px; }
.timiix-howmanyhours-page .tmx-howmanyhours-title { font-size: 42px; }
.timiix-howmanyhours-page .tmx-howmanyhours-subtitle { font-size: 16px; }
.timiix-howmanyhours-page .tmx-howmanyhours-toolbox { padding: 31px 24px; }
.timiix-howmanyhours-page .tmx-howmanyhours-heading { font-size: 27px; }
.timiix-howmanyhours-page .tmx-howmanyhours-total { font-size: 64px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-grid { gap: 12px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-card { padding: 20px 12px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-number { font-size: 33px; }
.timiix-howmanyhours-page .tmx-howmanyhours-info-grid { gap: 12px; }
.timiix-howmanyhours-page .tmx-howmanyhours-actions { gap: 11px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.timiix-howmanyhours-page { padding: 68px 3% 82px; }
.timiix-howmanyhours-page .tmx-howmanyhours-hero { margin-bottom: 36px; }
.timiix-howmanyhours-page .tmx-howmanyhours-title { font-size: 50px; }
.timiix-howmanyhours-page .tmx-howmanyhours-subtitle { font-size: 17px; }
.timiix-howmanyhours-page .tmx-howmanyhours-toolbox { width: 94%; padding: 38px 34px; }
.timiix-howmanyhours-page .tmx-howmanyhours-heading { font-size: 30px; }
.timiix-howmanyhours-page .tmx-howmanyhours-total { font-size: 76px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-card { padding: 22px 12px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-number { font-size: 36px; }
.timiix-howmanyhours-page .tmx-howmanyhours-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.timiix-howmanyhours-page .tmx-howmanyhours-fields { grid-template-columns: 1fr 1fr; gap: 16px; }
.timiix-howmanyhours-page .tmx-howmanyhours-actions { justify-content: flex-end; }
.timiix-howmanyhours-page .tmx-howmanyhours-button { flex: 0 1 auto; min-width: 145px; }
}
@media (min-width: 1024px) {
.timiix-howmanyhours-page { padding: 82px 28px 100px; }
.timiix-howmanyhours-page .tmx-howmanyhours-hero { margin-bottom: 42px; }
.timiix-howmanyhours-page .tmx-howmanyhours-title { font-size: 58px; }
.timiix-howmanyhours-page .tmx-howmanyhours-subtitle { font-size: 18px; }
.timiix-howmanyhours-page .tmx-howmanyhours-toolbox { padding: 44px 48px; border-radius: 28px; }
.timiix-howmanyhours-page .tmx-howmanyhours-heading { font-size: 32px; }
.timiix-howmanyhours-page .tmx-howmanyhours-helper { font-size: 15px; }
.timiix-howmanyhours-page .tmx-howmanyhours-result { margin: 34px 0 28px; padding: 34px 20px; }
.timiix-howmanyhours-page .tmx-howmanyhours-total { font-size: 88px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-card { min-height: 132px; padding: 25px 16px; }
.timiix-howmanyhours-page .tmx-howmanyhours-countdown-number { font-size: 42px; }
.timiix-howmanyhours-page .tmx-howmanyhours-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.timiix-howmanyhours-page .tmx-howmanyhours-info-card { padding: 19px; }
.timiix-howmanyhours-page .tmx-howmanyhours-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.timiix-howmanyhours-page .tmx-howmanyhours-actions { justify-content: flex-end; }
.timiix-howmanyhours-page .tmx-howmanyhours-button { flex: 0 1 auto; min-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
.timiix-howmanyhours-page *,
.timiix-howmanyhours-page *::before,
.timiix-howmanyhours-page *::after {
animation-duration: 1ms !important;
transition-duration: 1ms !important;
}
}

.timiix-howmanyhours-page {
  position: relative;
}