/* THE PHONE, DESIGNED (Josh, 2026-10-31, the mobile review: "overall we need to use space better in mobile" · "some sections just need,
   in general to be smaller, tighter in mobile"). Phone only: every rule here sits in the one 767px query, and the page names what changes
   in data-eden-mobile, so Studio's Mobile board reads the same thing. Desktop looks as it did. Type is whole Foundation styles only. */
/* "Your agent stays on your system"'s diagrams are a Grid: one column on Desktop (the second place is the phone's only) */
.eo-code-flows{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));grid-auto-flow:row;column-gap:var(--eden-space-0);row-gap:var(--eden-space-0)}
.eo-flow-m{display:none}
@media (max-width:767px){
  .eo-flow-m{display:flex}
  .vg-wall--rows .e-row:nth-child(3){margin-left:-120px;animation-duration:155s}
  /* the header: the hero's own buttons are right below it ("dont need header buttons as its buttons are in hero") */
  .eo-preview-header-buttons{display:none}

  /* the black ⌘ beside "Your design system takes part" ("remove black eden logo in mobile") */
  .eo-sys-mark{display:none}

  /* secondary headlines one style down ("secondary headlines in mobile - should be smaller"): Page title → Heading, Display → Section */
  .eo-h2,.eo-cap-h,.eo-why-h,.eo-up-h,.eo-in-lead{font-family:var(--eden-text-heading-family);font-size:var(--eden-text-heading-size);font-weight:var(--eden-text-heading-weight);line-height:var(--eden-text-heading-line-height, normal);letter-spacing:var(--eden-text-heading-tracking);text-transform:var(--eden-text-heading-case, none)}
  .eo-act-h,.eo-end-h{font-family:var(--eden-text-section-family);font-size:var(--eden-text-section-size);font-weight:var(--eden-text-section-weight);line-height:var(--eden-text-section-line-height, normal);letter-spacing:var(--eden-text-section-tracking);text-transform:var(--eden-text-section-case, none)}

  /* the accordions, smaller ("smaller fonts here on the accordions"): Heading → Title, a tighter row */
  .eo-in-h,.eo-faq-h{font-family:var(--eden-text-title-family);font-size:var(--eden-text-title-size);font-weight:var(--eden-text-title-weight);line-height:var(--eden-text-title-line-height, normal);letter-spacing:var(--eden-text-title-tracking);text-transform:var(--eden-text-title-case, none)}
  .eo-in-q,.eo-faq-q{padding:var(--eden-space-12) var(--eden-space-32) var(--eden-space-12) var(--eden-space-0)}

  /* sections tighter: 48 → 32 top and bottom, 56 → 40 */
  .eo-live,.eo-wide,.eo-msg,.eo-reel,.eo-end{padding-top:var(--eden-space-32);padding-bottom:var(--eden-space-32);gap:var(--eden-space-20)}
  .eo-up{padding-top:var(--eden-space-40);padding-bottom:var(--eden-space-40);gap:var(--eden-space-24)}

  /* "Your agent stays on your system": its two diagrams, side by side to swipe (the second is Plain code, any platform's, whose own
     section steps aside on a phone) — a Studio Grid, Carousel with a peek of the next */
  .eo-code-flows{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 0.08 * var(--eden-space-12)) / 1.08);column-gap:var(--eden-space-12);row-gap:var(--eden-space-12);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:var(--eden-space-0)}
  .eo-code-flows::-webkit-scrollbar{display:none}
  .eo-code-flows > .eo-flow{scroll-snap-align:start;min-width:0}
  .eo-ship{display:none}

  /* the dots under it (filled by app-preview-mobile.js), and Studio, up close's arrows become the same dots ("instead of pagination arrows
     in mobile lets do simple dot carousel indicators") */
  .eo-dots{display:flex;flex-direction:row;gap:var(--eden-space-8);align-items:center;justify-content:center;padding:var(--eden-space-4) var(--eden-space-0)}
  .eo-dots button{appearance:none;margin:0;border:0;padding:0;width:8px;height:8px;border-radius:50%;background:var(--eden-line-strong);cursor:pointer;position:relative;transition:background .25s}
  .eo-dots button::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .eo-dots button.is-on{background:var(--eden-ink)}
  .eo-up-foot .eo-cyc{background:transparent;box-shadow:none;padding:0}
  .eo-up-foot .eo-cyc-b,.eo-up-foot .eo-reel-n{display:none}
  .eo-up-foot .eo-cyc-segs{display:flex!important;gap:var(--eden-space-0)}
  .eo-up-stage{touch-action:pan-y}

  /* the hero's wall keeps moving when it's touched (a tap is a hover on a phone, and hover paused it) */
  .vg-wall--rows:hover .e-row{animation-play-state:running}
  .eo-wh-wall{touch-action:pan-y}

  /* the download bar: past the hero's buttons, Download stays at the bottom, full width (app-preview-mobile.js) */
  .eo-dl-bar.i1-root{position:fixed;left:0;right:0;bottom:0;z-index:70;width:100%;height:calc(56px + env(safe-area-inset-bottom, 0px));box-sizing:border-box;padding:var(--eden-space-0) var(--eden-space-20) env(safe-area-inset-bottom, 0px);border-radius:var(--eden-r-0);transform:translateY(110%);transition:transform .3s cubic-bezier(.3,.7,.2,1)}
  .eo-dl-bar.i1-root.is-on{transform:none}
  html.vgm-on .eo-dl-bar{transform:translateY(110%)}

  /* THE FEATURE MODAL ("more modern. top 1/3 image area - full width. content smaller.... carousel dots to swipe thru them"): the moment
     edge to edge across the top third, the words below in Body sizes, dots at the foot, swipe left and right */
  .vgm-in{padding:0;gap:0}
  .vgm-top{position:absolute;left:0;right:0;top:0;z-index:3;padding:var(--eden-space-12) var(--eden-space-16)}
  .vgm-mark,.vgm-count{display:none}
  .vgm-x{margin-left:auto;width:40px;height:40px;background:rgba(15,16,17,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .vgm-body{display:flex;flex-direction:column;align-items:stretch;gap:0;overflow:hidden;touch-action:pan-y}
  .vgm-stage{order:-1;flex:none;width:100%;height:36svh;min-height:240px;border-radius:0;box-shadow:none;border-bottom:1px solid var(--eden-line)}
  .vgm-words{flex:1;min-height:0;max-width:none;overflow:auto;gap:var(--eden-space-12);padding:var(--eden-space-24) var(--eden-space-20) var(--eden-space-16)}
  .vgm-h{font-family:var(--eden-text-heading-family);font-size:var(--eden-text-heading-size);font-weight:var(--eden-w-medium);line-height:var(--eden-text-heading-line-height);letter-spacing:var(--eden-text-heading-tracking)}
  .vgm-p{font-size:var(--eden-t-15);line-height:1.55}
  .vgm-pts li{font-size:var(--eden-t-14)}
  .vgm-nav{display:none}
  .vgm-dots{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--eden-space-8);padding:var(--eden-space-12) var(--eden-space-20) calc(var(--eden-space-20) + env(safe-area-inset-bottom, 0px))}
  .vgm-dots button{appearance:none;margin:0;border:0;padding:0;width:6px;height:6px;border-radius:50%;background:var(--eden-line-strong);cursor:pointer;position:relative;transition:background .25s,transform .25s}
  .vgm-dots button::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:32px;transform:translate(-50%,-50%)}
  .vgm-dots button.is-on{background:var(--eden-ink);transform:scale(1.3)}
}
@media (min-width:768px){.vgm-dots{display:none}}

