/* dovetly.com storefront: page-level layout only.
   Only classes that are NOT in docs/CONTRACTS.md section 2 live here (plus two
   safety nets marked below). Colours, type and every contract class come from
   /shared/dovetly.css, which is loaded before this file. */

/* nav + footer internals */
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;flex-wrap:wrap}
.nav__logo{display:inline-flex;align-items:center;text-decoration:none}
.nav__logo svg{height:28px;width:auto;display:block}
.nav__login{font-weight:600;text-decoration:none;color:inherit;padding:10px 14px}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;width:100%}
.footer__links{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer__links a{text-decoration:none;color:inherit}
.footer__legal{flex-basis:100%}

/* hero variants */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.hero__panel{display:flex;flex-direction:column;gap:14px;min-width:0}
.hero__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;text-decoration:none;color:inherit;background:var(--white,#fff);border-radius:var(--r-sm,12px);padding:14px 16px}
.hero__item-text{flex:1;min-width:0;display:flex;flex-direction:column}
.hero__item-title{font-weight:600}
.hero__item-price{font-family:var(--font-display,'Gabarito',sans-serif);font-weight:800;font-size:18px}
.hero__panel-note{margin:4px 0 0;color:var(--attention,#9a3412)}
.hero__note{margin:0}
.breadcrumbs{margin-bottom:22px}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs__current{color:var(--ink,#1f2430);font-weight:500}

/* home sections */
.feel__item h3{margin:0 0 8px}
.feel__item p{margin:0}
.feel__item .btn{margin-top:12px}
.how{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.how__intro p{margin:12px 0 0}
.compare__intro{max-width:680px;margin:0 0 24px}
.compare__label{font-weight:600}
.trust__copy p{margin:0}
.trust__cta{justify-self:end;align-items:flex-start}

/* catalog */
.catalog__card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;text-decoration:none;color:inherit}
.catalog__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.catalog__side{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.catalog__connect{color:var(--terra,#c2410c);font-weight:600;font-size:13px}
.catalog__describe{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
.catalog__describe-icon{color:var(--terra,#c2410c)}
.catalog__describe-text p{margin:0}
.catalog__empty{margin:0 0 6px;font-weight:600}
.catalog__note{margin:16px 0 0}

/* integration page */
.chat-demo__label{margin-bottom:12px;color:var(--attention,#9a3412)}
.chat-demo__window{background:var(--white,#fff);border-radius:14px;overflow:hidden}
.chat-demo__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line,#e9e7e4);font-weight:600;font-size:14px}
.chat-demo__body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.bubble__main{flex:1;min-width:0;display:flex;flex-direction:column}
.bubble__who{font-weight:600;font-size:14px}
.bubble__text{font-size:13.5px;color:var(--muted,#5f6673)}
.bubble__tag{font-size:11px;font-weight:600;white-space:nowrap;color:var(--muted,#5f6673)}
.bubble__tag--ok{color:var(--running,#15803d)}
.plan{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:stretch}
.plan__steps h2{margin-bottom:18px}
.plan__note{margin:18px 0 0}
.price-box__amount{display:flex;align-items:baseline;gap:10px}
.price-box__num{font-family:var(--font-display,'Gabarito',sans-serif);font-size:48px;font-weight:800;line-height:1}
.price-box__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.price-box__aside,.price-box__note{opacity:.65}
.price-box__note{margin:0}
.related__item{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.related__text{display:flex;flex-direction:column;min-width:0}
.steps__body{min-width:0}
.steps__title{font-weight:600}
.h3{font-size:22px}

/* describe */
.describe{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:start}
.describe__done{grid-column:1}
.describe__aside h3{margin:0 0 14px}

/* section intros and moves columns */
.compare__intro,.moves__intro{margin:0 0 20px}
.hero--catalog{padding-bottom:24px}
.section--catalog{padding-top:16px}
@media (min-width:1025px){.moves__table tbody th,.moves__dir,.moves__when{white-space:nowrap}}

/* placeholder tile while a service mark is missing from shared/services/ */
.app-logo--missing{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;background:var(--line,#e9e7e4);color:var(--muted,#5f6673);font-family:var(--font-text,sans-serif);font-size:11px;font-weight:600;line-height:1;letter-spacing:.02em}
.pair--lg .app-logo--missing{width:38px;height:38px;font-size:15px}

/* legal */
.legal{max-width:760px}
.legal h2{margin:32px 0 10px}
.legal__box{margin-top:18px}

/* safety nets on contract classes: list reset for <ol class="steps">, scroll for the moves table */
ol.steps{list-style:none;margin:0;padding:0}
.moves{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:1024px){
  .hero__grid,.how,.plan,.describe{grid-template-columns:minmax(0,1fr)}
  .trust__cta{justify-self:start}
}
@media (max-width:820px){
  .compare .compare__row{grid-template-columns:minmax(0,1fr);min-width:0;gap:0;padding:8px 0}
  .compare .compare__row--head{display:none}
  .compare .compare__cell{padding:4px 16px}
  .compare .compare__cell[data-col]::before{content:attr(data-col) ": ";font-weight:600;color:var(--muted,#5f6673)}
  .compare .compare__cell--us[data-col]::before{color:var(--terra,#c2410c)}
  .catalog__describe{grid-template-columns:auto minmax(0,1fr)}
  .catalog__describe .btn{grid-column:2;justify-self:start}
}
@media (max-width:560px){
  .catalog__card{grid-template-columns:auto minmax(0,1fr)}
  .catalog__side{grid-column:2;flex-direction:row;justify-content:space-between;align-items:baseline;text-align:left}
  .hero__item{grid-template-columns:auto minmax(0,1fr)}
  .hero__item-text{grid-column:1/-1}
  .hero__item-price{grid-column:2;grid-row:1;justify-self:end}
  .footer__inner{flex-direction:column;align-items:flex-start}
}