/* TechConcepts brand layer — one shared theme for every page that loads
   main.css (services, products, blog, contact, legal, all app pages).
   Matches the homepage: Manrope, teal #0E7C86, dark #12181C, light #FAFAF9.
   Aqua #5FC3CC only for small text on dark. No cream, Inter, gold or purple.
   Termino keeps its own look and does NOT load this file. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");
:root{
  --tc-teal:#0E7C86; --tc-teal-hover:#0A646C; --tc-aqua:#5FC3CC;
  --tc-dark:#12181C; --tc-light:#FAFAF9; --tc-hair:#DDE2E5; --tc-muted:#4A5560;
  --primary:#12181C; --accent:#0E7C86; --accent-hover:#0A646C;
  --paper:#FAFAF9; --paper-text:#FAFAF9; --ink:#12181C; --ink-muted:#4A5560; --ink-hairline:#DDE2E5;
  --brick:#0E7C86; --ochre:#5FC3CC; --navy:#12181C;
  --bg-dark:#12181C; --bg-gradient:#12181C; --text-body:#2A333A; --gray:#4A5560;
  --font-sans:Manrope,Helvetica,Arial,sans-serif; --font-feature:normal;
  --radius-md:8px;
}
html body{font-family:Manrope,Helvetica,Arial,sans-serif;font-feature-settings:normal;background:#FAFAF9;color:#12181C;font-size:17px;line-height:1.5}
body::before{display:none!important}
body h1,body h2,body h3,body h4{font-family:Manrope,Helvetica,Arial,sans-serif;color:inherit;letter-spacing:-0.01em}
main h1,.hero h1,section h1,header:not(.tc-header) h1{font-size:56px!important;line-height:1.1;font-weight:700}
main h2,section h2{font-size:36px;line-height:1.2;font-weight:700}
a{color:var(--tc-teal)}
/* Buttons: primary teal fill, 8px; secondary dark outline. Same everywhere. */
.btn,.btn-primary,.btn-secondary,.btn-store,.btn-appstore,.cta-button,.cta-btn,button.cta,a.cta,.tc-cta a.btn{border-radius:8px!important;font-family:Manrope,Helvetica,Arial,sans-serif;font-weight:600}
.btn-primary,.btn-store,.btn-appstore,.cta-button,.cta-btn,a.cta,.final-cta .btn-primary,.cta-start-call .btn-primary{background:#0E7C86!important;color:#fff!important;border:1px solid #0E7C86!important}
.btn-primary:hover,.btn-store:hover,.btn-appstore:hover,.cta-button:hover,.cta-btn:hover,a.cta:hover{background:#0A646C!important;border-color:#0A646C!important}
.btn-secondary,.btn-text,.btn-outline,.btn-ghost{background:transparent!important;color:#12181C!important;border:1px solid #12181C!important;border-radius:8px!important}
/* Dark sections use the brand dark; small accents on dark are aqua. */
[class*="dark"],.final-cta,.proof{background-color:#12181C}
.final-cta small,.final-cta .eyebrow,.proof .eyebrow{color:#5FC3CC}
/* Eyebrows / labels in teal on light. */
.eyebrow,.section-label,.kicker{color:#0E7C86;font-family:Manrope,Helvetica,Arial,sans-serif}
footer.tc-footer .tc-li a{color:inherit}
@media (max-width:640px){
  html body{font-size:16px}
  main h1,.hero h1,section h1,header:not(.tc-header) h1{font-size:40px!important}
  main h2,section h2{font-size:28px}
}
/* Shared app-page template (apps/*): one hero, one button style. */
.tc-app .hero,.app-hero{background:#FAFAF9;color:#12181C;text-align:center;padding:88px 0 64px}
.tc-app .hero p,.app-hero p{color:#4A5560;font-size:19px}
/* v2: first screens light and left-aligned, like the homepage hero.
   Dark #12181C stays only on booking/CTA blocks. */
.hero,.tc-app .hero,.app-hero{background:#FAFAF9!important;color:#12181C!important;text-align:left!important}
.hero h1,.hero p,.hero .hero-subtitle{text-align:left!important;margin-left:0!important;margin-right:0!important;color:#12181C}
.hero p{color:#4A5560!important}
.hero .container>*,.hero .hero-content{margin-left:0;margin-right:auto}
.hero-buttons,.hero-cta{justify-content:flex-start!important}
.hero .container>div[style*="justify-content"],.hero [style*="justify-content: center"]{justify-content:flex-start!important}
/* v3: blog posts — readable centred column (both post templates). */
main.blog-post,article.blog-article{display:block;width:auto!important;max-width:768px!important;margin:0 auto!important;padding:48px 24px 72px!important;box-sizing:border-box!important}
.container>article.blog-article{padding:32px 20px 56px!important}
@media (max-width:640px){.blog-section .container{padding-left:12px!important;padding-right:12px!important}}
main.blog-post article{max-width:none}
:is(main.blog-post,article.blog-article) h1{font-size:56px!important;line-height:1.1!important;margin:12px 0 16px!important}
:is(main.blog-post,article.blog-article) h2{font-size:40px!important;line-height:1.2!important;margin:48px 0 16px!important}
:is(main.blog-post,article.blog-article) h3{font-size:24px!important;line-height:1.3!important;margin:32px 0 12px!important}
:is(main.blog-post,article.blog-article) :is(p,li,td,th,blockquote){font-size:18px;line-height:1.7}
:is(main.blog-post,article.blog-article) p{margin:0 0 20px}
:is(main.blog-post,article.blog-article) :is(ul,ol){padding-left:24px;margin:0 0 20px}
:is(main.blog-post,article.blog-article) :is(img,video,iframe,svg){max-width:100%;height:auto}
:is(main.blog-post,article.blog-article) :is(pre,table){max-width:100%;overflow-x:auto;display:block}
:is(main.blog-post,article.blog-article) .post-meta,:is(main.blog-post,article.blog-article) .breadcrumb{font-size:14px;color:#4A5560}
@media (max-width:640px){
  main.blog-post,article.blog-article{padding:32px 20px 56px!important}
  :is(main.blog-post,article.blog-article) h1{font-size:40px!important}
  :is(main.blog-post,article.blog-article) h2{font-size:28px!important}
  :is(main.blog-post,article.blog-article) h3{font-size:22px!important}
  :is(main.blog-post,article.blog-article) :is(p,li){font-size:17px}
}
/* v4: long words (e.g. German compounds) must wrap instead of widening the page */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
@media (max-width:640px){h1,h2{overflow-wrap:anywhere}}
:is(main.blog-post,article.blog-article) :is(.post-meta,.article-meta,.blog-meta,.post-header,.article-header){margin-bottom:28px!important}
/* v5: mobile overflow guards for blog posts (tables, stat grids, inline forms) */
@media (max-width:640px){
  .blog-section table,main table,article table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .blog-section :is(input,select,textarea,button),article :is(input,select,textarea,button),main :is(input,select,textarea,button){max-width:100%;min-width:0}
  .blog-section [style*="display: flex"],.blog-section [style*="display:flex"],article [style*="display: flex"],article [style*="display:flex"]{flex-wrap:wrap}
  .blog-section [style*="grid-template-columns"],article [style*="grid-template-columns"]{grid-template-columns:1fr 1fr!important}
  .blog-section :is([class*="stat"],[class*="grid"]),article :is([class*="stat"],[class*="grid"]){min-width:0;max-width:100%}
  .blog-section [class*="grid"],article [class*="grid"]{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))!important}
  .blog-section pre,article pre{max-width:100%;overflow-x:auto}
}
@media (max-width:640px){
  :not(pre)>code{overflow-wrap:anywhere;word-break:break-word;white-space:normal}
  form [style*="display: flex"],form[style*="display: flex"],form [style*="display:flex"]{flex-wrap:wrap}
  form input{flex:1 1 180px;min-width:0}
}
@media (max-width:640px){:is(main.blog-post,article.blog-article,.blog-section) :is(p,li,td,th,a,blockquote){overflow-wrap:anywhere}}