/* GET THE APP, COMPACT (Josh, 2026-10-31: "in mobile this part is way too large and tall"): one frame, not two; the steps are short rows */
@media (max-width:767px){
  .eo-get-content{padding:var(--eden-space-0);gap:var(--eden-space-20);background:none;border:0;border-radius:0}
  .eo-get-showcase{row-gap:var(--eden-space-20)}
  .i36{row-gap:var(--eden-space-0)}
  .i37{gap:var(--eden-space-4);padding:var(--eden-space-16) var(--eden-space-0) var(--eden-space-0) var(--eden-space-0)}
  .i38-text{color:var(--eden-ink-3);font-family:var(--eden-text-meta-family);font-size:var(--eden-text-meta-size);font-weight:var(--eden-text-meta-weight);line-height:var(--eden-text-meta-line-height,normal);letter-spacing:var(--eden-text-meta-tracking);text-transform:var(--eden-text-meta-case,none)}
  .i39-text{font-family:var(--eden-text-title-family);font-size:var(--eden-text-title-size);font-weight:var(--eden-text-title-weight);line-height:var(--eden-text-title-line-height,normal);letter-spacing:var(--eden-text-title-tracking);text-transform:var(--eden-text-title-case,none)}
  .eo-get-caption{font-family:var(--eden-text-meta-family);font-size:var(--eden-text-meta-size);font-weight:var(--eden-text-meta-weight);line-height:var(--eden-text-meta-line-height,normal);letter-spacing:var(--eden-text-meta-tracking);text-transform:var(--eden-text-meta-case,none)}
}
/* STUDIOS, SMALLER (Josh, 2026-10-31: "smaller in mobile"): 1.6 cards in view, a square surface, Title and Meta */
@media (max-width:767px){
  .eo-stu-row{grid-auto-columns:calc((100% - 0.6 * var(--eden-space-12)) / 1.6)}
  .eo-stu-surf{height:200px}
  .eo-stu-h{font-family:var(--eden-text-title-family);font-size:var(--eden-text-title-size);font-weight:var(--eden-text-title-weight);line-height:var(--eden-text-title-line-height,normal);letter-spacing:var(--eden-text-title-tracking);text-transform:var(--eden-text-title-case,none)}
  .eo-stu-li{font-family:var(--eden-text-meta-family);font-size:var(--eden-text-meta-size);font-weight:var(--eden-text-meta-weight);line-height:var(--eden-text-meta-line-height,normal);letter-spacing:var(--eden-text-meta-tracking);text-transform:var(--eden-text-meta-case,none)}
}
/* THE FOUNDER'S LETTER IS A BUTTON (Josh: "use a button not a link here"): full width on a phone */
@media (max-width:767px){.eo-why-btn{align-self:stretch;width:auto}}

