/* VocalCoach public design system. Every rule is bounded by the public shell; authenticated training/dashboard screens retain their existing design tokens. */ .tmg-public-shell { --pub-ink: #142e2a; --pub-muted: #50655f; --pub-paper: #f7f8f3; --pub-surface: #fff; --pub-soft: #edf2eb; --pub-line: #d7e1d8; --pub-accent: #086a56; --pub-glow: #cbf57c; --pub-gutter: clamp(20px, 4vw, 64px); --pub-space: clamp(48px, 7vw, 96px); --pub-feedback: 160ms ease; --pub-direction: 220ms cubic-bezier(.2,.7,.2,1); --tmg-text: var(--pub-ink); --tmg-text-muted: var(--pub-muted); --tmg-bg: var(--pub-paper); --tmg-surface: var(--pub-surface); --tmg-surface-2: var(--pub-soft); --tmg-border: var(--pub-line); --tmg-brand: var(--pub-accent); --tmg-brand-50: var(--pub-soft); --tmg-brand-100: #dcebd9; background: var(--pub-paper); color: var(--pub-ink); line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; overflow-wrap: break-word; } html[data-tmg-theme="dark"] .tmg-public-shell { --pub-ink: #edf4ed; --pub-muted: #b6c8c0; --pub-paper: #101e1b; --pub-surface: #182c26; --pub-soft: #20352e; --pub-line: #365047; --pub-accent: #a8e6c3; --tmg-brand-100: #2b4738; } .tmg-public-shell *, .tmg-public-shell *::before, .tmg-public-shell *::after { box-sizing: border-box; } .tmg-public-shell .row { --bs-gutter-x: clamp(24px, 4vw, 64px); } .tmg-public-shell :is(h1,h2,h3) { color: inherit; text-wrap: balance; } .tmg-public-shell h1 { font-size: clamp(2.5rem, 4.8vw, 4.5rem); line-height: 1.06; letter-spacing: -.055em; font-weight: 700; } .tmg-public-shell h2 { letter-spacing: -.04em; } .tmg-public-shell a { color: var(--pub-accent); text-underline-offset: 4px; } .tmg-public-shell :is(.text-danger,.validation-message) { color: var(--tmg-danger-text) !important; } .tmg-public-shell :is(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible, .tmg-public-shell #public-content:focus-visible { outline: 3px solid var(--pub-accent); outline-offset: 4px; } .tmg-public-shell h1:focus { outline: none; } .tmg-public-shell :is(section,article,[id]) { scroll-margin-top: 110px; } .tmg-public-shell .btn { min-height: 48px; padding: 12px 23px; border-radius: 9px; font-size: .94rem; font-weight: 600; line-height: 1.5; box-shadow: none; text-wrap: balance; transition: background-color var(--pub-feedback), border-color var(--pub-feedback), color var(--pub-feedback); } .tmg-public-shell .btn,.tmg-public-shell .btn:is(:hover,:focus,:active,:disabled) { transform: none; filter: none; box-shadow: none; } .tmg-public-shell .btn-primary { background: #086a56; border-color: #086a56; color: #fff; } .tmg-public-shell .btn-primary:is(:hover,:focus-visible) { background: #064d40; border-color: #064d40; } .tmg-public-shell :is(.btn-outline-primary,.btn-outline-secondary) { color: var(--pub-ink); border-color: var(--pub-line); background: transparent; } .tmg-public-shell :is(.btn-outline-primary,.btn-outline-secondary):is(:hover,:focus-visible) { background: var(--pub-soft); border-color: var(--pub-accent); } .tmg-public-shell .btn-light { background: var(--pub-glow); border-color: var(--pub-glow); color: #142e2a; } .tmg-public-shell .btn-outline-light { color: #f2f7f2; border-color: #7a9b8c; transition: border-color var(--pub-feedback); } .tmg-public-shell .btn-light:is(:hover,:focus-visible) { background: #b7e368; border-color: #b7e368; color: #142e2a; } .tmg-public-shell .btn-outline-light:is(:hover,:focus-visible) { background: #f2f7f2; color: #142e2a; } .tmg-public-shell .tmg-public-main { flex: 1; width: 100%; max-width: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-public-skip { position: fixed; z-index: 2000; top: 12px; left: 20px; padding: 12px 22px; color: #fff; background: #086a56; border-radius: 8px; transform: translateY(-200%); } .tmg-public-shell .tmg-public-skip:focus { transform: none; } .tmg-public-shell .tmg-public-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--pub-gutter); position: sticky; top: 0; z-index: 1020; background: color-mix(in srgb, var(--pub-paper) 94%, transparent); border-bottom: 1px solid var(--pub-line); backdrop-filter: blur(14px); } .tmg-public-shell .tmg-public-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; color: var(--pub-ink); text-decoration: none; font-size: 1.25rem; letter-spacing: -.045em; font-weight: 700; } .tmg-public-shell .tmg-public-brand img { width: 32px; height: 32px; } .tmg-public-shell .tmg-public-header-nav { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 23px); } .tmg-public-shell .tmg-public-header-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .84rem; font-weight: 500; color: var(--pub-ink); text-decoration: none; white-space: nowrap; } .tmg-public-shell .tmg-public-header-nav a::after { display: none; } .tmg-public-shell .tmg-public-header-nav a:hover { color: var(--pub-accent); } .tmg-public-shell .tmg-public-header-nav .btn { color: #fff; min-height: 44px; padding: 10px 17px; } .tmg-public-shell :is(.tmg-theme-toggle-pub,.tmg-public-menu-toggle) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--pub-line); border-radius: 8px; background: transparent; color: var(--pub-ink); padding: 8px 12px; } .tmg-public-shell .tmg-theme-toggle-pub { width: 44px; flex: none; } .tmg-public-shell .tmg-public-menu-toggle { display: none; } .tmg-public-shell .tmg-theme-icon-light { display: none; } html[data-tmg-theme="dark"] .tmg-public-shell .tmg-theme-icon-dark { display: none; } html[data-tmg-theme="dark"] .tmg-public-shell .tmg-theme-icon-light { display: inline; } .tmg-public-shell .tmg-nav-dropdown { display: inline-flex; position: relative; } .tmg-public-shell .tmg-nav-dropdown-trigger { gap: 6px; } .tmg-public-shell .tmg-nav-dropdown-trigger i { font-size: .65rem; } .tmg-public-shell .tmg-nav-dropdown-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 40px)); padding: 10px; border: 1px solid var(--pub-line); background: var(--pub-surface); border-radius: 16px; box-shadow: 0 24px 55px #071f2526; visibility: hidden; opacity: 0; z-index: 1100; transition: opacity var(--pub-feedback); } .tmg-public-shell .tmg-nav-dropdown-menu::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 16px; } .tmg-public-shell .tmg-nav-dropdown:is(:hover,:focus-within) .tmg-nav-dropdown-menu { visibility: visible; opacity: 1; } .tmg-public-shell .tmg-nav-dropdown-menu a { display: flex; gap: 12px; padding: 10px; border-radius: 9px; white-space: normal; } .tmg-public-shell .tmg-nav-dropdown-menu a:is(:hover,:focus-visible) { background: var(--pub-soft); } .tmg-public-shell .tmg-nav-dropdown-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 9px; background: var(--pub-soft); color: var(--pub-accent); font-size: 1.15rem; } .tmg-public-shell .tmg-nav-dropdown-text { display: flex; flex-direction: column; min-width: 0; } .tmg-public-shell .tmg-nav-dropdown-text strong { font-size: .9rem; } .tmg-public-shell .tmg-nav-dropdown-text > span { color: var(--pub-muted); font-size: .8rem; } .tmg-public-shell .tmg-nav-dropdown-all { justify-content: space-between; border-top: 1px solid var(--pub-line); margin-top: 8px; } .tmg-public-shell .tmg-public-footer { margin: 0; padding: 64px var(--pub-gutter) 28px; background: var(--pub-paper); color: var(--pub-muted); border-top: 1px solid var(--pub-line); font-size: .88rem; } .tmg-public-shell .tmg-public-footer-inner { max-width: 1280px; margin: auto; display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr; gap: 40px; } .tmg-public-shell .tmg-public-footer-logo { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; color: var(--pub-ink); font-weight: 700; font-size: 1.3rem; letter-spacing: -.04em; text-decoration: none; } .tmg-public-shell .tmg-public-footer-brand p { max-width: 26ch; margin: 16px 0; font-size: 1.1rem; line-height: 1.5; } .tmg-public-shell .tmg-footer-invitation { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; } .tmg-public-shell .tmg-public-footer-heading { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin: 0 0 12px; color: var(--pub-ink); } .tmg-public-shell .tmg-public-footer-col ul { list-style: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-public-footer-col a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--pub-muted); } .tmg-public-shell .tmg-public-footer-col a:hover { color: var(--pub-accent); text-decoration: underline; } .tmg-public-shell .tmg-public-footer-base { max-width: 1280px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--pub-line); font-size: .8rem; } /* Feedback belongs to real controls; static illustrations and product pixels stay still. */ .tmg-public-shell .tmg-card { transform: none; transition: none; } .tmg-public-shell :is(.tmg-public-header-nav a:not(.btn),.tmg-public-footer-col a,.tmg-shot-open) { transition: color var(--pub-feedback), background-color var(--pub-feedback); } .tmg-public-shell :is(.tmg-theme-toggle-pub,.tmg-public-menu-toggle) { transition: background-color var(--pub-feedback), border-color var(--pub-feedback); } .tmg-public-shell :is(.tmg-theme-toggle-pub,.tmg-public-menu-toggle):is(:hover,:focus-visible) { background: var(--pub-soft); border-color: var(--pub-accent); } .tmg-public-shell :is(.tmg-home-demo-label i,.tmg-ind-card-foot i,.tmg-footer-invitation i) { transition: transform var(--pub-direction); } @media (prefers-reduced-motion: no-preference) { .tmg-public-shell .tmg-home-demo-link:focus-visible .tmg-home-demo-label i, .tmg-public-shell .tmg-ind-card:focus-visible .tmg-ind-card-foot i, .tmg-public-shell .tmg-footer-invitation:focus-visible i { transform: translateX(4px); } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .tmg-public-shell .tmg-home-demo-link:hover .tmg-home-demo-label i, .tmg-public-shell .tmg-ind-card:hover .tmg-ind-card-foot i, .tmg-public-shell .tmg-footer-invitation:hover i { transform: translateX(4px); } } /* Aligned wide compositions. No viewport-negative margin calculations. */ .tmg-public-shell :is(.tmg-landing-hero-inner,.tmg-landing-section,.tmg-landing-stats-inner,.tmg-pricing-hero,.tmg-pricing-steps,.tmg-pricing-rates,.tmg-pricing-examples,.tmg-pricing-faq,.tmg-about-hero,.tmg-about-your-way-inner,.tmg-about-principles,.tmg-about-feature,.tmg-team-hero,.tmg-team-grid-wrap,.tmg-team-build-inner,.tmg-demos-hero,.tmg-demos-stage,.tmg-demos-covers,.tmg-capage-hero,.tmg-capage-section,.tmg-ind-index-hero,.tmg-ind-index-grid,.tmg-ind-hero-inner,.tmg-ind-section) { width: min(100%, 1408px); margin-inline: auto; padding-inline: var(--pub-gutter); } .tmg-public-shell :is(.tmg-landing-section,.tmg-about-feature,.tmg-capage-section,.tmg-ind-section) { padding-block: var(--pub-space); } .tmg-public-shell :is(.tmg-landing-kicker,.tmg-eyebrow,.tmg-capage-eyebrow,.tmg-ind-eyebrow,.tmg-landing-eyebrow) { display: block; margin-bottom: 20px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--pub-accent); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: left; } .tmg-public-shell :is(.tmg-landing-h2,.tmg-ind-h,.tmg-pricing-section-title) { font-size: clamp(1.9rem, 3.4vw, 3.15rem); font-weight: 600; line-height: 1.13; text-align: left; max-width: 23ch; margin: 0 0 22px; } .tmg-public-shell :is(.tmg-landing-section-sub,.tmg-ind-section-sub) { color: var(--pub-muted); max-width: 64ch; margin: 0 0 40px; text-align: left; font-size: 1.05rem; line-height: 1.7; } .tmg-public-shell :is(.tmg-landing-actions,.tmg-capage-actions,.tmg-about-hero-actions,.tmg-about-cta-actions,.tmg-billing-cancel-actions) { display: flex; flex-wrap: wrap; gap: 12px; } .tmg-public-shell .tmg-landing-hero { margin: 0; padding: clamp(48px,6vw,88px) 0 56px; background: radial-gradient(ellipse at 80% 5%, color-mix(in srgb, var(--pub-glow) 17%, transparent), transparent 45%), var(--pub-paper); color: var(--pub-ink); overflow: visible; } .tmg-public-shell .tmg-landing-hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; } .tmg-public-shell .tmg-landing-title { margin: 0 0 28px; color: var(--pub-ink); background: none; -webkit-text-fill-color: currentColor; } .tmg-public-shell .tmg-landing-title-accent { color: var(--pub-accent); -webkit-text-fill-color: currentColor; } .tmg-public-shell .tmg-landing-sub { font-size: 1.03rem; color: var(--pub-muted); max-width: 52ch; margin-bottom: 30px; line-height: 1.75; } .tmg-public-shell .tmg-home-custom-intro { border-left: 3px solid var(--pub-accent); padding-left: 18px; } .tmg-public-shell .tmg-home-custom-intro strong { display: block; color: var(--pub-ink); margin-bottom: 5px; font-size: 1.08rem; } .tmg-public-shell .tmg-landing-checks { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--pub-muted); font-size: .75rem; } .tmg-public-shell .tmg-landing-checks i { color: var(--pub-accent); margin-right: 5px; } .tmg-public-shell .tmg-practice-canvas { position: relative; min-width: 0; border-radius: 24px; padding: 26px; color: #eef6ed; background: radial-gradient(circle at 50% 20%, #305c46, transparent 45%), #142e26; box-shadow: 0 28px 60px -25px #0a36263d; } .tmg-public-shell .tmg-canvas-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .74rem; color: #c0d5c7; } .tmg-public-shell .tmg-canvas-top i { margin-right: 7px; } .tmg-public-shell .tmg-canvas-top > span:last-child { padding: 3px 8px; border: 1px solid #5c7c69; border-radius: 20px; font-size: .65rem; } .tmg-public-shell .tmg-canvas-orbit { width: 180px; height: 180px; margin: 18px auto 0; display: grid; place-items: center; border: 1px solid #5a816744; border-radius: 50%; background: radial-gradient(circle, #cbf57c22, transparent 65%); position: relative; } .tmg-public-shell .tmg-canvas-orbit::before { content: ''; position: absolute; inset: 20px; border: 1px solid #77966b55; border-radius: 50%; } .tmg-public-shell .tmg-canvas-orbit img { width: 72px; height: 72px; } .tmg-public-shell .tmg-canvas-context { text-align: center; color: #bdd1c4; font-size: .72rem; margin: 0 0 24px; } .tmg-public-shell .tmg-canvas-message { position: relative; width: 90%; padding: 18px 20px; background: #f0f5e9; color: #18382e; border-radius: 12px 12px 12px 2px; } .tmg-public-shell .tmg-canvas-message span { font-size: .63rem; letter-spacing: .06em; text-transform: uppercase; color: #50655f; } .tmg-public-shell .tmg-canvas-message p { font-size: 1.13rem; line-height: 1.45; margin: 8px 0 0; font-weight: 500; } .tmg-public-shell .tmg-canvas-message-you { background: #cbf57c; margin: 14px 0 0 auto; border-radius: 12px 12px 2px 12px; } .tmg-public-shell .tmg-canvas-bottom { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding-top: 24px; font-size: .67rem; color: #c0d5c7; } .tmg-public-shell .tmg-landing-stats { margin: 0; background: transparent; padding: 0; } .tmg-public-shell .tmg-landing-stats-inner { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; padding-block: 34px; border-block: 1px solid var(--pub-line); } .tmg-public-shell .tmg-landing-stats-inner > div { border-right: 1px solid var(--pub-line); } .tmg-public-shell .tmg-landing-stats-inner > div:last-child { border: 0; } .tmg-public-shell .tmg-landing-stat-num { color: var(--pub-ink); background: none; -webkit-text-fill-color: currentColor; font-size: 2.25rem; font-weight: 600; letter-spacing: -.05em; line-height: 1.2; } .tmg-public-shell .tmg-landing-stat-label { color: var(--pub-muted); margin-top: 6px; font-size: .78rem; } .tmg-public-shell .tmg-landing-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; margin-top: 48px; } .tmg-public-shell .tmg-landing-step { padding: 22px 0 0; border: 0; border-top: 1px solid var(--pub-line); background: transparent; box-shadow: none; border-radius: 0; } .tmg-public-shell .tmg-landing-step-num { display: inline-flex; background: transparent; color: var(--pub-accent); width: auto; height: auto; font-size: 2.3rem; font-weight: 400; margin-bottom: 20px; } .tmg-public-shell .tmg-landing-step h3 { font-weight: 600; margin-bottom: 12px; } .tmg-public-shell .tmg-landing-step p { font-size: .86rem; color: var(--pub-muted); margin: 0; } .tmg-public-shell .tmg-home-analysis { background: var(--pub-soft); border-radius: 24px; } .tmg-public-shell .tmg-home-analysis-hero { width: 100%; max-width: none; margin: 40px 0; } /* ProductShot is public-only. Preserve original pixels/proportions and native inspection. */ .tmg-public-shell .tmg-shot { margin: 0; min-width: 0; } .tmg-public-shell .tmg-shot-frame { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(10px,1.5vw,20px); border: 1px solid var(--pub-line); border-radius: 16px; background: color-mix(in srgb,var(--pub-accent) 7%,var(--pub-paper)); overflow: hidden; } .tmg-public-shell .tmg-shot-window { position: relative; width: 100%; border: 1px solid var(--pub-line); border-radius: 10px; background: var(--pub-surface); box-shadow: 0 12px 28px -12px #17382d40; overflow: hidden; } .tmg-public-shell .tmg-shot-img { display: block; width: 100%; height: auto; } .tmg-public-shell :is(.tmg-shot-dark,.tmg-shot-open-dark) { display: none; } html[data-tmg-theme="dark"] .tmg-public-shell :is(.tmg-shot-light,.tmg-shot-open-light) { display: none; } html[data-tmg-theme="dark"] .tmg-public-shell .tmg-shot-dark { display: block; } html[data-tmg-theme="dark"] .tmg-public-shell .tmg-shot-open-dark { display: inline-flex; } .tmg-public-shell .tmg-shot-caption { margin: 12px 4px 0; font-size: .85rem; line-height: 1.5; color: var(--pub-muted); } .tmg-public-shell .tmg-shot--hero .tmg-shot-frame { padding: clamp(12px,2vw,24px); } .tmg-public-shell .tmg-shot--tile .tmg-shot-frame { aspect-ratio: 16 / 10; } .tmg-public-shell .tmg-shot--fit-top .tmg-shot-frame { align-items: flex-start; } .tmg-public-shell .tmg-shot--fit-top .tmg-shot-window { max-height: min(620px,78vh); } .tmg-public-shell .tmg-shot--tile.tmg-shot--fit-top .tmg-shot-window { max-height: none; align-self: stretch; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: calc(-1 * clamp(10px,1.5vw,20px)); } .tmg-public-shell .tmg-shot--fit-top .tmg-shot-window::after { content: ''; position: absolute; inset: auto 0 0; height: 48px; background: linear-gradient(to bottom,transparent,var(--pub-surface)); pointer-events: none; } .tmg-public-shell .tmg-shot--narrow .tmg-shot-window { max-width: 380px; } .tmg-public-shell .tmg-shot-inspect { display: flex; justify-content: flex-end; padding-top: 4px; } .tmg-public-shell .tmg-shot-open { align-items: center; gap: 8px; min-height: 44px; font-size: .75rem; text-decoration-thickness: 1px; } .tmg-public-shell .tmg-shot-open-light { display: inline-flex; } .tmg-public-shell .tmg-shot-open:is(:hover,:focus-visible) { color: var(--pub-ink); } .tmg-public-shell .tmg-home-analysis-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 32px; } .tmg-public-shell .tmg-home-analysis-item { min-width: 0; } .tmg-public-shell .tmg-home-analysis-item h3 { font-size: 1.2rem; margin: 20px 0 10px; } .tmg-public-shell .tmg-home-analysis-item p { color: var(--pub-muted); font-size: .9rem; margin: 0; } .tmg-public-shell .tmg-home-analysis-note { margin-top: 36px; color: var(--pub-muted); font-size: .85rem; border-top: 1px solid var(--pub-line); padding-top: 24px; } .tmg-public-shell .tmg-home-analysis-note a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 10px; } .tmg-public-shell .tmg-landing-pillar { padding: 30px 0; border: 0; border-top: 1px solid var(--pub-line); border-radius: 0; background: transparent; box-shadow: none; transform: none; } .tmg-public-shell .tmg-landing-pillar-icon { color: var(--pub-accent); font-size: 1.6rem; margin-bottom: 22px; } .tmg-public-shell .tmg-landing-pillar p { color: var(--pub-muted); font-size: .9rem; } .tmg-public-shell .tmg-landing-pillar-list { padding-left: 18px; font-size: .85rem; line-height: 1.9; } .tmg-public-shell .tmg-home-interruptions { background: #17382d; color: #edf4ed; border-radius: 24px; } .tmg-public-shell .tmg-home-interruptions :is(.tmg-landing-kicker,a) { color: #cbf57c; } .tmg-public-shell .tmg-home-interruptions :is(.tmg-landing-section-sub,.text-muted,.small) { color: #c0d2c7 !important; } .tmg-public-shell .tmg-pressure-rail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin: 36px 0 10px; padding: 5px; border: 1px solid #587763; border-radius: 12px; } .tmg-public-shell .tmg-pressure-rail > span { padding: 20px 18px; background: #244637; border-radius: 8px; font-size: 1.2rem; } .tmg-public-shell .tmg-pressure-rail > span:last-child { background: #cbf57c; color: #18382e; } .tmg-public-shell .tmg-pressure-rail small { display: block; font-size: .72rem; margin-top: 5px; } .tmg-public-shell .tmg-pressure-label { color: #c0d2c7; font-size: .72rem; margin-bottom: 32px; } .tmg-public-shell .tmg-home-interruption-examples .tmg-card { color: #edf4ed; background: transparent; box-shadow: none; border: 0; border-top: 1px solid #54715f; border-radius: 0; padding: 22px 0 !important; } .tmg-public-shell .tmg-home-interruption-examples h3 { font-size: .78rem; letter-spacing: .04em; color: #bdd0c3; } .tmg-public-shell .tmg-home-interruption-quote { font-size: 1.3rem; line-height: 1.5; margin: 18px 0; } .tmg-public-shell .tmg-home-interruptions > p:not(.tmg-pressure-label) { max-width: 85ch; font-size: .88rem; } .tmg-public-shell .tmg-landing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 40px; } .tmg-public-shell .tmg-landing-grid-item { padding: 28px; border: 1px solid var(--pub-line); border-radius: 14px; background: var(--pub-surface); font-size: .9rem; } .tmg-public-shell .tmg-landing-grid-item:first-child { grid-column: span 2; background: var(--pub-soft); } .tmg-public-shell .tmg-landing-grid-item:nth-child(4) { grid-column: span 2; } .tmg-public-shell .tmg-landing-grid-item i { display: block; color: var(--pub-accent); font-size: 1.8rem; margin-bottom: 24px; } .tmg-public-shell .tmg-landing-grid-item strong { display: inline-block; font-size: 1.25rem; margin-bottom: 12px; letter-spacing: -.025em; } .tmg-public-shell .tmg-landing-grid-item span { color: var(--pub-muted); } .tmg-public-shell .tmg-home-demo { display: grid; grid-template-columns: .85fr 1.2fr; gap: 0 70px; align-items: start; } .tmg-public-shell .tmg-home-demo > :not(a) { grid-column: 1; } .tmg-public-shell .tmg-home-demo-link { grid-column: 2; grid-row: 1 / span 4; text-decoration: none; } .tmg-public-shell .tmg-home-demo-frame { display: block; position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--pub-line); } .tmg-public-shell .tmg-home-demo-frame img { width: 100%; height: auto; display: block; } .tmg-public-shell .tmg-home-demo-play { position: absolute; display: grid; place-items: center; width: clamp(38px,4.5vw,60px); height: clamp(38px,4.5vw,60px); bottom: clamp(12px,2vw,24px); left: clamp(12px,2vw,24px); border-radius: 50%; background: #cbf57c; color: #142e2a; font-size: clamp(1.4rem,3vw,2rem); box-shadow: 0 0 0 6px #142e2a33; transition: background-color var(--pub-feedback); } .tmg-public-shell .tmg-home-demo-link:is(:hover,:focus-visible) .tmg-home-demo-play { background: #edfbcf; } .tmg-public-shell .tmg-home-demo-label { display: flex; justify-content: space-between; padding-block: 20px; font-weight: 600; } .tmg-public-shell .tmg-home-solo { padding-top: 0; } .tmg-public-shell .tmg-home-solo-inner { padding: 40px; border: 1px solid var(--pub-line); border-radius: 16px; background: var(--pub-soft); } .tmg-public-shell .tmg-home-know { width: min(calc(100% - 2 * var(--pub-gutter)),1280px); margin: 0 auto; padding: 30px; border-block: 1px solid var(--pub-line); } .tmg-public-shell .tmg-home-know-title { font-size: .85rem; margin-bottom: 22px; font-weight: 700; } .tmg-public-shell .tmg-home-know-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 40px; font-size: .85rem; color: var(--pub-muted); } .tmg-public-shell .tmg-home-know-list li { display: flex; gap: 12px; } .tmg-public-shell .tmg-home-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 0 64px; } .tmg-public-shell .tmg-home-faq > :not(.tmg-home-faq-list) { grid-column: 1; } .tmg-public-shell .tmg-home-faq-list { grid-column: 2; grid-row: 1 / span 4; } .tmg-public-shell :is(.tmg-home-faq-item,.tmg-pricing-faq-item) { border-bottom: 1px solid var(--pub-line); padding: 0; } .tmg-public-shell :is(.tmg-home-faq-item,.tmg-pricing-faq-item) summary { position: relative; padding: 22px 32px 22px 0; font-weight: 600; cursor: pointer; font-size: .95rem; list-style: none; } .tmg-public-shell :is(.tmg-home-faq-item,.tmg-pricing-faq-item) summary::after { content: '+'; position: absolute; right: 2px; font-size: 1.3rem; color: var(--pub-accent); } .tmg-public-shell :is(.tmg-home-faq-item,.tmg-pricing-faq-item)[open] summary::after { content: '−'; } .tmg-public-shell :is(.tmg-home-faq-item,.tmg-pricing-faq-item) summary::-webkit-details-marker { display: none; } .tmg-public-shell :is(.tmg-home-faq-item,.tmg-pricing-faq-item) p { color: var(--pub-muted); font-size: .9rem; padding-bottom: 12px; margin: 0; } .tmg-public-shell .tmg-home-faq-more { color: var(--pub-muted); font-size: .9rem; } .tmg-public-shell .tmg-landing-suggest { width: min(100%,1408px); padding: 0 var(--pub-gutter) var(--pub-space); margin: auto; } .tmg-public-shell .tmg-landing-suggest-inner { display: flex; gap: 24px; align-items: center; padding: 32px; background: var(--pub-soft); border-radius: 14px; } .tmg-public-shell .tmg-home-contact-copy { flex: 1; min-width: 0; } .tmg-public-shell .tmg-landing-suggest-icon { font-size: 1.8rem; color: var(--pub-accent); } .tmg-public-shell .tmg-home-contact-btn { overflow-wrap: anywhere; } .tmg-public-shell :is(.tmg-landing-final,.tmg-pricing-cta-band,.tmg-about-cta,.tmg-team-cta,.tmg-demos-cta,.tmg-ind-final) { margin: 0; padding: var(--pub-space) var(--pub-gutter); background: radial-gradient(ellipse at 90% 100%, #436c3b88, transparent 55%), #17382d; color: #eef5ed; text-align: left; } .tmg-public-shell :is(.tmg-landing-final,.tmg-pricing-cta-band,.tmg-about-cta,.tmg-team-cta,.tmg-demos-cta,.tmg-ind-final) > :is(h2,p,div),.tmg-public-shell .tmg-about-cta-inner { max-width: 1280px; margin-inline: auto; } .tmg-public-shell :is(.tmg-landing-final,.tmg-pricing-cta-band,.tmg-about-cta,.tmg-team-cta,.tmg-demos-cta,.tmg-ind-final) h2 { max-width: 24ch; margin-bottom: 24px; font-size: clamp(2rem,4vw,3.5rem); line-height: 1.12; font-weight: 600; } .tmg-public-shell :is(.tmg-landing-final,.tmg-pricing-cta-band,.tmg-about-cta,.tmg-team-cta,.tmg-demos-cta,.tmg-ind-final) p { color: #c0d2c7; margin-bottom: 28px; font-size: 1rem; } .tmg-public-shell .tmg-landing-final::before { display: none; } /* Pricing: prepaid overview, transparent rate ledger, then pilot planning. */ .tmg-public-shell .tmg-pricing-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: clamp(32px,4.5vw,64px); align-items: center; padding-block: calc(var(--pub-space) * .75); } .tmg-public-shell .tmg-pricing-hero-title { max-width: none; margin: 0 0 20px; } .tmg-public-shell .tmg-pricing-hero-payg { display: block; color: var(--pub-accent); font-size: clamp(3.1rem,6.6vw,6rem); line-height: .98; letter-spacing: -.06em; } .tmg-public-shell .tmg-pricing-hero-tag { display: block; margin-top: 14px; color: var(--pub-ink); font-size: clamp(1.4rem,2.5vw,2.2rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 600; } .tmg-public-shell .tmg-pricing-hero-sub { color: var(--pub-muted); max-width: 52ch; margin-bottom: 24px; font-size: 1.05rem; } .tmg-public-shell .tmg-pricing-balance { background: #17382d; color: #eef5ed; padding: clamp(36px,4.6vw,68px); border-radius: 26px; position: relative; box-shadow: 0 25px 50px -35px #163d39aa; } .tmg-public-shell .tmg-pricing-balance > span { display: block; font-size: clamp(1.5rem,2.5vw,2.25rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; } .tmg-public-shell .tmg-pricing-balance strong { display: block; font-size: clamp(5.5rem,12vw,10rem); font-weight: 500; letter-spacing: -.07em; line-height: .95; margin-top: 14px; color: #cbf57c; } .tmg-public-shell .tmg-pricing-balance p { color: #bdd0c3; font-size: 1.15rem; margin: 4px 0 0; } .tmg-public-shell .tmg-pricing-balance > div { border-top: 1px solid #56765e; margin-top: 22px; padding-top: 16px; font-size: 1.05rem; line-height: 1.7; } .tmg-public-shell .tmg-pricing-balance a { color: #cbf57c; display: inline-flex; gap: 14px; align-items: center; min-height: 44px; margin-top: 6px; font-size: .95rem; } .tmg-public-shell .tmg-payg-claim { display: flex; gap: 12px; align-items: flex-start; max-width: 54ch; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb,var(--pub-accent) 9%,var(--pub-surface)); color: var(--pub-ink); font-size: .98rem; font-weight: 600; line-height: 1.45; } .tmg-public-shell .tmg-payg-claim i { flex: none; margin-top: 2px; color: var(--pub-accent); font-size: 1.1rem; } .tmg-public-shell .tmg-home-payg { max-width: 54ch; margin: 0 0 26px; } .tmg-public-shell .tmg-home-payg-title { display: block; margin-bottom: 4px; color: var(--pub-accent); font-size: clamp(1.9rem,3.4vw,2.9rem); font-weight: 700; line-height: 1.05; letter-spacing: -.05em; } .tmg-public-shell .tmg-home-payg-text { display: block; margin-bottom: 14px; color: var(--pub-ink); font-size: 1.05rem; line-height: 1.5; } .tmg-public-shell .tmg-pricing-steps { padding-block: calc(var(--pub-space) * .75) 0; margin-bottom: calc(var(--pub-space) * .75); } .tmg-public-shell .tmg-pricing-step { width: 100%; border-top: 1px solid var(--pub-line); padding: 22px 0 0; } .tmg-public-shell .tmg-pricing-step-icon { display: block; font-size: 1.5rem; color: var(--pub-accent); margin-bottom: 14px; } .tmg-public-shell .tmg-pricing-step h2 { font-size: 1.05rem; font-weight: 600; } .tmg-public-shell .tmg-pricing-step p { font-size: .9rem; color: var(--pub-muted); margin: 0; } .tmg-public-shell .tmg-pricing-rates { background: var(--pub-soft); padding-block: calc(var(--pub-space) * .8); border-radius: 24px; } .tmg-public-shell .tmg-pricing-currency { margin: -8px 0 20px; color: var(--pub-muted); font-size: .9rem; } .tmg-public-shell .tmg-pricing-rate-card { border: 1px solid var(--pub-line); background: var(--pub-surface); border-radius: 14px; overflow: hidden; } .tmg-public-shell .tmg-pricing-rate-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: center; padding: 24px 32px; } .tmg-public-shell .tmg-pricing-rate-row + .tmg-pricing-rate-row { border-top: 1px solid var(--pub-line); } .tmg-public-shell .tmg-pricing-rate-row strong { font-size: 1.05rem; font-weight: 600; } .tmg-public-shell .tmg-pricing-rate-note { display: block; color: var(--pub-muted); margin-top: 5px; font-size: .85rem; max-width: 56ch; } .tmg-public-shell .tmg-pricing-rate-price { text-align: right; color: var(--pub-accent); font-size: 1.3rem; font-weight: 600; line-height: 1.5; } .tmg-public-shell .tmg-pricing-rate-price--wrap { font-size: 1rem; } .tmg-public-shell .tmg-pricing-rate-course { display: block; margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--pub-accent); border-radius: 0 8px 8px 0; background: color-mix(in srgb,var(--pub-accent) 8%,var(--pub-surface)); color: var(--pub-ink); font-size: .9rem; line-height: 1.5; } .tmg-public-shell .tmg-pricing-rate-course strong { font-size: inherit; font-weight: 700; } .tmg-public-shell .tmg-pricing-rate-from { display: block; color: var(--pub-muted); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .tmg-public-shell .tmg-pricing-rate-price small { display: block; margin-top: 4px; color: var(--pub-muted); font-size: .8rem; font-weight: 400; line-height: 1.4; } .tmg-public-shell .tmg-pricing-details { margin-top: 20px; border-bottom: 1px solid var(--pub-line); } .tmg-public-shell .tmg-pricing-details summary { padding: 16px 0; cursor: pointer; font-weight: 600; font-size: .9rem; } .tmg-public-shell .tmg-pricing-details p { max-width: 90ch; color: var(--pub-muted); font-size: .9rem; } .tmg-public-shell .tmg-pricing-examples { padding-block: calc(var(--pub-space) * .8); } .tmg-public-shell .tmg-pricing-example { padding: 24px; border: 1px solid var(--pub-line); border-radius: 12px; background: var(--pub-surface); width: 100%; text-align: left; } .tmg-public-shell .tmg-pricing-examples .col-md-4:last-child .tmg-pricing-example { background: var(--pub-soft); } .tmg-public-shell .tmg-pricing-example-figure { color: var(--pub-accent); font-size: 2rem; font-weight: 600; margin-bottom: 12px; } .tmg-public-shell .tmg-pricing-example-figure span { display: block; font-size: .75rem; } .tmg-public-shell .tmg-pricing-example h3 { font-weight: 600; } .tmg-public-shell .tmg-pricing-example p { color: var(--pub-muted); font-size: .9rem; } .tmg-public-shell .tmg-pricing-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; padding-bottom: var(--pub-space); } .tmg-public-shell .tmg-pricing-cta-band .btn { margin-top: 8px; } /* Editorial story and fictional character gallery. */ .tmg-public-shell :is(.tmg-about-hero,.tmg-team-hero,.tmg-ind-index-hero,.tmg-demos-hero) { padding-block: var(--pub-space); } .tmg-public-shell .tmg-about-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px 80px; align-items: end; } .tmg-public-shell .tmg-about-hero-mark { grid-column: 1 / -1; width: 48px; height: 48px; margin-bottom: 18px; } .tmg-public-shell .tmg-about-hero-title { grid-column: 1; grid-row: 2 / span 2; max-width: 16ch; margin: 0; } .tmg-public-shell .tmg-about-hero-tagline { grid-column: 2; color: var(--pub-muted); font-size: 1.08rem; margin: 0; } .tmg-public-shell .tmg-about-hero-actions { grid-column: 2; } .tmg-public-shell .tmg-about-your-way { background: var(--pub-soft); padding-block: var(--pub-space); } .tmg-public-shell .tmg-about-your-way-title { font-size: 2.7rem; font-weight: 600; } .tmg-public-shell .tmg-about-your-way-lead { color: var(--pub-muted); margin-bottom: 36px; } .tmg-public-shell .tmg-about-your-way-card { padding: 30px; border-radius: 14px; background: var(--pub-surface); width: 100%; } .tmg-public-shell .tmg-about-your-way-icon { display: block; color: var(--pub-accent); font-size: 1.7rem; margin-bottom: 26px; } .tmg-public-shell .tmg-about-your-way-card p { color: var(--pub-muted); font-size: .94rem; margin: 0; } .tmg-public-shell .tmg-about-principles { padding-block: var(--pub-space); } .tmg-public-shell .tmg-principle-card { padding: 24px 0; border-top: 1px solid var(--pub-line); } .tmg-public-shell .tmg-principle-icon { color: var(--pub-accent); display: block; font-size: 1.4rem; margin-bottom: 22px; } .tmg-public-shell .tmg-principle-card p { color: var(--pub-muted); font-size: .9rem; } .tmg-public-shell .tmg-about-transparency-inner { max-width: 1280px; width: calc(100% - 2 * var(--pub-gutter)); margin: auto; border-block: 1px solid var(--pub-line); padding-block: 26px; display: flex; gap: 20px; align-items: center; color: var(--pub-muted); } .tmg-public-shell .tmg-about-transparency-icon { font-size: 1.8rem; color: var(--pub-accent); } .tmg-public-shell .tmg-about-transparency-body strong { display: block; color: var(--pub-ink); } .tmg-public-shell .tmg-about-feature-title { font-size: clamp(2rem,3.5vw,3rem); line-height: 1.12; font-weight: 600; margin-bottom: 24px; } .tmg-public-shell .tmg-about-feature p { color: var(--pub-muted); } .tmg-public-shell .tmg-about-feature .lead { font-size: 1.05rem; } .tmg-public-shell .tmg-about-feature-bullets { list-style: none; padding: 0; font-size: .9rem; } .tmg-public-shell .tmg-about-feature-bullets li { margin: 12px 0; display: flex; gap: 12px; } .tmg-public-shell .tmg-bullet-icon { color: var(--pub-accent); } .tmg-public-shell .tmg-about-feature-art { background: var(--pub-soft); border: 1px solid var(--pub-line); border-radius: 20px; padding: 44px; } .tmg-public-shell .tmg-about-feature-art-icon { display: block; color: var(--pub-accent); font-size: 2.4rem; margin-bottom: 30px; } .tmg-public-shell .tmg-about-feature-art-stat-value { font-size: 5rem; line-height: 1.1; letter-spacing: -.07em; display: block; } .tmg-public-shell .tmg-about-feature-art-stat-label { color: var(--pub-muted); } .tmg-public-shell .tmg-about-feature-art-pillrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 30px; } .tmg-public-shell .tmg-about-feature-art-pill { padding: 8px 12px; background: var(--pub-surface); border: 1px solid var(--pub-line); border-radius: 7px; font-size: .75rem; } .tmg-public-shell .tmg-about-feature-art-quote { font-size: 2rem; line-height: 1.3; letter-spacing: -.035em; } .tmg-public-shell .tmg-about-fineprint { max-width: 1280px; padding: 24px var(--pub-gutter); margin: auto; font-size: .8rem; color: var(--pub-muted); } .tmg-public-shell .tmg-team-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px 80px; } .tmg-public-shell .tmg-team-hero > :is(span,h1) { grid-column: 1; } .tmg-public-shell .tmg-team-hero-title { max-width: 12ch; margin: 0; } .tmg-public-shell .tmg-team-hero-sub { grid-column: 1; max-width: 55ch; color: var(--pub-muted); margin: 0; } .tmg-public-shell .tmg-team-hero-note { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 1.18rem; padding: 28px 0 28px 28px; border-left: 3px solid var(--pub-accent); color: var(--pub-muted); } .tmg-public-shell .tmg-team-grid-wrap { padding-bottom: var(--pub-space); } .tmg-public-shell .tmg-team-grid { --bs-gutter-x: 24px; --bs-gutter-y: 24px; } .tmg-public-shell .tmg-team-card { width: 100%; padding: 28px; border: 1px solid var(--pub-line); border-radius: 16px; background: var(--pub-surface); } .tmg-public-shell .tmg-team-grid > div:nth-child(3n + 1) .tmg-team-card { background: var(--pub-soft); } .tmg-public-shell .tmg-team-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 26px; } .tmg-public-shell .tmg-team-avatar { width: 54px; height: 64px; display: grid; place-items: center; flex: none; border-radius: 40% 40% 20% 20%; background: color-mix(in srgb,var(--pub-accent) 12%,var(--pub-paper)); color: var(--pub-accent); font-size: 1.5rem; font-weight: 500; } .tmg-public-shell .tmg-team-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; } .tmg-public-shell .tmg-team-role { font-size: .74rem; color: var(--pub-muted); } .tmg-public-shell .tmg-team-diff { padding: 5px 10px; border: 1px solid var(--pub-line); border-radius: 30px; font-size: .65rem; } .tmg-public-shell .tmg-team-bio { color: var(--pub-muted); font-size: .88rem; } .tmg-public-shell .tmg-team-tag { display: inline-block; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pub-accent); border-top: 1px solid var(--pub-line); padding-top: 16px; width: 100%; } .tmg-public-shell .tmg-team-more { color: var(--pub-muted); font-size: .85rem; margin-top: 28px; } .tmg-public-shell .tmg-team-build { background: var(--pub-soft); padding-block: var(--pub-space); } .tmg-public-shell .tmg-team-build-inner { display: grid; grid-template-columns: .25fr 1fr; gap: 40px; } .tmg-public-shell .tmg-team-build-icon { font-size: 5rem; color: var(--pub-accent); } .tmg-public-shell .tmg-team-build-title { font-size: clamp(2rem,3vw,3rem); max-width: 22ch; line-height: 1.15; } .tmg-public-shell .tmg-team-build-sub { color: var(--pub-muted); max-width: 70ch; } .tmg-public-shell .tmg-team-build-link { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; } /* Actual video and product evidence. */ .tmg-public-shell .tmg-demos-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 0 70px; } .tmg-public-shell .tmg-demos-hero .tmg-eyebrow { grid-column: 1 / -1; } .tmg-public-shell .tmg-demos-hero-title { margin: 0; max-width: 14ch; } .tmg-public-shell .tmg-demos-hero-sub { color: var(--pub-muted); align-self: end; max-width: 50ch; margin: 0; } .tmg-public-shell .tmg-demos-stage { padding-bottom: 40px; } .tmg-public-shell .tmg-demos-frame { padding: clamp(10px,2vw,26px); background: #17382d; border: 1px solid var(--pub-line); border-radius: 20px; box-shadow: 0 28px 60px -40px #17382d88; } .tmg-public-shell .tmg-demos-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 9px; } .tmg-public-shell .tmg-demos-caption { color: var(--pub-muted); font-size: .8rem; margin: 14px 0; } .tmg-public-shell .tmg-demos-placeholder { padding: 64px 20px; color: #eef5ed; text-align: center; } .tmg-public-shell .tmg-demos-placeholder-icon { font-size: 3rem; } .tmg-public-shell .tmg-demos-covers { padding-bottom: var(--pub-space); display: grid; grid-template-columns: .7fr 1.3fr; gap: 0 70px; } .tmg-public-shell .tmg-demos-covers-title { font-size: 2.5rem; grid-column: 1; } .tmg-public-shell .tmg-demos-covers-list { grid-column: 2; padding: 0; margin: 0; list-style: none; } .tmg-public-shell .tmg-demos-covers-list li { padding: 16px 0; border-bottom: 1px solid var(--pub-line); display: flex; gap: 14px; font-size: .93rem; } .tmg-public-shell .tmg-demos-covers-list i { color: var(--pub-accent); } .tmg-public-shell .tmg-demos-covers > p { grid-column: 2; text-align: left !important; font-size: .85rem; } .tmg-public-shell .tmg-capage-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px 60px; padding-block: var(--pub-space); align-items: start; } .tmg-public-shell .tmg-capage-hero > :not(.tmg-capage-hero-shot) { grid-column: 1; } .tmg-public-shell .tmg-capage-title { max-width: 14ch; margin: 0; } .tmg-public-shell .tmg-capage-lede { color: var(--pub-muted); font-size: 1rem; margin: 0 0 6px; } .tmg-public-shell .tmg-capage-hero-shot { grid-column: 2; grid-row: 1 / span 5; align-self: center; width: 100%; min-width: 0; } .tmg-public-shell .tmg-capage-honest { color: var(--pub-muted); font-size: .78rem; max-width: 55ch; margin: 12px 0 0; } .tmg-public-shell .tmg-capage-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; border-top: 1px solid var(--pub-line); padding-block: 60px; } .tmg-public-shell .tmg-capage-row--flip { grid-template-columns: 1.2fr .8fr; } .tmg-public-shell .tmg-capage-row--flip .tmg-capage-row-copy { order: 2; } .tmg-public-shell .tmg-capage-row-copy h3 { font-size: 1.85rem; line-height: 1.15; letter-spacing: -.04em; margin: 20px 0; } .tmg-public-shell .tmg-capage-row-copy p { color: var(--pub-muted); font-size: .91rem; } .tmg-public-shell .tmg-capage-step { font-size: 2rem; color: var(--pub-accent); font-weight: 400; } .tmg-public-shell .tmg-capage-row-shot { min-width: 0; } .tmg-public-shell .tmg-capage-team { background: var(--pub-soft); border-radius: 24px; } .tmg-public-shell .tmg-capage-cards { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 32px; } .tmg-public-shell .tmg-capage-card { border-top: 1px solid var(--pub-line); padding-top: 24px; } .tmg-public-shell .tmg-capage-card > i { display: block; font-size: 1.6rem; color: var(--pub-accent); margin-bottom: 22px; } .tmg-public-shell .tmg-capage-card h3 { font-size: 1.1rem; } .tmg-public-shell .tmg-capage-card p,.tmg-public-shell .tmg-capage-aside { font-size: .9rem; color: var(--pub-muted); } .tmg-public-shell .tmg-capage-aside { margin-top: 28px; } .tmg-public-shell .tmg-capage-method { counter-reset: method; margin: 0; } .tmg-public-shell .tmg-capage-method > div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; border-top: 1px solid var(--pub-line); padding: 26px 0; } .tmg-public-shell .tmg-capage-method dt { font-weight: 600; font-size: 1rem; } .tmg-public-shell .tmg-capage-method dt i { color: var(--pub-accent); margin-right: 10px; } .tmg-public-shell .tmg-capage-method dd { color: var(--pub-muted); margin: 0; font-size: .9rem; } .tmg-public-shell .tmg-capage-cost { display: flex; gap: 32px; padding: 36px; background: var(--pub-soft); border: 1px solid var(--pub-line); border-radius: 14px; } .tmg-public-shell .tmg-capage-cost-icon { color: var(--pub-accent); font-size: 2rem; } .tmg-public-shell .tmg-capage-cost h2 { font-size: 1.7rem; } .tmg-public-shell .tmg-capage-cost p { color: var(--pub-muted); font-size: .92rem; margin: 0; max-width: 90ch; } /* Industry directory and the shared course template. */ .tmg-public-shell .tmg-ind-index-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 0 70px; } .tmg-public-shell .tmg-ind-index-hero > span { grid-column: 1 / -1; } .tmg-public-shell .tmg-ind-index-title { max-width: 15ch; margin: 0; } .tmg-public-shell .tmg-ind-index-lede { color: var(--pub-muted); align-self: end; margin: 0; } .tmg-public-shell .tmg-ind-index-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; padding-bottom: var(--pub-space); } .tmg-public-shell .tmg-ind-card { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px 24px; color: var(--pub-ink); text-decoration: none; border: 1px solid var(--pub-line); border-radius: 16px; padding: 32px; background: var(--pub-surface); transition: border-color var(--pub-feedback), background-color var(--pub-feedback); } .tmg-public-shell .tmg-ind-card:nth-child(1) { grid-column: 1 / -1; background: var(--pub-soft); padding-block: 42px; } .tmg-public-shell .tmg-ind-card:is(:hover,:focus-visible) { border-color: var(--pub-accent); color: var(--pub-ink); background: var(--pub-soft); } .tmg-public-shell .tmg-ind-card-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--pub-line); background: color-mix(in srgb,var(--ind-accent) 9%,var(--pub-paper)); color: var(--pub-ink); font-size: 1.6rem; border-radius: 12px; } .tmg-public-shell .tmg-ind-card-title { font-size: 1.65rem; margin: 0; } .tmg-public-shell .tmg-ind-card-blurb { color: var(--pub-muted); margin: 0; font-size: .9rem; max-width: 65ch; } .tmg-public-shell .tmg-ind-card-foot { grid-column: 2; display: flex; gap: 20px; align-items: center; justify-content: space-between; font-size: .75rem; font-weight: 600; color: var(--pub-accent); padding-top: 12px; } .tmg-public-shell .tmg-ind-card-foot i { font-size: 1.4rem; } .tmg-public-shell .tmg-ind-hero { margin: 0; padding-block: var(--pub-space); background: radial-gradient(ellipse at 90% 10%,color-mix(in srgb,var(--ind-accent,#086a56) 9%,transparent),transparent 60%),var(--pub-paper); } .tmg-public-shell .tmg-ind-hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px 64px; } .tmg-public-shell .tmg-ind-hero-inner > :not(.tmg-ind-scenario) { grid-column: 1; } .tmg-public-shell .tmg-ind-hero-title { max-width: 17ch; margin: 0; } .tmg-public-shell .tmg-ind-hero-lede { color: var(--pub-muted); margin: 6px 0 10px; max-width: 56ch; } .tmg-public-shell .tmg-ind-hero-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--pub-muted); font-size: .7rem; margin-top: 8px; } .tmg-public-shell .tmg-ind-hero-meta i { color: var(--pub-accent); margin-right: 4px; } .tmg-public-shell .tmg-ind-scenario { grid-column: 2; grid-row: 1 / span 5; align-self: center; padding: 32px; border-radius: 20px; background: #17382d; color: #edf5ed; } .tmg-public-shell .tmg-ind-scenario-label { display: flex; gap: 10px; justify-content: space-between; color: #c4d7c9; font-size: .68rem; } .tmg-public-shell .tmg-ind-scenario-caller { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; font-size: .8rem; color: #c4d7c9; line-height: 1.4; } .tmg-public-shell .tmg-ind-scenario-caller i { font-size: 1.9rem; color: #cbf57c; } .tmg-public-shell .tmg-ind-scenario-caller strong { display: block; color: #edf5ed; font-size: .98rem; } .tmg-public-shell .tmg-ind-scenario-says { margin: 0; padding: 18px 20px; border-radius: 14px 14px 14px 3px; background: #f0f5e9; color: #18382e; font-size: 1.12rem; line-height: 1.45; font-weight: 500; } .tmg-public-shell .tmg-ind-scenario-task { margin-top: 20px; } .tmg-public-shell .tmg-ind-scenario-task span { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #cbf57c; } .tmg-public-shell .tmg-ind-scenario-task p { margin: 6px 0 0; font-size: .86rem; color: #c4d7c9; } .tmg-public-shell .tmg-ind-scenario-path { margin-top: 24px; padding-top: 18px; border-top: 1px solid #557763; font-size: .72rem; color: #cbf57c; } .tmg-public-shell .tmg-ind-split { display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; } .tmg-public-shell .tmg-ind-who { background: var(--pub-soft); border-radius: 14px; padding: 32px; align-self: start; } .tmg-public-shell .tmg-ind-who-h { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 24px; } .tmg-public-shell .tmg-ind-who ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; } .tmg-public-shell .tmg-ind-who li { display: flex; gap: 12px; padding: 8px 0; } .tmg-public-shell .tmg-ind-section-tint { background: var(--pub-soft); border-radius: 24px; } .tmg-public-shell .tmg-ind-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; } .tmg-public-shell .tmg-ind-benefit { padding-top: 28px; border-top: 1px solid var(--pub-line); } .tmg-public-shell .tmg-ind-benefit-icon { font-size: 1.6rem; color: var(--pub-accent); margin-bottom: 24px; } .tmg-public-shell .tmg-ind-benefit h3 { font-size: 1.15rem; } .tmg-public-shell .tmg-ind-benefit p { color: var(--pub-muted); font-size: .9rem; } .tmg-public-shell .tmg-ind-courses { display: grid; grid-template-columns: 1fr; gap: 20px; } .tmg-public-shell .tmg-ind-course { padding: 30px; background: var(--pub-surface); border: 1px solid var(--pub-line); border-radius: 14px; min-width: 0; } .tmg-public-shell .tmg-ind-course-top { display: flex; gap: 20px; justify-content: space-between; align-items: start; } .tmg-public-shell .tmg-ind-course-name { font-size: 1.3rem; line-height: 1.3; margin: 0 0 18px; min-width: 0; overflow-wrap: anywhere; } .tmg-public-shell .tmg-ind-course-levels { flex: none; font-size: .7rem; border: 1px solid var(--pub-line); padding: 4px 10px; border-radius: 20px; } .tmg-public-shell .tmg-ind-course-desc { color: var(--pub-muted); font-size: .9rem; } .tmg-public-shell .tmg-ind-course-levels-list { padding: 0; margin: 20px 0 0; list-style: none; } .tmg-public-shell .tmg-ind-course-levels-list li { display: flex; align-items: baseline; gap: 14px; border-top: 1px solid var(--pub-line); padding: 12px 0; font-size: .85rem; } .tmg-public-shell .tmg-ind-diff { flex: none; color: var(--pub-accent); font-size: .64rem; min-width: 65px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; } .tmg-public-shell .tmg-ind-level-name { min-width: 0; overflow-wrap: anywhere; } .tmg-public-shell .tmg-ind-library-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } .tmg-public-shell .tmg-ind-actions { margin-top: 30px; } .tmg-public-shell .tmg-ind-actions .btn { max-width: 100%; white-space: normal; } .tmg-public-shell .tmg-ind-final-neutral { background: var(--pub-soft); color: var(--pub-ink); } .tmg-public-shell .tmg-ind-final-neutral p { color: var(--pub-muted); } .tmg-public-shell .tmg-ind-final > .tmg-landing-actions { justify-content: flex-start; } /* Industry stories: one composition per industry (Components/Pages/Industries/Stories). */ .tmg-public-shell .tmg-ind-story :is(blockquote,cite) { margin: 0; font-style: normal; } .tmg-public-shell .tmg-ind-split--flip { grid-template-columns: .7fr 1.3fr; } .tmg-public-shell .tmg-ind-tag { display: inline-block; align-self: start; justify-self: start; padding: 4px 11px; border-radius: 20px; background: color-mix(in srgb,var(--ind-accent,var(--pub-accent)) 14%,var(--pub-surface)); color: var(--pub-ink); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; } .tmg-public-shell .tmg-ind-tag--plain { background: var(--pub-soft); } .tmg-public-shell .tmg-ind-stage-courses { list-style: none; margin: 14px 0 0; padding: 0; font-size: .8rem; } .tmg-public-shell .tmg-ind-stage-courses li + li { margin-top: 6px; } .tmg-public-shell .tmg-ind-stage-courses a { font-weight: 600; text-decoration: none; } .tmg-public-shell .tmg-ind-stage-courses a:is(:hover,:focus-visible) { text-decoration: underline; } .tmg-public-shell .tmg-ind-stage-courses i { margin-left: 3px; font-size: .7rem; } .tmg-public-shell .tmg-ind-dark { background: #17382d; color: #edf4ed; border-radius: 24px; } .tmg-public-shell .tmg-ind-dark .tmg-ind-section-sub { color: #c0d2c7; } .tmg-public-shell .tmg-ind-dark a { color: #cbf57c; } .tmg-public-shell .tmg-ind-dark a:focus-visible { outline-color: #cbf57c; } .tmg-public-shell .tmg-ind-audience { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--pub-line); } .tmg-public-shell .tmg-ind-audience-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .tmg-public-shell .tmg-ind-audience ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-ind-audience li { padding: 6px 14px; border: 1px solid var(--pub-line); border-radius: 20px; background: var(--pub-surface); font-size: .82rem; } .tmg-public-shell .tmg-ind-limits { display: flex; gap: 10px; max-width: 86ch; margin: 22px 0 0; color: var(--pub-muted); font-size: .82rem; } .tmg-public-shell .tmg-ind-limits i { color: var(--pub-accent); } .tmg-public-shell .tmg-ind-benefits--four { grid-template-columns: repeat(4,minmax(0,1fr)); } .tmg-public-shell .tmg-ind-benefits--two,.tmg-public-shell .tmg-ind-benefits--numbered,.tmg-public-shell .tmg-ind-benefits--media { grid-template-columns: repeat(2,minmax(0,1fr)); } .tmg-public-shell .tmg-ind-benefits--two { gap: 20px; } .tmg-public-shell .tmg-ind-benefits--two .tmg-ind-benefit { padding: 28px; border: 1px solid var(--pub-line); border-radius: 14px; background: var(--pub-surface); } .tmg-public-shell .tmg-ind-benefits--numbered { counter-reset: benefit; gap: 12px 40px; } .tmg-public-shell .tmg-ind-benefits--numbered .tmg-ind-benefit::before { counter-increment: benefit; content: counter(benefit,decimal-leading-zero); display: block; margin-bottom: 14px; color: var(--pub-accent); font-size: 2rem; line-height: 1.2; } .tmg-public-shell .tmg-ind-benefits--media { gap: 8px 56px; } .tmg-public-shell .tmg-ind-benefits--media .tmg-ind-benefit { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 0 18px; align-content: start; } .tmg-public-shell .tmg-ind-benefits--media .tmg-ind-benefit-icon { grid-row: 1 / span 2; margin: 0; } /* Sales: quote wall and a seven-stage call track. */ .tmg-public-shell .tmg-ind-wall { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-ind-wall li { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--pub-line); border-radius: 18px 18px 18px 4px; background: var(--pub-surface); } .tmg-public-shell .tmg-ind-wall blockquote { font-size: 1.3rem; line-height: 1.4; font-weight: 500; letter-spacing: -.02em; } .tmg-public-shell .tmg-ind-wall cite { font-size: .78rem; color: var(--pub-muted); } .tmg-public-shell .tmg-ind-wall p { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--pub-line); color: var(--pub-muted); font-size: .9rem; } .tmg-public-shell .tmg-ind-wall p strong { color: var(--pub-ink); } .tmg-public-shell .tmg-ind-track { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); row-gap: 44px; list-style: none; margin: 16px 0 0; padding: 0; } .tmg-public-shell .tmg-ind-track > li { position: relative; padding: 32px 18px 0 0; border-top: 2px solid var(--pub-line); } .tmg-public-shell .tmg-ind-track-num,.tmg-public-shell .tmg-ind-zig-num { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .78rem; font-weight: 700; } .tmg-public-shell .tmg-ind-track-num { top: -16px; left: 0; background: var(--pub-accent); color: var(--pub-paper); } .tmg-public-shell .tmg-ind-track h3 { font-size: 1.08rem; margin: 0 0 8px; } .tmg-public-shell .tmg-ind-track p { margin: 0; color: var(--pub-muted); font-size: .82rem; } /* Customer service: a ledger of calls, then the hard ones on a dark panel. */ .tmg-public-shell .tmg-ind-ledger { list-style: none; margin: 40px 0 0; padding: 0; border: 1px solid var(--pub-line); border-radius: 14px; background: var(--pub-surface); overflow: hidden; } .tmg-public-shell .tmg-ind-ledger > li { display: grid; grid-template-columns: 190px minmax(0,1.25fr) minmax(0,1fr); gap: 28px; align-items: start; padding: 24px 30px; } .tmg-public-shell .tmg-ind-ledger > li + li { border-top: 1px solid var(--pub-line); } .tmg-public-shell .tmg-ind-ledger > .tmg-ind-ledger-head { padding-block: 13px; background: var(--pub-soft); color: var(--pub-muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .tmg-public-shell .tmg-ind-ledger blockquote { font-size: 1.06rem; line-height: 1.5; font-weight: 500; } .tmg-public-shell .tmg-ind-ledger cite { display: block; margin-top: 6px; color: var(--pub-muted); font-size: .78rem; font-weight: 400; } .tmg-public-shell .tmg-ind-ledger p { margin: 0; color: var(--pub-muted); font-size: .9rem; } .tmg-public-shell .tmg-ind-hard { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 56px; } .tmg-public-shell .tmg-ind-hard article { padding: 26px 0; border-top: 1px solid #54715f; } .tmg-public-shell .tmg-ind-hard h3 { font-size: 1.3rem; margin: 0 0 10px; } .tmg-public-shell .tmg-ind-hard p { margin: 0; color: #c0d2c7; font-size: .92rem; } .tmg-public-shell .tmg-ind-benefit-rows { margin: 0; border-top: 1px solid var(--pub-line); } .tmg-public-shell .tmg-ind-benefit-rows > div { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.6fr); gap: 12px 40px; padding: 24px 0; border-bottom: 1px solid var(--pub-line); } .tmg-public-shell .tmg-ind-benefit-rows dt { display: flex; align-items: baseline; gap: 14px; font-size: 1.15rem; font-weight: 600; } .tmg-public-shell .tmg-ind-benefit-rows dt i { color: var(--pub-accent); } .tmg-public-shell .tmg-ind-benefit-rows dd { margin: 0; color: var(--pub-muted); font-size: .95rem; } /* Debt collection: two desks, then the moments to pause. */ .tmg-public-shell .tmg-ind-desks { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 20px; align-items: start; } .tmg-public-shell .tmg-ind-desk { border: 1px solid var(--pub-line); border-radius: 16px; background: var(--pub-surface); overflow: hidden; } .tmg-public-shell .tmg-ind-desk > header { display: flex; align-items: center; gap: 14px; padding: 22px 28px; border-bottom: 1px solid var(--pub-line); background: color-mix(in srgb,var(--ind-accent,var(--pub-accent)) 10%,var(--pub-surface)); } .tmg-public-shell .tmg-ind-desk > header i { font-size: 1.4rem; } .tmg-public-shell .tmg-ind-desk > header h3 { flex: 1; min-width: 0; margin: 0; font-size: 1.2rem; } .tmg-public-shell .tmg-ind-desk > header span { flex: none; font-size: .72rem; } .tmg-public-shell .tmg-ind-desk ol { list-style: none; margin: 0; padding: 6px 28px 10px; } .tmg-public-shell .tmg-ind-desk:last-child ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 36px; } .tmg-public-shell .tmg-ind-desk ol > li { padding: 20px 0; border-top: 1px solid var(--pub-line); } .tmg-public-shell .tmg-ind-desk ol > li:first-child,.tmg-public-shell .tmg-ind-desk:last-child ol > li:nth-child(2) { border-top: 0; } .tmg-public-shell .tmg-ind-desk ol > li > strong { display: block; } .tmg-public-shell .tmg-ind-desk ol > li > p { margin: 4px 0 0; color: var(--pub-muted); font-size: .86rem; } .tmg-public-shell .tmg-ind-pause { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 20px 72px; align-items: start; } .tmg-public-shell .tmg-ind-pause-lead > i { display: block; margin-bottom: 24px; color: #cbf57c; font-size: 2.6rem; line-height: 1; } .tmg-public-shell .tmg-ind-pause-list { list-style: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-ind-pause-list li { padding: 24px 0; border-top: 1px solid #54715f; } .tmg-public-shell .tmg-ind-pause-list li:first-child { padding-top: 0; border-top: 0; } .tmg-public-shell .tmg-ind-pause-list h3 { margin: 0 0 12px; color: #cbf57c; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; } .tmg-public-shell .tmg-ind-pause-list blockquote { font-size: 1.25rem; line-height: 1.45; } .tmg-public-shell .tmg-ind-pause-list cite { display: block; margin: 6px 0 12px; color: #bdd0c3; font-size: .78rem; } .tmg-public-shell .tmg-ind-pause-list p { margin: 0; color: #c0d2c7; font-size: .92rem; } /* Recruitment: a staggered placement timeline, then an exchange of bubbles. */ .tmg-public-shell .tmg-ind-zig { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 88px; list-style: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-ind-zig::before { content: ''; position: absolute; inset: 0 auto 0 50%; width: 2px; margin-left: -1px; background: var(--pub-line); } .tmg-public-shell .tmg-ind-zig > li { position: relative; padding: 24px 26px; border: 1px solid var(--pub-line); border-radius: 14px; background: var(--pub-surface); } .tmg-public-shell .tmg-ind-zig > li:nth-child(odd) { margin-bottom: 72px; } .tmg-public-shell .tmg-ind-zig > li:nth-child(even) { margin-top: 72px; } .tmg-public-shell .tmg-ind-zig-num { top: 22px; border: 2px solid var(--pub-accent); background: var(--pub-paper); color: var(--pub-accent); } .tmg-public-shell .tmg-ind-zig > li:nth-child(odd) .tmg-ind-zig-num { right: -60px; } .tmg-public-shell .tmg-ind-zig > li:nth-child(even) .tmg-ind-zig-num { left: -60px; } .tmg-public-shell .tmg-ind-zig h3 { font-size: 1.15rem; margin: 14px 0 6px; } .tmg-public-shell .tmg-ind-zig p { margin: 0; color: var(--pub-muted); font-size: .88rem; } .tmg-public-shell .tmg-ind-thread-wrap { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 20px 72px; align-items: start; } .tmg-public-shell .tmg-ind-thread { display: flex; flex-direction: column; gap: 30px; } .tmg-public-shell .tmg-ind-exchange { display: flex; flex-direction: column; gap: 10px; } .tmg-public-shell .tmg-ind-bubble { max-width: 88%; margin: 0; padding: 18px 22px; border: 1px solid var(--pub-line); border-radius: 16px 16px 16px 4px; background: var(--pub-surface); } .tmg-public-shell .tmg-ind-bubble :is(figcaption,span) { display: block; margin-bottom: 8px; color: var(--pub-muted); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .tmg-public-shell .tmg-ind-bubble blockquote { font-size: 1.15rem; line-height: 1.45; font-weight: 500; } .tmg-public-shell .tmg-ind-bubble--you { align-self: flex-end; border-color: #365047; border-radius: 16px 16px 4px 16px; background: #17382d; color: #edf5ed; } .tmg-public-shell .tmg-ind-bubble--you span { color: #cbf57c; } .tmg-public-shell .tmg-ind-bubble--you p { margin: 0; font-size: .95rem; } /* Estate agency: request slips, then the branch as a board. */ .tmg-public-shell .tmg-ind-slips { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-ind-slips > li { display: grid; grid-template-rows: 1fr auto; border: 1px solid var(--pub-line); border-radius: 14px; background: var(--pub-surface); overflow: hidden; } .tmg-public-shell .tmg-ind-slip-ask { padding: 26px 28px; } .tmg-public-shell .tmg-ind-slip-ask blockquote { margin: 16px 0 8px; font-size: 1.25rem; line-height: 1.42; font-weight: 500; letter-spacing: -.02em; } .tmg-public-shell .tmg-ind-slip-ask cite { color: var(--pub-muted); font-size: .78rem; } .tmg-public-shell .tmg-ind-slip-answer { padding: 18px 28px 22px 24px; border-top: 1px solid var(--pub-line); border-left: 4px solid var(--ind-accent,var(--pub-accent)); background: var(--pub-soft); } .tmg-public-shell .tmg-ind-slip-answer span,.tmg-public-shell .tmg-ind-board-step { display: block; color: var(--pub-muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .tmg-public-shell .tmg-ind-slip-answer p { margin: 6px 0 0; font-size: .92rem; } .tmg-public-shell .tmg-ind-board { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-ind-board > li { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--pub-line); border-top: 4px solid var(--ind-accent,var(--pub-accent)); border-radius: 14px; background: var(--pub-surface); } .tmg-public-shell .tmg-ind-board h3 { font-size: 1.15rem; margin: 10px 0 8px; } .tmg-public-shell .tmg-ind-board p { margin: 0 0 18px; color: var(--pub-muted); font-size: .86rem; } .tmg-public-shell .tmg-ind-board .tmg-ind-stage-courses { margin-top: auto; } .tmg-public-shell .tmg-ind-board .tmg-ind-stage-courses li { padding: 10px 12px; border: 1px solid var(--pub-line); border-radius: 8px; background: var(--pub-paper); } /* Dating and social confidence: a ladder of small steps, fixed answers and plain limits. */ .tmg-public-shell .tmg-ind-ladder { list-style: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-ind-ladder > li { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 2px 18px; max-width: 620px; padding: 18px 22px; border: 1px solid var(--pub-line); border-radius: 12px; background: var(--pub-surface); } .tmg-public-shell .tmg-ind-ladder > li + li { margin-top: 10px; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(2) { margin-left: 4%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(3) { margin-left: 8%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(4) { margin-left: 12%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(5) { margin-left: 16%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(6) { margin-left: 20%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(7) { margin-left: 24%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(8) { margin-left: 28%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(9) { margin-left: 32%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(10) { margin-left: 36%; } .tmg-public-shell .tmg-ind-ladder-num { grid-row: 1 / span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb,var(--ind-accent,var(--pub-accent)) 14%,var(--pub-surface)); font-weight: 700; } .tmg-public-shell .tmg-ind-ladder :is(h3,p,ul) { grid-column: 2; } .tmg-public-shell .tmg-ind-ladder h3 { font-size: 1.08rem; margin: 0; } .tmg-public-shell .tmg-ind-ladder p { margin: 0; color: var(--pub-muted); font-size: .88rem; } .tmg-public-shell .tmg-ind-ladder .tmg-ind-stage-courses { margin-top: 8px; } .tmg-public-shell .tmg-ind-warm { background: color-mix(in srgb,var(--ind-accent,var(--pub-accent)) 7%,var(--pub-paper)); } .tmg-public-shell .tmg-ind-outcomes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-ind-outcomes li { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--pub-line); border-radius: 18px; background: var(--pub-surface); } .tmg-public-shell .tmg-ind-outcomes h3 { font-size: 1.6rem; letter-spacing: -.03em; margin: 0 0 6px; } .tmg-public-shell .tmg-ind-outcomes cite { display: block; margin-bottom: 16px; color: var(--pub-muted); font-size: .78rem; } .tmg-public-shell .tmg-ind-outcomes p { margin: 0; color: var(--pub-muted); font-size: .92rem; } .tmg-public-shell .tmg-ind-outcomes-done { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; color: var(--pub-accent); font-size: .78rem; font-weight: 600; } .tmg-public-shell .tmg-ind-isnt { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 40px; } .tmg-public-shell .tmg-ind-isnt > div { padding: 32px; border: 1px solid var(--pub-line); border-radius: 16px; background: var(--pub-surface); } .tmg-public-shell .tmg-ind-isnt > div:last-child { background: var(--pub-soft); } .tmg-public-shell .tmg-ind-isnt h3 { font-size: 1.2rem; margin: 0 0 14px; } .tmg-public-shell .tmg-ind-isnt ul { list-style: none; margin: 0; padding: 0; } .tmg-public-shell .tmg-ind-isnt li { display: flex; gap: 12px; padding: 9px 0; color: var(--pub-muted); font-size: .93rem; } .tmg-public-shell .tmg-ind-isnt li i { flex: none; color: var(--pub-accent); } .tmg-public-shell .tmg-ind-isnt li strong { color: var(--pub-ink); } /* Shared after the story: call analysis and interruption practice notes. */ .tmg-public-shell .tmg-ind-notes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; padding-top: 0; } .tmg-public-shell .tmg-ind-note { padding: 30px; border: 1px solid var(--pub-line); border-radius: 14px; background: var(--pub-surface); } .tmg-public-shell .tmg-ind-note > i { color: var(--pub-accent); font-size: 1.5rem; } .tmg-public-shell .tmg-ind-note h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin: 14px 0 10px; } .tmg-public-shell .tmg-ind-note p { color: var(--pub-muted); font-size: .92rem; } .tmg-public-shell .tmg-ind-note > p:last-child { margin-bottom: 0; } /* Form-first identity surfaces and calm legal/status pages. */ .tmg-public-shell .tmg-auth-card { max-width: 520px; width: calc(100% - 2 * var(--pub-gutter)); margin: 64px auto; padding: 36px; border: 1px solid var(--pub-line); border-radius: 16px; background: var(--pub-surface); box-shadow: 0 18px 50px -35px #18382e55; } .tmg-public-shell .tmg-register { width: calc(100% - 2 * var(--pub-gutter)); margin: 64px auto; } .tmg-public-shell .tmg-auth-procedure { max-width: 760px; } .tmg-public-shell .tmg-auth-procedure .col-xl-6 { width: 100%; } .tmg-public-shell .tmg-auth-procedure kbd { white-space: normal; overflow-wrap: anywhere; } .tmg-public-shell .tmg-auth-procedure .form-control { min-height: 48px; } .tmg-public-shell .tmg-auth-title { font-size: 2.25rem; letter-spacing: -.045em; margin-bottom: 14px; } .tmg-public-shell .tmg-auth-subtitle { color: var(--pub-muted); font-size: .9rem; margin-bottom: 28px; } .tmg-public-shell .tmg-auth-card .form-control { color: var(--pub-ink); background: var(--pub-paper); border-color: var(--pub-line); border-radius: 8px; } .tmg-public-shell .tmg-auth-links a { min-height: 44px; display: inline-flex; align-items: center; } .tmg-public-shell .tmg-public-main > .container,.tmg-public-shell .tmg-public-main > .row { margin: 56px auto; padding-inline: var(--pub-gutter); width: min(100%,960px); } .tmg-public-shell .tmg-legal-article { width: min(100%,960px); margin: auto; padding: var(--pub-space) var(--pub-gutter); } .tmg-public-shell .tmg-legal-article h1 { max-width: 15ch; margin-bottom: 24px; } .tmg-public-shell .tmg-legal-article h2 { font-size: 1.4rem; margin: 40px 0 18px; } .tmg-public-shell .tmg-legal-article p { color: var(--pub-muted); } .tmg-public-shell .tmg-legal-article .alert { color: #654b0d; background: #fff4cd; border-color: #dec980; font-size: .9rem; padding: 22px; } .tmg-public-shell .tmg-legal-article dd { min-height: 30px; border-bottom: 1px solid var(--pub-line); margin-bottom: 18px; } .tmg-public-shell .tmg-status-page { width: min(100%,1120px); margin: auto; padding: var(--pub-space) var(--pub-gutter); display: grid; grid-template-columns: 1.3fr .7fr; gap: 50px; align-items: center; } .tmg-public-shell .tmg-status-page h1 { font-size: clamp(2.5rem,4vw,3.75rem); max-width: 17ch; margin: 24px 0; } .tmg-public-shell .tmg-status-page p { color: var(--pub-muted); } .tmg-public-shell .tmg-status-art { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--pub-line); background: radial-gradient(circle,var(--pub-soft),transparent 70%); } .tmg-public-shell .tmg-status-art img { width: 40%; height: auto; } .tmg-public-shell .tmg-billing-cancel-shell { width: min(100%,800px); margin: auto; padding: var(--pub-space) var(--pub-gutter); } .tmg-public-shell .tmg-billing-cancel-card { padding: 40px; background: var(--pub-surface); border: 1px solid var(--pub-line); border-radius: 18px; } .tmg-public-shell .tmg-billing-cancel-icon { color: var(--pub-accent); font-size: 2.5rem; } .tmg-public-shell .tmg-billing-cancel-title { font-size: 2.5rem; margin: 24px 0; } .tmg-public-shell .tmg-billing-cancel-sub { color: var(--pub-muted); } @media (min-width: 992px) and (max-width: 1199.98px) { .tmg-public-shell .tmg-public-header { padding-inline: 24px; gap: 16px; } .tmg-public-shell .tmg-public-header-nav { gap: 10px; } .tmg-public-shell .tmg-public-header-nav a { font-size: .78rem; } .tmg-public-shell .tmg-public-header-nav .btn { padding-inline: 12px; } .tmg-public-shell .tmg-public-brand { font-size: 1.15rem; } } @media (max-width: 991.98px) { .tmg-public-shell .tmg-public-header { flex-wrap: wrap; padding: 12px var(--pub-gutter); gap: 12px; } .tmg-public-shell .tmg-public-menu-toggle { display: inline-flex; } .tmg-public-shell .tmg-public-header-nav { display: none; width: 100%; flex-wrap: wrap; gap: 4px 20px; padding-top: 12px; border-top: 1px solid var(--pub-line); } .tmg-public-shell .tmg-public-header-nav.is-open { display: flex; } .tmg-public-shell .tmg-public-header-nav > a { flex-basis: calc(50% - 20px); } .tmg-public-shell .tmg-nav-dropdown { flex-basis: calc(50% - 20px); position: static; } .tmg-public-shell .tmg-nav-dropdown-menu { left: var(--pub-gutter); top: 100%; transform: none; width: calc(100% - 2 * var(--pub-gutter)); max-height: calc(100dvh - 180px); overflow-y: auto; } .tmg-public-shell .tmg-landing-hero-inner { grid-template-columns: 1fr 1fr; gap: 28px; } .tmg-public-shell .tmg-landing-title { font-size: clamp(2.4rem,5vw,3.5rem); } .tmg-public-shell .tmg-canvas-top { font-size: .67rem; } .tmg-public-shell .tmg-practice-canvas { padding: 20px; } .tmg-public-shell .tmg-canvas-orbit { width: 140px; height: 140px; } .tmg-public-shell .tmg-canvas-message { width: 100%; padding: 16px; } .tmg-public-shell .tmg-canvas-message p { font-size: 1rem; } .tmg-public-shell :is(.tmg-pricing-hero,.tmg-capage-hero,.tmg-about-hero,.tmg-team-hero,.tmg-ind-hero-inner,.tmg-capage-row,.tmg-capage-row--flip,.tmg-ind-split,.tmg-home-demo,.tmg-home-faq,.tmg-pricing-faq,.tmg-demos-hero,.tmg-demos-covers,.tmg-ind-index-hero) { column-gap: 32px; } .tmg-public-shell .tmg-landing-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } .tmg-public-shell .tmg-landing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .tmg-public-shell .tmg-landing-grid-item:nth-child(4) { grid-column: auto; } .tmg-public-shell .tmg-public-footer-inner { gap: 24px; } .tmg-public-shell .tmg-ind-wall,.tmg-public-shell .tmg-ind-board,.tmg-public-shell .tmg-ind-benefits--four { grid-template-columns: repeat(2,minmax(0,1fr)); } .tmg-public-shell .tmg-ind-track { grid-template-columns: repeat(4,minmax(0,1fr)); } .tmg-public-shell .tmg-ind-ledger > li { grid-template-columns: 150px minmax(0,1.2fr) minmax(0,1fr); gap: 20px; padding-inline: 22px; } .tmg-public-shell .tmg-ind-desks,.tmg-public-shell .tmg-ind-pause,.tmg-public-shell .tmg-ind-thread-wrap { grid-template-columns: minmax(0,1fr); } .tmg-public-shell .tmg-ind-zig { column-gap: 64px; } .tmg-public-shell .tmg-ind-zig > li:nth-child(odd) .tmg-ind-zig-num { right: -48px; } .tmg-public-shell .tmg-ind-zig > li:nth-child(even) .tmg-ind-zig-num { left: -48px; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(2) { margin-left: 2%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(3) { margin-left: 4%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(4) { margin-left: 6%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(5) { margin-left: 8%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(6) { margin-left: 10%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(7) { margin-left: 12%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(8) { margin-left: 14%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(9) { margin-left: 16%; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(10) { margin-left: 18%; } } @media (max-width: 767.98px) { .tmg-public-shell { --pub-gutter: 24px; --pub-space: 56px; } .tmg-public-shell :is(.tmg-landing-hero-inner,.tmg-pricing-hero,.tmg-about-hero,.tmg-team-hero,.tmg-capage-hero,.tmg-ind-hero-inner,.tmg-home-demo,.tmg-home-faq,.tmg-pricing-faq,.tmg-capage-row,.tmg-capage-row--flip,.tmg-capage-method > div,.tmg-demos-hero,.tmg-demos-covers,.tmg-ind-index-hero,.tmg-ind-split,.tmg-status-page) { display: flex; flex-direction: column; align-items: stretch; gap: 24px; } .tmg-public-shell h1,.tmg-public-shell .tmg-landing-title { font-size: clamp(2.5rem,8.5vw,3.75rem); } .tmg-public-shell .tmg-landing-hero { padding: 48px 0 36px; } .tmg-public-shell .tmg-landing-sub { margin-bottom: 24px; } .tmg-public-shell .tmg-practice-canvas { margin-top: 16px; padding: 24px; } .tmg-public-shell .tmg-canvas-orbit { width: 145px; height: 145px; margin-top: 8px; } .tmg-public-shell .tmg-canvas-message { width: 92%; } .tmg-public-shell .tmg-canvas-message p { font-size: 1.05rem; } .tmg-public-shell .tmg-canvas-context { margin-bottom: 18px; } .tmg-public-shell .tmg-landing-stats-inner { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 18px; } .tmg-public-shell .tmg-landing-stats-inner > div:nth-child(2) { border: 0; } .tmg-public-shell .tmg-landing-stat-num { font-size: 1.9rem; } .tmg-public-shell .tmg-landing-stat-label { font-size: .72rem; } .tmg-public-shell .tmg-landing-steps { gap: 28px; margin-top: 24px; } .tmg-public-shell :is(.tmg-home-analysis-grid,.tmg-home-know-list,.tmg-capage-cards,.tmg-ind-benefits,.tmg-ind-index-grid,.tmg-ind-library-grid) { grid-template-columns: minmax(0,1fr); } .tmg-public-shell :is(.tmg-home-analysis,.tmg-home-interruptions,.tmg-pricing-rates,.tmg-capage-team,.tmg-ind-section-tint,.tmg-ind-dark) { border-radius: 0; } .tmg-public-shell .tmg-home-analysis-hero { margin: 8px 0 32px; } .tmg-public-shell .tmg-home-analysis-grid { gap: 36px; } .tmg-public-shell .tmg-home-analysis-note a { display: flex; margin-left: 0; white-space: normal; } .tmg-public-shell .tmg-pressure-rail { grid-template-columns: repeat(2,minmax(0,1fr)); } .tmg-public-shell .tmg-pressure-rail > span { padding: 15px 12px; } .tmg-public-shell .tmg-pressure-rail small { font-size: .68rem; } .tmg-public-shell .tmg-home-interruption-quote { font-size: 1.25rem; } .tmg-public-shell .tmg-landing-grid { grid-template-columns: minmax(0,1fr); } .tmg-public-shell .tmg-landing-grid-item:first-child,.tmg-public-shell .tmg-landing-grid-item:nth-child(4) { grid-column: auto; } .tmg-public-shell .tmg-home-demo .tmg-landing-section-sub { margin-bottom: 0; } .tmg-public-shell .tmg-home-solo-inner { padding: 28px; } .tmg-public-shell .tmg-home-know { padding: 24px 0; } .tmg-public-shell .tmg-landing-suggest-inner { flex-direction: column; align-items: start; padding: 28px; } .tmg-public-shell .tmg-public-footer-inner { grid-template-columns: repeat(2,minmax(0,1fr)); } .tmg-public-shell .tmg-public-footer-brand { grid-column: 1 / -1; padding-bottom: 20px; } .tmg-public-shell .tmg-public-footer-brand p { max-width: 30ch; } .tmg-public-shell .tmg-pricing-balance { padding: 26px; } .tmg-public-shell .tmg-pricing-balance strong { font-size: 5.5rem; margin-top: 10px; } .tmg-public-shell .tmg-pricing-hero-payg { font-size: clamp(2.8rem,15vw,3.6rem); } .tmg-public-shell .tmg-pricing-rate-row { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 22px; } .tmg-public-shell .tmg-pricing-rate-price { text-align: left; font-size: 1.15rem; } .tmg-public-shell .tmg-pricing-rate-price--wrap { font-size: .95rem; } .tmg-public-shell .tmg-about-hero-mark { margin-bottom: 0; } .tmg-public-shell .tmg-about-feature-art { padding: 30px; } .tmg-public-shell .tmg-team-hero-note { padding: 12px 0 12px 20px; margin: 0; font-size: 1rem; } .tmg-public-shell .tmg-team-build-inner { grid-template-columns: 1fr; gap: 20px; } .tmg-public-shell .tmg-team-build-icon { font-size: 2.5rem; } .tmg-public-shell .tmg-capage-row { padding-block: 36px; } .tmg-public-shell .tmg-capage-row--flip .tmg-capage-row-copy { order: 0; } .tmg-public-shell .tmg-capage-cost { flex-direction: column; padding: 28px; gap: 16px; } .tmg-public-shell .tmg-ind-card { grid-column: auto; padding: 24px; gap: 14px; } .tmg-public-shell .tmg-ind-card:nth-child(1) { padding-block: 28px; } .tmg-public-shell .tmg-ind-card-title { font-size: 1.4rem; } .tmg-public-shell .tmg-ind-card-foot { grid-column: 1 / -1; } .tmg-public-shell .tmg-ind-scenario { padding: 24px; } .tmg-public-shell .tmg-ind-scenario-caller { margin-top: 22px; } .tmg-public-shell .tmg-ind-scenario-says { font-size: 1.02rem; } .tmg-public-shell .tmg-ind-wall,.tmg-public-shell .tmg-ind-board,.tmg-public-shell .tmg-ind-benefits--four,.tmg-public-shell .tmg-ind-track,.tmg-public-shell .tmg-ind-hard,.tmg-public-shell .tmg-ind-slips,.tmg-public-shell .tmg-ind-outcomes,.tmg-public-shell .tmg-ind-isnt,.tmg-public-shell .tmg-ind-notes,.tmg-public-shell .tmg-ind-zig,.tmg-public-shell .tmg-ind-desk:last-child ol { grid-template-columns: minmax(0,1fr); } .tmg-public-shell .tmg-ind-wall li,.tmg-public-shell .tmg-ind-outcomes li,.tmg-public-shell .tmg-ind-isnt > div,.tmg-public-shell .tmg-ind-note,.tmg-public-shell .tmg-ind-benefits--two .tmg-ind-benefit { padding: 24px; } .tmg-public-shell .tmg-ind-wall blockquote,.tmg-public-shell .tmg-ind-slip-ask blockquote,.tmg-public-shell .tmg-ind-pause-list blockquote { font-size: 1.12rem; } .tmg-public-shell .tmg-ind-track { row-gap: 0; margin-left: 15px; } .tmg-public-shell .tmg-ind-track > li { padding: 0 0 30px 30px; border-top: 0; border-left: 2px solid var(--pub-line); } .tmg-public-shell .tmg-ind-track > li:last-child { padding-bottom: 0; } .tmg-public-shell .tmg-ind-track-num { top: 0; left: -16px; } .tmg-public-shell .tmg-ind-ledger > li { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 22px; } .tmg-public-shell .tmg-ind-ledger > .tmg-ind-ledger-head { display: none; } .tmg-public-shell .tmg-ind-ledger > .tmg-ind-ledger-head + li { border-top: 0; } .tmg-public-shell .tmg-ind-benefit-rows > div { grid-template-columns: minmax(0,1fr); } .tmg-public-shell .tmg-ind-desk > header { padding: 18px 22px; } .tmg-public-shell .tmg-ind-desk ol { padding-inline: 22px; } .tmg-public-shell .tmg-ind-desk:last-child ol > li:nth-child(2) { border-top: 1px solid var(--pub-line); } .tmg-public-shell .tmg-ind-zig::before { left: 15px; } .tmg-public-shell .tmg-ind-zig > li:nth-child(n) { margin: 0 0 14px 44px; padding: 20px; } .tmg-public-shell .tmg-ind-zig > li:nth-child(n) .tmg-ind-zig-num { left: -44px; right: auto; top: 18px; } .tmg-public-shell .tmg-ind-bubble { max-width: 94%; padding: 16px 18px; } .tmg-public-shell .tmg-ind-slip-ask { padding: 22px; } .tmg-public-shell .tmg-ind-slip-answer { padding: 16px 22px 20px 18px; } .tmg-public-shell .tmg-ind-ladder > li:nth-child(n) { margin-left: 0; max-width: none; padding: 16px 18px; } .tmg-public-shell .tmg-ind-audience { margin-top: 32px; } .tmg-public-shell .tmg-ind-who { align-self: stretch; } .tmg-public-shell .tmg-ind-course { padding: 24px; } .tmg-public-shell .tmg-ind-course-top { flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .tmg-public-shell .tmg-ind-course-name { margin: 0; font-size: 1.15rem; } .tmg-public-shell .tmg-status-art { width: 170px; align-self: center; } .tmg-public-shell .tmg-auth-card { margin-block: 36px; padding: 28px; } .tmg-public-shell .tmg-register { margin-block: 36px; } .tmg-public-shell .tmg-billing-cancel-card { padding: 28px; } } @media (max-width: 374px) { .tmg-public-shell { --pub-gutter: 20px; } .tmg-public-shell .tmg-landing-steps { grid-template-columns: minmax(0,1fr); gap: 20px; } .tmg-public-shell .tmg-landing-step { display: grid; grid-template-columns: 30px 1fr; gap: 0 16px; padding-top: 20px; } .tmg-public-shell .tmg-landing-step-num { grid-row: 1 / span 2; font-size: 1.8rem; } .tmg-public-shell .tmg-landing-step p { grid-column: 2; } .tmg-public-shell .tmg-practice-canvas { padding: 18px; } .tmg-public-shell .tmg-canvas-message { width: 100%; } .tmg-public-shell .tmg-public-header-nav a { font-size: .8rem; } .tmg-public-shell .tmg-auth-card { padding: 20px; } .tmg-public-shell .tmg-ind-card { grid-template-columns: 44px 1fr; padding: 20px; } .tmg-public-shell .tmg-ind-card-icon { width: 44px; height: 44px; } .tmg-public-shell .tmg-home-solo-inner,.tmg-public-shell .tmg-landing-suggest-inner { padding: 22px; } } @media (prefers-reduced-motion: reduce) { .tmg-public-shell *, .tmg-public-shell *::before, .tmg-public-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Panels. One rule set gives every card on the public pages a light-green edge with a very faint glow. The green is the "Get started" button's own (#086a56, the same in light and dark), lightened for the edge so it reads as a line, not a fill. Tinted section backgrounds and the dark closing bands are not panels and keep their own edges. Scoped to .tmg-public-shell, so the signed-in app is untouched. */ .tmg-public-shell { --pub-edge: #086a56; --pub-panel-line: color-mix(in srgb,var(--pub-edge) 58%,#fff); --pub-panel-glow: 0 0 12px -2px color-mix(in srgb,var(--pub-edge) 28%,transparent); } html[data-tmg-theme="dark"] .tmg-public-shell { --pub-panel-line: color-mix(in srgb,var(--pub-edge) 55%,#a8e6c3); --pub-panel-glow: 0 0 14px -2px color-mix(in srgb,#a8e6c3 22%,transparent); } .tmg-public-shell :is( .tmg-pricing-balance,.tmg-pricing-rate-card,.tmg-pricing-example,.tmg-payg-claim, .tmg-practice-canvas,.tmg-shot-frame,.tmg-landing-grid-item,.tmg-home-demo-frame,.tmg-home-solo-inner,.tmg-landing-suggest-inner, .tmg-about-your-way-card,.tmg-about-feature-art,.tmg-team-card,.tmg-demos-frame,.tmg-capage-cost, .tmg-ind-card,.tmg-ind-scenario,.tmg-ind-who,.tmg-ind-course,.tmg-ind-benefits--two .tmg-ind-benefit,.tmg-ind-wall li,.tmg-ind-ledger,.tmg-ind-desk, .tmg-ind-zig > li,.tmg-ind-bubble,.tmg-ind-slips > li,.tmg-ind-board > li,.tmg-ind-ladder > li,.tmg-ind-outcomes li,.tmg-ind-isnt > div,.tmg-ind-note, .tmg-auth-card,.tmg-register-benefits,.tmg-billing-cancel-card ) { border: 1px solid var(--pub-panel-line); box-shadow: var(--pub-panel-glow); } /* Panels that already carry a drop shadow keep it, under the glow. */ .tmg-public-shell .tmg-pricing-balance { box-shadow: var(--pub-panel-glow), 0 25px 50px -35px #163d39aa; } .tmg-public-shell .tmg-practice-canvas { box-shadow: var(--pub-panel-glow), 0 28px 60px -25px #0a36263d; } .tmg-public-shell .tmg-demos-frame { box-shadow: var(--pub-panel-glow), 0 28px 60px -40px #17382d88; } .tmg-public-shell .tmg-auth-card { box-shadow: var(--pub-panel-glow), 0 18px 50px -35px #18382e55; } /* Keep the accent rule on top of the board cards and the lighter chat bubble corner shapes. */ .tmg-public-shell .tmg-ind-board > li { border-top: 4px solid var(--ind-accent,var(--pub-accent)); }