/* Shared responsive layer for the public site, authentication, and application. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{min-width:320px;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid rgba(242,184,75,.7);outline-offset:3px}
.button--header-dashboard{color:var(--brand-deep);background:var(--accent);border-color:var(--accent);box-shadow:0 10px 24px rgba(242,184,75,.24)}
.button--header-dashboard:hover{color:var(--brand-deep);background:#e9ad38;border-color:#e9ad38}
.sidebar-close,.sidebar-backdrop{display:none}

/* Keep the workflow introduction in one clear vertical reading order. */
#features .public-heading--split{max-width:860px;grid-template-columns:1fr;align-items:start;gap:12px}
#features .public-heading--split h2{margin-bottom:0}
#features .public-heading--split>p{max-width:720px;margin:0;line-height:1.9}

/* Connected product workflow */
.workflow-track{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.workflow-track:before{content:"";position:absolute;z-index:0;top:34px;right:12.5%;left:12.5%;height:3px;background:linear-gradient(90deg,#31a88f,#f2b84b 48%,#31a88f);border-radius:999px;box-shadow:0 0 18px rgba(11,125,105,.35)}
.workflow-step{position:relative;z-index:1;min-width:0;padding-inline:9px;display:grid;justify-items:center}
.workflow-step__node{position:relative;width:68px;height:68px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#0b7d69,#0b2f2a);border:7px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #b9d9d1,0 0 0 8px rgba(11,125,105,.08),0 12px 28px rgba(5,44,38,.18)}
.workflow-step__node>span{font-size:1.2rem;font-weight:900}
.workflow-step__node>i{position:absolute;left:-4px;bottom:-4px;width:22px;height:22px;display:grid;place-items:center;color:#173b34;background:var(--accent);border:3px solid #fff;border-radius:50%;font-size:.62rem;font-style:normal;font-weight:900}
.workflow-step__card{width:100%;min-height:245px;margin-top:24px;padding:25px 23px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:linear-gradient(155deg,#fff,#fbfdfc);box-shadow:0 14px 38px rgba(5,44,38,.06);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.workflow-step__card:hover{transform:translateY(-5px);border-color:#b8d5cd;box-shadow:0 20px 48px rgba(5,44,38,.11)}
.workflow-step__card>b{width:max-content;margin-bottom:34px;color:#78908a;font-size:.7rem;letter-spacing:.1em}
.workflow-step__card h3{margin-bottom:9px;font-size:1.08rem}
.workflow-step__card p{margin:0 0 20px;color:var(--muted);font-size:.81rem}
.workflow-step__card small{width:max-content;margin-top:auto;padding:5px 9px;color:var(--success);background:#e8f7f1;border-radius:999px;font-size:.65rem;font-weight:850}

@media(min-width:961px){
  body.app-page{height:100vh;overflow:hidden}
  .app-page .app-shell{height:100vh;min-height:0;overflow:hidden}
  .app-page .sidebar{height:100vh;overflow-y:auto;overscroll-behavior:contain}
  .app-page .main{height:100vh;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .app-page .topbar{position:sticky;top:0;z-index:20}
}

@media(max-width:1180px){
  .app-page .app-shell{grid-template-columns:226px minmax(0,1fr)}
  .app-page .content{padding:30px}
  .public-hero__grid{gap:48px}
}

@media(max-width:1040px){
  .public-hero{padding:78px 0 86px}
  .public-hero__grid{grid-template-columns:1fr;gap:52px}
  .public-hero__content{max-width:800px}
  .reputation-stage{width:min(680px,100%);margin-inline:auto}
  .data-disclosure{gap:42px}
}

@media(max-width:960px){
  body.app-page{width:100%;max-width:100%;overflow-x:hidden}
  .app-page .app-shell,.app-page .main,.app-page .content{width:100%;min-width:0;max-width:100%;overflow-x:hidden}
  .app-page .app-shell{display:block}
  .app-page .content{margin:0;box-sizing:border-box}
  .app-page .content>*,.app-page .hero-panel>div,.app-page .metric-grid>*,.app-page .section-card,.app-page .setup-item>div,.app-page .two-column>*{min-width:0;max-width:100%}
  .app-page .hero-panel h1,.app-page .hero-panel p,.app-page .setup-item strong,.app-page .setup-item p{overflow-wrap:anywhere}
  .app-page.nav-open{overflow:hidden}
  .app-page .sidebar{position:fixed;inset:76px 16px auto;z-index:50;width:auto;max-width:none;height:auto;max-height:calc(100dvh - 92px);padding:18px;display:flex;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;border:1px solid rgba(255,255,255,.1);border-radius:20px;opacity:0;visibility:hidden;transform:translateY(-14px) scale(.985);transform-origin:top center;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;box-shadow:0 28px 80px rgba(4,28,24,.34)}
  .app-page.nav-open .sidebar{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
  .app-page .brand--sidebar{padding:2px 8px 22px 54px}
  .app-page .brand--sidebar .brand__name{display:inline}
  .app-page .brand--sidebar .brand__mark{width:42px;height:42px}
  .app-page .nav-list{display:grid;gap:7px;margin:0;overflow:visible}
  .app-page .nav-item{width:100%;min-height:48px;flex:none;padding:10px 12px}
  .app-page .nav-item__label{gap:11px;font-size:.87rem!important}
  .app-page .nav-item__label i{width:30px;height:30px;font-size:.86rem}
  .app-page .sidebar__footer{display:grid;margin-top:auto}
  .app-page .topbar{position:sticky;top:0;z-index:25;min-height:64px;padding:10px 18px;display:flex}
  .app-page .menu-button{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;color:var(--brand-deep);background:var(--brand-soft);border:1px solid #cfe1dc;border-radius:11px;cursor:pointer;font-size:1.35rem}
  .app-page .sidebar-close{position:absolute;top:16px;left:16px;width:38px;height:38px;display:grid;place-items:center;color:#d7e5e1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer;font-size:1.35rem}
  .app-page .sidebar-backdrop{position:fixed;inset:0;z-index:45;display:block;padding:0;background:rgba(4,28,24,.48);border:0;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;cursor:pointer}
  .app-page.nav-open .sidebar-backdrop{opacity:1;visibility:visible}
  .app-page .content{padding:24px 20px}
  .hero-panel{gap:24px}
  .two-column{grid-template-columns:1fr}
  .review-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:800px){
  .workflow-track{grid-template-columns:1fr;gap:18px}
  .workflow-track:before{display:none}
  .workflow-step:not(:last-child):after{content:"";position:absolute;z-index:0;top:32px;right:31px;bottom:-50px;width:3px;background:linear-gradient(180deg,#31a88f,#f2b84b 52%,#31a88f);border-radius:999px;box-shadow:0 0 18px rgba(11,125,105,.3)}
  .workflow-step{grid-template-columns:64px minmax(0,1fr);align-items:start;justify-items:stretch;padding:0}
  .workflow-step__node{z-index:1;grid-column:1;width:64px;height:64px}
  .workflow-step__card{grid-column:2;min-height:0;margin:0;padding:22px}
  .workflow-step__card>b{margin-bottom:17px}
  .public-section{padding:76px 0}
  .public-heading{margin-bottom:32px}
  .public-heading--split{gap:24px}
  .data-disclosure{grid-template-columns:1fr;gap:38px}
  .public-cta__box{padding:38px;display:grid;align-items:start}
}

@media(max-width:700px){
  .auth-brand{padding:26px 20px}
  .auth-brand__content{margin:44px 0}
  .auth-brand__content h1{font-size:clamp(2.2rem,11vw,3rem)}
  .auth-panel{padding:34px 20px}
  .form-grid{grid-template-columns:1fr}
  .hero-panel{display:grid;padding:25px 21px}
  .progress-ring{width:86px;height:86px;justify-self:start;font-size:1.35rem}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-heading,.page-heading,.reports-heading,.reviews-hero{display:grid;align-items:start}
  .setup-item{grid-template-columns:38px minmax(0,1fr)}
  .setup-item>b,.setup-item>button{grid-column:2;justify-self:start}
  .review-card{grid-template-columns:1fr}
  .report-grid{grid-template-columns:1fr}
  .public-header__inner{gap:12px}
  .public-header__inner>.button{margin-right:auto}
  .public-hero{padding:64px 0 72px}
  .public-hero h1{font-size:clamp(2.55rem,12vw,3.65rem)}
  .hero-actions{align-items:stretch;display:grid;gap:14px}
  .text-link{text-align:center}
  .reputation-stage{padding:4px}
  .reputation-preview{padding:18px}
  .preview-score{flex-wrap:wrap;gap:9px}
  .preview-score em{margin-right:0}
  .review-sample__head{flex-wrap:wrap}
  .ai-reply{grid-template-columns:34px minmax(0,1fr)}
  .ai-reply p{white-space:normal;overflow:visible}
  .ai-ready{grid-column:2;width:max-content}
  .floating-note{position:relative;left:auto;bottom:auto;width:max-content;max-width:100%;margin:14px auto 0;transform:none}
  .public-footer__inner,.public-footer__copy{display:grid;gap:22px}
  .footer-links{align-items:flex-start}
}

@media(max-width:540px){
  input,textarea,select{font-size:16px}
  .app-page .sidebar{inset:70px 10px auto;max-height:calc(100dvh - 80px);padding:16px 14px;border-radius:17px}
  .app-page .brand--sidebar{padding-bottom:18px}
  .app-page .topbar{padding:9px 14px}
  .app-page .topbar .status-badge{display:none}
  .app-page .content{padding:18px 14px 28px}
  .metric-grid,.review-overview,.report-kpis{grid-template-columns:1fr}
  .metric-card,.section-card,.report-card{border-radius:12px}
  .form-actions{display:grid;gap:11px}
  .form-actions .button{width:100%}
  .workflow-step:not(:last-child):after{top:28px;right:27px;bottom:-46px}
  .workflow-step{grid-template-columns:56px minmax(0,1fr)}
  .workflow-step__node{width:56px;height:56px;border-width:6px}
  .workflow-step__card{padding:19px 17px}
  .public-container{width:calc(100% - 28px)}
  .public-header .brand__mark{width:38px;height:38px}
  .public-header .brand__name{display:none}
  .public-header__inner>.button{min-height:40px;padding:7px 11px;font-size:.73rem}
  .public-kicker{font-size:.68rem}
  .public-hero h1{font-size:clamp(2.35rem,13vw,3rem)}
  .public-hero__content>p{font-size:.96rem}
  .trust-row{display:grid;gap:6px}
  .preview-top,.preview-score{align-items:flex-start}
  .preview-score>strong{font-size:2.25rem}
  .mini-stars{width:100%;margin:4px 43px 0 0}
  .public-section{padding:62px 0}
  .public-cta__box{padding:30px 23px}
  .public-footer{padding-top:42px}
  .footer-links{display:grid;gap:12px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