/* Compact installation guidance on phones; the desktop showcase is unchanged. */
@media(max-width:767px){
.eo-get-visual{display:none}
.eo-get-content{padding:var(--eden-space-0);gap:var(--eden-space-0);background:none;border:0;border-radius:var(--eden-r-0)}
.eo-get-showcase{row-gap:var(--eden-space-0);column-gap:var(--eden-space-0)}
.i36{row-gap:var(--eden-space-0);column-gap:var(--eden-space-0)}
.i37{padding:var(--eden-space-12) var(--eden-space-0);gap:var(--eden-space-4)}
.i38-text{font-family:var(--eden-text-label-family);font-size:var(--eden-text-label-size);font-weight:var(--eden-text-label-weight);line-height:var(--eden-text-label-line-height);letter-spacing:var(--eden-text-label-tracking);text-transform:var(--eden-text-label-case);}
.i39-text{font-family:var(--eden-text-title-family);font-size:var(--eden-text-title-size);font-weight:var(--eden-text-title-weight);line-height:var(--eden-text-title-line-height);letter-spacing:var(--eden-text-title-tracking);text-transform:var(--eden-text-title-case);}
.i40-text{font-family:var(--eden-text-meta-family);font-size:var(--eden-text-meta-size);font-weight:var(--eden-text-meta-weight);line-height:var(--eden-text-meta-line-height);letter-spacing:var(--eden-text-meta-tracking);text-transform:var(--eden-text-meta-case);}
}

/* 2026-11-01 · one section rhythm on a phone: every band 40 above and 40 below, and For designers sits in a card like the cycle's flows */
@media (max-width:767px){
.eo-live{padding:var(--eden-space-40) var(--eden-space-20) var(--eden-space-40) var(--eden-space-20);}
.eo-wide{padding:var(--eden-space-40) var(--eden-space-20) var(--eden-space-40) var(--eden-space-20);}
.eo-msg{padding:var(--eden-space-40) var(--eden-space-20) var(--eden-space-40) var(--eden-space-20);}
.eo-up{padding:var(--eden-space-40) var(--eden-space-20) var(--eden-space-40) var(--eden-space-20);}
.eo-reel{padding:var(--eden-space-40) var(--eden-space-20) var(--eden-space-40) var(--eden-space-20);}
.eo-end{padding:var(--eden-space-40) var(--eden-space-20) var(--eden-space-40) var(--eden-space-20);}
.eo-act{padding:var(--eden-space-40) var(--eden-space-20) var(--eden-space-40) var(--eden-space-20);}
.eo-actp{padding:var(--eden-space-40) var(--eden-space-20) var(--eden-space-40) var(--eden-space-20);}
.eo-act-head{padding:var(--eden-space-0) var(--eden-space-0) var(--eden-space-0) var(--eden-space-0);}
.eo-free-card{padding:var(--eden-space-20) var(--eden-space-20) var(--eden-space-24) var(--eden-space-20);border-radius:var(--eden-r-14);background:var(--eden-surface);}
}