/* The home page. Sizes follow Web-Home.dc.html at 1440 wide and Web-Home-Mobile.dc.html
   at 390 wide, with clamp() carrying the type between them so no width in between breaks. */

.small { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--t2); }
.center { text-align: center; justify-content: center; }
.wide { width: 100%; }

/* Hero. */
.hero { padding-top: 72px; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin: 0; height: 32px; padding: 0 14px 0 8px; border: 1px solid var(--bd); border-radius: 999px; background: var(--sf); font-size: 15px; font-weight: 600; }
.pill svg { width: 20px; height: 20px; padding: 3px; border-radius: 999px; background: var(--acs); color: var(--ac); }
.hero h1 { margin: 28px 0 0; font-size: clamp(46px, 7.4vw, 104px); line-height: 1; letter-spacing: -.012em; max-width: 13em; text-wrap: balance; }
.hero h1 em { display: block; font-style: italic; color: var(--ac); }
.hero__row { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 48px 64px; align-items: start; }
.hero__act { justify-self: end; max-width: 600px; }
.hero__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.hero__btns .link-more { flex-basis: 100%; min-height: 32px; }
/* Two browser buttons sit side by side on a desktop, so each is a little narrower. */
.hero__btns .cta-lg { padding: 0 22px; }
.hero__act .trust { margin-top: 18px; }
.hero__act .only-mobile .trust { margin-top: 14px; }
@media (max-width: 1000px) {
  .hero__row { grid-template-columns: 1fr; }
  .hero__act { justify-self: start; }
}
@media (max-width: 700px) {
  .hero { padding-top: 40px; }
  .hero h1 { margin-top: 20px; }
  .hero__row { margin-top: 24px; gap: 28px; }
  .hero__act { justify-self: stretch; max-width: none; }
  .hero__act .cta { width: 100%; }
  .hero__act .cta-pair { width: 100%; }
}

/* The indigo stage the product sits on, and the browser frame around the captures. */
.band { margin-top: 72px; padding: 56px 0 72px; background: var(--stage); }
@media (max-width: 700px) { .band { margin-top: 48px; padding: 28px 0 32px; } }
.demo { margin-top: 0; margin-bottom: 0; }
.frame { max-width: 1152px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--sf); box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 30px 80px rgba(10,14,60,.45); border: 1px solid rgba(255,255,255,.2); }
.frame__bar { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--rs); border-bottom: 1px solid var(--bd); font-size: 13px; color: var(--t2); }
.frame__dots { display: inline-flex; gap: 6px; }
.frame__dots i { width: 10px; height: 10px; border-radius: 999px; background: var(--bd2); }
.frame__tab { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 8px; background: var(--sf); color: var(--tx); white-space: nowrap; }
.frame__fav { width: 12px; height: 12px; border-radius: 3px; background: #B5542D; }
.frame__url { flex-grow: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--sf); overflow: hidden; white-space: nowrap; }
@media (max-width: 700px) { .frame__tab { display: none; } .frame { border-radius: 12px; } }

/* The two columns keep the captures' own proportions: the page is --pw wide and the
   panel 360, so both columns are exactly as tall as the page capture. */
.frame__body { --pw: 1100; --ph: 700; --pcol: 1100fr; position: relative; display: grid; grid-template-columns: minmax(0, var(--pcol)) minmax(0, 360fr); container-type: inline-size; }
.frame__page, .frame__panel { position: relative; overflow: hidden; }
.frame__page { aspect-ratio: var(--pw) / var(--ph); }
.frame__panel { border-left: 1px solid var(--bd); background: var(--bg); }
.frame__page > img, .frame__panel > picture { position: absolute; inset: 0 0 auto 0; }
.frame__page > img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.frame__panel img { width: 100%; height: auto; }
@media (max-width: 700px) {
  /* On a phone the page capture alone is too small to read, so the frame shows the page
     above a narrower strip of the panel, both still real captures. */
  .frame__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .frame__page { aspect-ratio: auto; height: 100%; min-height: 300px; }
  .frame__page > img { object-position: 0 18%; }
  .pointer { display: none; }
}

/* The loop: 9 seconds, cross-fading real captures, with a pointer drawn on top. Timings
   follow Web-Hero-Motion.dc.html: glide in, pick, lock, fill, copy, hold, reset. */
