/* Homepage sections ported from the Claude Design source
   "Flotera Homepage.dc.html" (project 3f3bf03d-b138-4ecd-83d5-9334adcb7b69).
   Shared chrome lives in site-header.css / site-components.css / site-brand.css. */
#main *{box-sizing:border-box}
@media(max-width:900px){
  #install .installer-options-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
}
body{margin:0;background:#060708;color:#f2f3f4;font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
#main a{color:#f2f3f4;text-decoration:none}#main a:hover{color:#3ecfe0}
[hidden]{display:none!important}
@keyframes device-orbit{to{transform:rotate(360deg)}}
.ms{font-family:"Material Symbols Outlined";font-weight:300;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24}

/* hover / active states flattened from the source's style-hover attributes */
/* Deploy action: same compact 8px corner family as Open Panel. */
.h-deploy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid #060708;border-radius:8px;background:#060708;color:#f2f3f4;font:600 15px Archivo,system-ui,sans-serif;text-decoration:none;box-shadow:none;transform:none;transition:none}
.h-deploy-btn svg{width:20px;height:20px;flex:0 0 20px;fill:currentColor}
/* Outrank the generic #main link rule; text and rocket must change together. */
:is(#main,#buttons) .h-deploy-btn{color:#f2f3f4;-webkit-text-fill-color:currentColor}
@media(hover:hover){:is(#main,#buttons) .h-dark-btn:hover{background:#3ecfe0;border-color:#3ecfe0;color:#060708}}
:is(#main,#buttons) .h-dark-btn:focus-visible,:is(#main,#buttons) .h-dark-btn:active{background:#3ecfe0;border-color:#3ecfe0;color:#060708;box-shadow:none;transform:none}
.h-dark-btn:focus-visible{outline:2px solid #060708!important;outline-offset:2px}
.h-underline-dark:hover{color:#180a03}
.h-light-btn:hover{background:#3ecfe0;color:#060708}
.h-borderlink:hover{color:#3ecfe0}
.h-copy:hover{background:#14171b;color:#3ecfe0}
.h-replay:hover{color:#f2f3f4}
@media (hover:hover){#pricing .h-final-btn:hover{background:#f4692e!important;color:#060708!important}}
#pricing .h-final-btn:focus-visible,#pricing .h-final-btn:active{background:#f4692e!important;color:#060708!important;outline:2px solid #060708;outline-offset:4px}
.h-final-link:hover{color:#0a2a2f}
/* Preserve the exact 1024 x 1536 sticker and its intentional right-edge peek.
   Phones retain a normal-flow art row below the actions. */
#pricing .home-final-cta [data-robot="peek"]{object-fit:contain}
@media(min-width:901px) and (max-width:1200px){
  #pricing .home-final-cta{padding-right:280px!important}
}

@media(max-width:900px){
  #pricing .home-final-cta{padding:48px 24px 0!important;overflow:visible!important}
  #pricing .home-final-cta [data-robot="peek"]{position:static!important;order:1;align-self:flex-end;height:280px!important;width:auto;max-width:100%;margin:16px -24px 0 0}
  #pricing .home-final-cta .h-final-link{display:inline-flex;align-items:center;min-height:44px}
}

/* Tablets have enough width for a reserved art lane, without an empty row. */
@media(min-width:640px) and (max-width:900px){
  #pricing .home-final-cta{padding:48px 208px 48px 24px!important;min-height:320px}
  #pricing .home-final-cta [data-robot="peek"]{position:absolute!important;margin:0}
}

/* static stand-in for the canvas <image-slot> empty state */
.slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px;background:rgba(127,127,127,.08);color:#f2f3f4;font:13px/1.3 system-ui,-apple-system,sans-serif}
.slot::after{content:"";position:absolute;inset:8px;border:1px dashed currentColor;opacity:.22;pointer-events:none}
.slot svg{opacity:.5}
.slot span{opacity:.75;max-width:34ch}

@media(max-width:900px){[data-rail-col]{display:none!important}[data-tour-grid]{grid-template-columns:minmax(0,1fr)!important}[data-tour-cards]{gap:56px!important}}
@media(prefers-reduced-motion:reduce){:where(html:not([data-ios-motion])) .hero-motion{animation:none!important}}

/* The three hero poses ship at different aspect ratios (deploy is landscape,
   wave/talk portrait). Ground them so the robot does not jump on hover. */
#product img[data-robot]{object-position:center bottom}
/* Match the shared mobile header's 76px box once, then add only the
   intended 20px content inset. Start alignment prevents tall viewports or
   spare grid track space from centering extra space above the eyebrow.
   Do not compensate for Safari chrome or add a second safe-area inset. */
@media(max-width:639px){
  #product .home-hero-grid{padding-top:76px!important;min-height:0!important}
  #product .home-hero-copy{padding-top:20px!important;align-self:start!important}
}
/* Mobile art is width-led, not capped by the desktop 344px stage height.
   Keep room around the rotated silhouette, including its hand and feet. */
@media(max-width:639px){
  #product > div > div:first-child{padding-bottom:24px!important}
  #product > div > div:last-child{height:auto!important;min-height:0!important;padding:16px 24px 32px!important}
  #product [aria-label="Flotera robot"]{height:auto!important;min-height:0!important;aspect-ratio:897 / 1200}
}
/* Inline desktop padding/borders survive auto-fit wrapping unless explicitly
   reset. Stack before the intermediate two-column state can strand a divider. */
@media(max-width:900px){
  .home-trust > div{grid-template-columns:minmax(0,1fr)!important;padding:0 24px!important}
  .home-trust > div > div{min-width:0;padding:24px 0!important;border-right:0!important}
}
/* Keep the longer feature labels inside their existing rail and badges. */
[data-rail] b{min-width:0;font-size:clamp(28px,3vw,40px)!important;overflow-wrap:anywhere}
[data-shot-step] > div > span{max-width:100%;line-height:1.4!important}
[data-tick] > span:last-child{min-width:0;line-height:1.4!important}
/* Approved /design/boxes #edge: continuous ember edge, quiet perimeter.
   Limit the treatment to the five tour enclosures, not their artwork/dividers. */
#how-it-works [data-shot-step]{background:#0e1013;border:1px solid #23272d;border-left:3px solid #f4692e;border-radius:0 12px 12px 0;box-shadow:none;transform:none;opacity:1}
#how-it-works [data-shot-step]:is(:hover,:focus-within,[data-active="true"]){background:#14171b;border-color:#2a7c88;border-left-color:#ff9257;box-shadow:none;transform:none}
#how-it-works [data-tick]:focus-visible{outline:2px solid #3ecfe0;outline-offset:4px}
@media(prefers-reduced-motion:reduce){:where(html:not([data-ios-motion])) #how-it-works [data-rail],:where(html:not([data-ios-motion])) #how-it-works [data-tick] span{transition:none!important}}

/* Native-ratio originals with the approved bottom-left feature overlay. */
.tour-image{position:relative;background:#060708;border-bottom:1px solid #23272d}
.tour-image-label{position:absolute;bottom:0;left:0;pointer-events:none}
.tour-image img{display:block;width:100%;height:auto;object-fit:contain;object-position:center top}
.tour-mobile-nav a:focus-visible{outline:2px solid #3ecfe0;outline-offset:-3px}
.tour-mobile-nav{display:none}
[data-shot-step]{scroll-margin-top:0}
[data-tick]{min-height:44px}
@media(max-width:900px){
 #how-it-works{padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important;--tour-header:76px}
 /* A compact chapter index, not a horizontally scrolling tab strip. */
 .tour-mobile-nav{display:block;position:sticky;top:var(--tour-header);z-index:20;background:#060708;padding:8px 0 0;border-bottom:1px solid #23272d}
 .tour-position{display:flex;justify-content:space-between;gap:8px;font:500 9px/14px 'JetBrains Mono',monospace;letter-spacing:.12em;color:#9298a2}
 .tour-position span{color:#3ecfe0;letter-spacing:.04em}
 .tour-current{font-size:18px;font-weight:700;line-height:25px;letter-spacing:-.025em;color:#f2f3f4;margin:2px 0 6px}
 .tour-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 #main .tour-links a{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:49px;padding:2px 0 7px;white-space:nowrap;text-decoration:none;border-bottom:2px solid #23272d;color:#a3b9bd;transition:color 140ms,border-color 140ms}
 .tour-links a span{font:12px/15px 'JetBrains Mono',monospace;color:#65999f}
 .tour-links a b{font-size:10px;line-height:14px;font-weight:500;letter-spacing:-.015em}
 #main .tour-links a[aria-current="step"]{color:#f2f3f4;border-color:#f4692e;background:none}
 #main .tour-links a[aria-current="step"] span{color:#f4692e}
 #main .tour-links a:active{color:#f4692e}
 [data-shot-step]{scroll-margin-top:calc(var(--tour-header) + var(--tour-nav-height,112px) + 12px - 120px)}
 @media(hover:hover){#main .tour-links a:hover{color:#3ecfe0;border-bottom-color:#3ecfe0}}
 @media(prefers-reduced-motion:reduce){:where(html:not([data-ios-motion])) #main .tour-links a{transition:none}}
 [data-shot-step]>div:last-child{padding:24px 20px 28px!important}
 body.menu-open .tour-mobile-nav{visibility:hidden}
}

/* Static, local Material Symbols Outlined; no font/JS dependency. */
/* Give the longer revenue copy more room without widening other sections. */
.home-trust-grid{max-width:1360px;grid-template-columns:minmax(0,1.12fr) repeat(2,minmax(0,1fr))}
.home-trust-item{min-width:0}
.home-trust-icon{display:block;flex:0 0 34px;width:34px;height:34px;color:#3ecfe0}
.home-trust-copy{display:flex;flex-direction:column;gap:6px;min-width:0}

/* Progressive screenshot inspection, scoped to the five tour frames. */
#how-it-works .tour-image{overflow:hidden}
#how-it-works .tour-image[data-zoom] img{transform-origin:0 0;will-change:transform}
#how-it-works .tour-image-label{z-index:2}
#how-it-works .tour-zoom-hint{position:absolute;top:14px;right:14px;z-index:2;padding:6px 10px;border-radius:6px;background:rgba(6,7,8,.88);border:1px solid #23272d;font:400 12px 'JetBrains Mono',monospace;letter-spacing:.06em;color:#f2f3f4;opacity:0;transition:opacity .2s;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  #how-it-works .tour-image[data-zoom]{cursor:zoom-in}
  #how-it-works .tour-image[data-zoom="on"]{cursor:zoom-out}
  #how-it-works .tour-image[data-zoom]:is(:hover,:focus-visible) .tour-zoom-hint{opacity:1}
}
#how-it-works .tour-image[data-zoom]:focus-visible{outline:2px solid #3ecfe0;outline-offset:-2px}
/* Transformed children paint over an ancestor's inset outline. Keep a ring
   above the image and overlays so keyboard focus remains visible at 2x. */
#how-it-works .tour-image[data-zoom]:focus-visible::after{content:"";position:absolute;inset:0;z-index:3;border:2px solid #3ecfe0;pointer-events:none}