/* Home and Contact: the same Ubuntu type scale as graphik.studio/web.css
   and GraphikTag Platform. Product and phone illustrations keep their scale. */
body{font:16px/1.6 Ubuntu,Arial,sans-serif}
.topbar{font-size:12px}
.navigation nav a{font-size:14px;font-weight:400;letter-spacing:0;line-height:1.6}
.navigation nav{gap:22px;margin-right:30px}
.nav-cta,.button,.hero .button,.contact-form .button,.text-link,.hero .text-link{font-size:14px;font-weight:700;line-height:1.4}
.nav-cta{white-space:nowrap}
.actions{flex-wrap:wrap}
.hero h1{font-size:clamp(45px,5.2vw,74px);line-height:1.04;letter-spacing:-3.5px;font-weight:700}
.hero-description{font-size:19px;line-height:1.6;color:#555;max-width:670px}
.eyebrow,.hero .eyebrow,.collection-copy>.eyebrow,.studio-copy>.eyebrow,.contact-copy .eyebrow{font-size:11px;line-height:1.5;letter-spacing:2px;font-weight:700}
.hero-note,.small-note,.demo-note{font-size:12px;line-height:1.6}
.hero-note{white-space:normal;flex-wrap:wrap;max-width:none}
h2,.section-heading h2,.platform-copy h2,.studio-copy h2,.faq-section h2,.contact-copy h2{font-size:clamp(28px,3vw,42px);line-height:1.14;letter-spacing:-1.5px;font-weight:700}
.section-heading>p{font-size:19px;line-height:1.6;color:#555;max-width:490px}
.collection-copy h3,.steps h3{font-size:21px;line-height:1.25;letter-spacing:-.5px;font-weight:700}
.collection-copy>p:not(.eyebrow),.studio-copy>p:not(.eyebrow),.platform-copy>p:not(.eyebrow):not(.demo-note),.faq-section>div>p:not(.eyebrow),.faq-list summary,.faq-list details>p,.contact-copy>p:not(.eyebrow){font-size:16px;line-height:1.6}
.collection-copy>p:not(.eyebrow),.studio-copy>p:not(.eyebrow),.faq-list details>p{color:#555}
.platform-copy>p:not(.eyebrow):not(.demo-note){max-width:490px}
.feature-list strong{font-size:15px;line-height:1.6;font-weight:700}
.feature-list p{font-size:15px;line-height:1.6;color:#666}
.feature-list li>span,.step-top>span{font-size:13px;line-height:1.6}
.steps p{font-size:14px;line-height:1.6}
.faq-list summary{font-weight:700}
.benefit-row>span,.showcase-bottom{font-size:14px;line-height:1.6}
.benefit-row{flex-wrap:wrap}
.showcase-top{font-size:11px;line-height:1.6;flex-wrap:wrap}
.profile-tabs button{font-size:16px;line-height:1.6}
.profile-tabs button>span{font-size:13px;line-height:1.6}
.contact-email,.contact-phone{font-size:16px;line-height:1.6}
.contact-form h3{font-size:28px;line-height:1.14;letter-spacing:-1px;font-weight:700}
.contact-form>p:first-of-type{font-size:16px;line-height:1.6}
.contact-form label{font-size:14px;line-height:1.6;font-weight:700}
.contact-form input,.contact-form select,.contact-form textarea,.contact-form input::placeholder,.contact-form textarea::placeholder{font-size:16px;line-height:1.6}
.contact-form .selected-color,.contact-form .form-note{font-size:12px;line-height:1.6}
#form-status{font-size:14px;line-height:1.6}
.footer-top>div:first-child>p,.footer-studio p,.footer-links{font-size:14px;line-height:1.6}
.footer-bottom{font-size:12px;line-height:1.6;flex-wrap:wrap}
@media(max-width:1050px){
  .hero h1{letter-spacing:-2px}
  .navigation nav{margin-right:0;gap:20px}
}
@media(max-width:900px){
  .section-heading>p{max-width:330px}
  .hero{grid-template-columns:1fr;gap:36px}
  .hero-art{min-height:390px;max-width:650px;width:100%;justify-self:center}
  .hero-art img{transform:none}
  .platform-grid{grid-template-columns:1fr;gap:35px}
  .platform-copy{max-width:none}
  .platform-copy>p:not(.eyebrow):not(.demo-note){max-width:670px}
  .phone-stage{max-width:550px;width:100%;margin:auto}
}
@media(max-width:760px){
  .navigation{gap:10px}
  .navigation nav{gap:0}
  .nav-cta{font-size:14px}
  .section-heading>p{max-width:none}
  .hero-art{min-height:0}
  .footer-top{grid-template-columns:1fr}
  .footer-studio{grid-row:auto;flex-wrap:wrap}
  .footer-links{align-items:flex-start}
}
@media(max-width:700px){
  .topbar,.topbar a{font-size:10px}
  .hero h1{font-size:46px;letter-spacing:-2px}
  .hero-description{font-size:17px}
}
@media(max-width:650px){
  .contact-form .form-row{grid-template-columns:1fr;gap:0}
}
@media(max-width:380px){
  .navigation>.brand{font-size:26px}
}