.demo .f-hover, .demo .f-locked, .demo .f-element, .demo .f-copied { opacity: 0; }
.pointer { position: absolute; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
@media (prefers-reduced-motion: no-preference) {
  .demo .f-hover { animation: d-hover 9s infinite; }
  .demo .f-locked { animation: d-locked 9s infinite; }
  .demo .f-picking { animation: d-picking 9s infinite; }
  .demo .f-element { animation: d-element 9s infinite; }
  .demo .f-copied { animation: d-copied 9s infinite; }
  .demo .pointer { animation: d-pointer 9s infinite; }
  .demo.paused .f-hover, .demo.paused .f-locked, .demo.paused .f-picking, .demo.paused .f-element, .demo.paused .f-copied, .demo.paused .pointer { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  /* The still: the heading locked and the panel filled in. */
  .demo .f-locked, .demo .f-element { opacity: 1; }
  .demo__pause { display: none !important; }
}
@keyframes d-hover { 0%, 13% { opacity: 0 } 15%, 25% { opacity: 1 } 27%, 100% { opacity: 0 } }
@keyframes d-locked { 0%, 24% { opacity: 0 } 26%, 88% { opacity: 1 } 97%, 100% { opacity: 0 } }
@keyframes d-picking { 0%, 28% { opacity: 1 } 31%, 97% { opacity: 0 } 100% { opacity: 1 } }
@keyframes d-element { 0%, 28% { opacity: 0; clip-path: inset(0 0 100% 0) } 29% { opacity: 1; clip-path: inset(0 0 100% 0) } 46% { opacity: 1; clip-path: inset(0 0 0 0) } 63% { opacity: 1 } 64%, 100% { opacity: 0; clip-path: inset(0 0 0 0) } }
@keyframes d-copied { 0%, 63% { opacity: 0 } 64%, 88% { opacity: 1 } 97%, 100% { opacity: 0 } }
/* The pointer's stops come from the captures' own coordinates, written in cqw (hundredths
   of the frame's width) because the frame keeps a fixed shape at every desktop width. */
@keyframes d-pointer {
  0% { opacity: 0; transform: translate(var(--p0x), var(--p0y)); }
  3% { opacity: 1; }
  13%, 53% { opacity: 1; transform: translate(var(--h1x), var(--h1y)); animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
  62%, 88% { opacity: 1; transform: translate(var(--btx), var(--bty)); }
  95%, 100% { opacity: 0; transform: translate(var(--btx), var(--bty)); }
}
.demo__cap { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; color: var(--stage-t2); font-size: 14px; }
.demo__pause { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: transparent; color: var(--stage-tx); font: 600 14px var(--font-ui); cursor: pointer; }
.demo__pause .i-play, .demo__pause .l-play { display: none; }
.demo.paused .demo__pause .i-play, .demo.paused .demo__pause .l-play { display: inline; }
.demo.paused .demo__pause .i-pause, .demo.paused .demo__pause .l-pause { display: none; }

/* Sections. */
.sec { padding-top: 128px; }
@media (max-width: 700px) { .sec { padding-top: 80px; } }
.sec__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
@media (max-width: 1000px) { .sec__head { grid-template-columns: 1fr; align-items: start; } }
.h2 { margin: 16px 0 0; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.h2--sm { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; }

/* How it works. */
.steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.steps li { border-top: 1px solid var(--bd2); padding-top: 28px; }
.steps h3 { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.01em; }
.num { width: 32px; height: 32px; border-radius: 999px; background: var(--ac); color: var(--on); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; }
.steps p { margin: 14px 0 0; color: var(--t2); }
.keys-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; } }

/* What you get: four tabs, each a real panel crop on a tinted stage. */
.tabs-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
@media (max-width: 860px) { .tabs-grid { grid-template-columns: 1fr; gap: 48px; margin-top: 40px; } }
.tab-card__media { height: 440px; border-radius: 18px; border: 1px solid var(--bd); background: linear-gradient(160deg, var(--acs), var(--rs)); overflow: hidden; display: flex; justify-content: center; padding: 36px 24px 0; }
.tab-card__media picture { width: min(360px, 100%); }
.tab-card__media img { width: 100%; border-radius: 12px 12px 0 0; box-shadow: var(--lift); }
@media (max-width: 700px) { .tab-card__media { height: 360px; padding: 24px 16px 0; } }
.tab-card h3 { margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.tag { height: 28px; padding: 0 10px; border-radius: 6px; background: var(--acs); color: var(--ac); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; }
.tab-card p { margin: 10px 0 0; color: var(--t2); }

/* Deeper tools. */
.tools { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1100px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tools { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } }
/* The drawn code sample must not set a phone's page width. */
.tool__art .code { max-width: 100%; overflow: hidden; }
.tool { background: var(--sf); border: 1px solid var(--bd); border-radius: 18px; padding: 20px 20px 24px; }
.tool h3 { margin: 22px 0 0; font-size: 20px; line-height: 1.3; font-weight: 600; }
.tool p { margin: 8px 0 0; color: var(--t2); font-size: 16px; }
.tool__art { height: 140px; border-radius: 12px; background: var(--rs); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; font-size: 12px; }
.code { position: relative; background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; padding: 14px 14px 12px; line-height: 1.75; color: var(--t2); box-shadow: var(--sh); white-space: nowrap; }
.code b { color: var(--ac); font-weight: 500; }
.code__tag { position: absolute; top: -10px; right: 10px; padding: 1px 8px; border-radius: 999px; background: var(--acs); color: var(--ac); font: 600 11px var(--font-ui); }
.live { display: flex; align-items: center; gap: 12px; }
.live__el { font: 700 24px/1 Georgia, serif; color: var(--tx); padding: 8px 10px; outline: 2px solid #3847D6; outline-offset: 2px; }
.live__field { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; background: var(--sf); border: 1px solid var(--bd); }
.live__field small { color: var(--t3); }
.live__field .mono { border: 1px solid var(--ac); border-radius: 6px; padding: 3px 8px; color: var(--tx); }
.live__field em { font-style: normal; font-weight: 600; color: var(--tx); }
.states { display: flex; gap: 10px; }
.states span { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.states small { color: var(--t3); }
.st { padding: 8px 12px; border-radius: 999px; background: #B5542D; color: #FFFFFF; font-weight: 700; font-size: 12px; white-space: nowrap; }
.st--hover { background: #8E3F20; }
.st--focus { background: #8E3F20; outline: 2px solid #1F1B16; outline-offset: 2px; }
@media (max-width: 1280px) { .states span:first-child { display: none; } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: var(--sf); border: 1px solid var(--bd); color: var(--tx); }
.chip i { width: 12px; height: 12px; border-radius: 3px; }
.uses { position: relative; width: 200px; height: 100px; }
.uses .chip { position: absolute; left: 0; top: 0; }
.uses__bar { position: absolute; left: 20px; top: 44px; width: 150px; height: 10px; border-radius: 3px; background: var(--tx); opacity: .85; }
.uses__btn { position: absolute; left: 24px; top: 70px; width: 56px; height: 20px; border-radius: 999px; background: #B5542D; outline: 2px dashed #3847D6; outline-offset: 3px; }
.uses__btn--2 { left: 150px; top: 8px; width: 40px; }
.arrows { display: grid; grid-template-columns: repeat(3, 34px) auto; grid-template-rows: 34px 34px; gap: 6px; align-items: center; }
.ak { width: 34px; height: 34px; border-radius: 8px; background: var(--sf); border: 1px solid var(--bd2); border-bottom-width: 2px; display: inline-flex; align-items: center; justify-content: center; color: var(--tx); font-size: 14px; }
.ak--up { grid-column: 2; grid-row: 1; }
.arrows .ak:nth-child(2) { grid-column: 1; grid-row: 2; }
.arrows .ak:nth-child(3) { grid-column: 2; grid-row: 2; }
.arrows .ak:nth-child(4) { grid-column: 3; grid-row: 2; }
.tree { grid-column: 4; grid-row: 1 / 3; margin-left: 20px; color: var(--t3); line-height: 1.8; }
.tree b { color: var(--ac); font-weight: 600; }
.dropper { display: flex; align-items: center; gap: 16px; }
.loupe { width: 96px; height: 96px; border-radius: 999px; border: 3px solid var(--sf); box-shadow: var(--sh); background: conic-gradient(#B5542D 0 25%, #2F5D50 0 75%, #E2D9CB 0); position: relative; }
.loupe i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #FFFFFF; outline: 1px solid #18181A; }

/* Why it's free. */
.free { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 32px 96px; align-items: start; }
@media (max-width: 1000px) { .free { grid-template-columns: 1fr; } }
.free__h { margin-top: 32px; font-size: clamp(48px, 5.2vw, 72px); }
.picked { position: relative; display: inline-block; padding: 0 6px; outline: 2px solid var(--ac); outline-offset: 2px; }
.picked__label { position: absolute; left: -2px; top: -34px; height: 24px; padding: 0 8px; border-radius: 6px; background: #3847D6; color: #FFFFFF; font-size: 12px; line-height: 24px; }
.lede--lg { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; color: var(--tx); }

/* Tailwind. */
.tw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px 80px; align-items: center; padding: 56px; border-radius: 28px; background: var(--sf); border: 1px solid var(--bd); }
.tw__text .muted { margin: 20px 0 0; }
.checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; font-weight: 500; }
.checks li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.tw__shot { display: flex; justify-content: center; }
.tw__shot picture { width: min(360px, 100%); }
.tw__shot img { width: 100%; border-radius: 14px; border: 1px solid var(--bd); box-shadow: var(--lift); }
@media (max-width: 1000px) { .tw { grid-template-columns: 1fr; padding: 32px 24px; } }
@media (max-width: 700px) { .tw { padding: 28px 20px; border-radius: 20px; } }

/* Before you install. */
.trust-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px 96px; align-items: start; }
@media (max-width: 1100px) { .trust-grid { grid-template-columns: 1fr; } }
.trust__text .muted { margin: 20px 0 0; }
.facts { border: 1px solid var(--bd); border-radius: 20px; overflow: hidden; background: var(--sf); }
.facts table { width: 100%; border-collapse: collapse; font-size: 16px; }
.facts thead th { background: var(--rs); color: var(--t2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-align: left; padding: 16px 24px; }
.facts tbody th, .facts td { padding: 16px 24px; border-top: 1px solid var(--bd); text-align: left; vertical-align: top; }
.facts tbody th { font-weight: 600; width: 36%; }
.facts tbody th code { display: block; margin-top: 2px; font: 400 12px var(--font-mono); color: var(--t3); }
.facts td { color: var(--tx); }
.facts__foot { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 12px 24px; background: var(--acs); border-top: 1px solid var(--bd); }
.facts__foot .trust { font-size: 15px; }
.facts__foot .trust svg { color: var(--ac); }
@media (max-width: 520px) {
  .facts thead th, .facts tbody th, .facts td { padding: 12px 14px; }
  .facts table { font-size: 15px; }
  .facts__foot { padding: 12px 14px; }
}

/* Final call to action. */
.final { margin-top: 128px; padding: 112px 0; background: var(--stage); color: var(--stage-tx); text-align: center; }
.final h2 { margin: 0 auto; max-width: 14em; font-size: clamp(44px, 6vw, 84px); line-height: 1.02; letter-spacing: -.01em; }
.final__lede { margin: 24px auto 0; max-width: 640px; font-size: 19px; line-height: 1.8; color: var(--stage-t2); }
.final .kbd { background: transparent; color: var(--stage-tx); border-color: rgba(255,255,255,.55); }
.final .cta { margin-top: 36px; background: var(--stage-btn); color: var(--stage-btn-tx); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.final__ctas .cta-pair { justify-content: center; }
.final__ctas .cta { margin-top: 36px; }
.final .cta--ghost { background: transparent; color: var(--stage-tx); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.final__trust { margin: 20px 0 0; font-weight: 600; }
.final__small { margin: 10px auto 0; max-width: 360px; color: var(--stage-t2); font-size: 15px; }
@media (max-width: 700px) {
  .final { margin-top: 80px; padding: 72px 0; }
  .final .cta { width: 100%; }
}

/* Install steps. */
.install { padding-bottom: 128px; }
@media (max-width: 700px) { .install { padding-bottom: 80px; } }
.install__card { border: 1px solid var(--bd); border-radius: 24px; background: var(--sf); padding: 48px; transition: box-shadow .4s ease, border-color .4s ease; }
.install.flash .install__card { border-color: var(--ac); box-shadow: 0 0 0 4px var(--acs); }
@media (max-width: 700px) { .install__card { padding: 28px 20px; border-radius: 20px; } }
.install__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; }
.install__head h2 { margin: 0; }
.install__head h2:focus { outline: none; }
.install__head .muted { margin: 0; }
@media (max-width: 860px) { .install__head { grid-template-columns: 1fr; } }
.install__steps { list-style: none; counter-reset: s; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.install__steps li { counter-increment: s; border-top: 1px solid var(--bd2); padding-top: 24px; }
.install__steps h3 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 600; }
.install__steps h3::before { content: counter(s); width: 30px; height: 30px; border-radius: 999px; background: var(--acs); color: var(--ac); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.install__steps p { margin: 12px 0 0; color: var(--t2); }
.install__steps b { color: var(--tx); }
.install__steps code, .install__newer code { font-size: 14px; padding: 1px 6px; border-radius: 5px; background: var(--rs); color: var(--tx); overflow-wrap: anywhere; }
.install__tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 20px; border-radius: 14px; background: var(--rs); }
.install__tabs[hidden] { display: none; }
.install__tabs button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 10px; background: transparent; color: var(--t2); font: 600 16px/1 var(--font-ui); cursor: pointer; }
.install__tabs button[aria-selected="true"] { background: var(--sf); color: var(--tx); box-shadow: var(--sh); }
.install__panel + .install__panel { margin-top: 24px; }
.install__tabs:not([hidden]) ~ .install__panel + .install__panel { margin-top: 0; }
.install__steps--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .install__steps, .install__steps--two { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.install__newer { margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--bd); color: var(--t2); }
.install__newer b { color: var(--tx); }

.nowrap { white-space: nowrap; }