/* ══════════════════════════════════════════════════════════════════════
   TAVVLO HOME — platform showcase (Attio homepage section 3)

   Ported from the section after the logo wall in
   attio-recreation/dist/index.html: a 24-column heading band, then a
   two-up body where a sticky feature nav holds the left six columns and
   five articles scroll past on the right. Below lg the nav becomes a
   horizontal pill scroller pinned under the header.

   Metrics, spacing and the type ramp are the source's, resolved from its
   Tailwind utilities. Scoped under #tvah-platform with a tvahp- prefix so
   nothing reaches the Webflow stylesheet driving the rest of the page.
   ══════════════════════════════════════════════════════════════════════ */

#tvah-platform{
  --tvahp-white-100:#fff;
  --tvahp-white-300:#f3f4f6;   /* surface-subtle */
  --tvahp-white-500:#e4e7ec;   /* subtle-stroke */
  --tvahp-white-700:#d3d8df;   /* disabled-foreground */
  --tvahp-white-800:#cad0d9;   /* the dot grid */
  --tvahp-black-700:#6f7988;   /* accent-foreground, nav hover */
  --tvahp-blue-100:#e8f0ff;
  --tvahp-blue-400:#709ff5;    /* accent-stroke */
  --tvahp-blue-600:#245bc2;

  --tvahp-secondary-background:#fafafb;
  --tvahp-primary-foreground:#1c1d1f;
  --tvahp-tertiary-foreground:#505967;

  --tvahp-ease-out:cubic-bezier(0,0,0,1);
  --tvahp-ease-out-cubic:cubic-bezier(.33,1,.68,1);
  --tvahp-shadow-2:0px 1px 3px 0px rgba(0,0,0,.012), 0px 2px 4px -1px rgba(0,0,0,.02);

  /* What a sticky offset here has to clear.
     The source pins this nav under --site-header-height because its site
     header is fixed and never leaves. This site's header is
     position:absolute and scrolls away entirely, so there is nothing to
     tuck under: pinning at the header height would float the nav 115px down
     with article text sliding through the empty band above it. Nothing
     stays pinned on this site, so the offset is zero. */
  --tvahp-pin:0px;

  display:block;
  background-color:var(--tvahp-secondary-background);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#tvah-platform *,#tvah-platform *::before,#tvah-platform *::after{box-sizing:border-box}
#tvah-platform h2,#tvah-platform h3,#tvah-platform p,#tvah-platform ol,#tvah-platform li{margin:0;padding:0}
#tvah-platform ol{list-style:none}
#tvah-platform a{color:inherit;text-decoration:none}

/* ── container ─────────────────────────────────────────────────────
   As in the logo wall: display:contents below lg, so the width cap and
   gutters only exist from 992px up. */
#tvah-platform .tvahp-container{display:contents}
@media (min-width:992px){
  #tvah-platform .tvahp-container{
    display:flex;flex-direction:column;width:100%;
    max-width:1440px;padding-inline:24px;margin-inline:auto;
  }
}
#tvah-platform .tvahp-frame{
  display:flex;width:100%;flex-direction:column;
}
@media (min-width:992px){
  #tvah-platform .tvahp-frame{
    border-left:1px solid var(--tvahp-white-500);
    border-right:1px solid var(--tvahp-white-500);
  }
}

/* ── heading band ──────────────────────────────────────────────────
   24 columns; the copy sits in 3/-3, widening to 2/-2 from lg. */
#tvah-platform .tvahp-head{
  position:relative;
  display:grid;
  grid-template-columns:repeat(24,minmax(0,1fr));
  padding-top:88px;
  padding-bottom:64px;
  border-bottom:1px solid var(--tvahp-white-500);
}
@media (min-width:992px){
  #tvah-platform .tvahp-head{padding-top:112px;padding-bottom:72px}
}
@media (min-width:1200px){
  #tvah-platform .tvahp-head{padding-top:152px;padding-bottom:80px}
}
#tvah-platform .tvahp-head-inner{
  grid-column:3 / -3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
}
@media (min-width:992px){
  #tvah-platform .tvahp-head-inner{grid-column:2 / -2}
}
#tvah-platform .tvahp-tag{
  display:inline-flex;
  height:24px;
  align-items:center;
  border-radius:8px;
  padding-inline:6px;
  background-color:var(--tvahp-blue-100);
  color:var(--tvahp-blue-600);
  font-weight:500;
  font-size:14px;
  line-height:20px;
  letter-spacing:-.14px;
}
/* Title and subtitle are one heading: the second half simply takes the
   muted colour, which is what gives the band its single-block reading. */
#tvah-platform .tvahp-title{
  max-width:896px;
  text-wrap:balance;
  font-weight:500;
  font-size:2rem;
  line-height:2.25rem;
  letter-spacing:-.01em;
  color:var(--tvahp-primary-foreground);
}
@media (min-width:992px){
  #tvah-platform .tvahp-title{font-size:2.5rem;line-height:2.75rem}
}
#tvah-platform .tvahp-title .tvahp-sub{color:var(--tvahp-black-700)}
#tvah-platform .tvahp-title br{display:none}
@media (min-width:768px){ #tvah-platform .tvahp-title br{display:block} }

/* ── body: sticky nav + articles ───────────────────────────────── */
@media (min-width:992px){
  #tvah-platform .tvahp-body{
    display:grid;
    grid-template-columns:repeat(24,minmax(0,1fr));
  }
}

#tvah-platform .tvahp-nav{
  position:sticky;
  top:var(--tvahp-pin);
  z-index:30;
  margin-bottom:-1px;
  border-bottom:1px solid var(--tvahp-white-500);
  background-color:var(--tvahp-secondary-background);
  box-shadow:var(--tvahp-shadow-2);
}
@media (min-width:992px){
  #tvah-platform .tvahp-nav{
    grid-column:1 / 7;
    /* The nav's own six columns stand in for the source's subgrid: the
       parent tracks are equal fractions, so an inner 6-column grid lands
       on exactly the same lines. */
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    height:calc(100vh - var(--tvahp-pin));
    margin-bottom:0;
    padding-top:80px;
    border-right:1px solid var(--tvahp-white-500);
    border-bottom:0;
    box-shadow:none;
  }
}
@media (min-width:1200px){ #tvah-platform .tvahp-nav{padding-top:112px} }

/* mobile: horizontal pill scroller with fade edges */
#tvah-platform .tvahp-nav-m{position:relative}
@media (min-width:992px){ #tvah-platform .tvahp-nav-m{display:none} }
#tvah-platform .tvahp-scroll{
  overflow-x:auto;
  scrollbar-width:none;
}
#tvah-platform .tvahp-scroll::-webkit-scrollbar{display:none}
#tvah-platform .tvahp-nav-m ol{
  display:flex;
  width:max-content;
  min-width:100%;
  align-items:stretch;
  gap:1px;
  background-color:var(--tvahp-white-500);
}
#tvah-platform .tvahp-nav-m li{flex:1 1 0}
#tvah-platform .tvahp-nav-m a{
  display:flex;
  height:100%;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:16px 20px;
  font-size:.875rem;
  line-height:1.25rem;
  font-weight:500;
  letter-spacing:-.005em;
  background-color:var(--tvahp-secondary-background);
  color:var(--tvahp-tertiary-foreground);
  transition:background-color .2s var(--tvahp-ease-out), color .2s var(--tvahp-ease-out);
}
#tvah-platform .tvahp-nav-m a:hover{
  background-color:var(--tvahp-white-300);
  color:var(--tvahp-primary-foreground);
}
#tvah-platform .tvahp-nav-m a[aria-current="location"]{
  background-color:var(--tvahp-white-300);
  color:var(--tvahp-primary-foreground);
}
#tvah-platform .tvahp-fade{
  pointer-events:none;
  position:absolute;
  inset-block:0;
  width:48px;
  opacity:0;
  transition:opacity .2s;
}
#tvah-platform .tvahp-fade.is-left{
  left:0;
  background-image:linear-gradient(to right,var(--tvahp-secondary-background),transparent);
}
#tvah-platform .tvahp-fade.is-right{
  right:0;
  background-image:linear-gradient(to left,var(--tvahp-secondary-background),transparent);
}
#tvah-platform .tvahp-fade.is-on{opacity:1}

/* desktop: vertical list with a rule marking the active item */
#tvah-platform .tvahp-nav-d{display:none}
@media (min-width:992px){
  #tvah-platform .tvahp-nav-d{
    display:flex;
    grid-column:2 / -1;
    flex-direction:column;
    gap:8px;
  }
}
#tvah-platform .tvahp-nav-d a{
  position:relative;
  display:block;
  padding:4px 16px 4px 28px;
  font-weight:500;
  font-size:15px;
  line-height:1.2;
}
@media (min-width:768px){
  #tvah-platform .tvahp-nav-d a{padding-right:20px;padding-left:32px}
}
@media (min-width:992px){
  #tvah-platform .tvahp-nav-d a{padding-left:0;font-size:18px}
}
/* The marker sits a fifth of the column to the left, which lands it on the
   nav's own left border rather than beside the text. */
#tvah-platform .tvahp-nav-d .tvahp-marker{
  position:absolute;
  inset-block:0;
  left:-1px;
  width:2px;
  background-color:var(--tvahp-blue-400);
  opacity:0;
}
@media (min-width:992px){
  #tvah-platform .tvahp-nav-d .tvahp-marker{left:calc(-20% - 1px)}
}
#tvah-platform .tvahp-nav-d a[aria-current="location"] .tvahp-marker{opacity:1}
#tvah-platform .tvahp-nav-d a span:last-child{
  color:var(--tvahp-white-700);
  transition:color 320ms var(--tvahp-ease-out-cubic);
}
#tvah-platform .tvahp-nav-d a:hover span:last-child{color:var(--tvahp-black-700)}
#tvah-platform .tvahp-nav-d a[aria-current="location"] span:last-child{
  color:var(--tvahp-primary-foreground);
}
@media (prefers-reduced-motion:reduce){
  #tvah-platform .tvahp-nav-d a span:last-child{transition:none}
}

/* ── articles ──────────────────────────────────────────────────── */
@media (min-width:992px){
  #tvah-platform .tvahp-articles{grid-column:7 / -1}
}
#tvah-platform .tvahp-article{
  border-bottom:1px solid var(--tvahp-white-500);
  /* Clears the pill bar that overlays the article top below lg. */
  scroll-margin-top:calc(var(--tvahp-pin) + 88px);
}
@media (min-width:992px){
  #tvah-platform .tvahp-article{scroll-margin-top:var(--tvahp-pin)}
}
#tvah-platform .tvahp-article:last-child{border-bottom:0}
#tvah-platform .tvahp-article-head{
  padding-inline:calc(100% / 24);
  padding-top:64px;
  padding-bottom:44px;
}
@media (min-width:992px){
  #tvah-platform .tvahp-article-head{
    padding-inline:calc(100% / 18);
    padding-top:80px;
    padding-bottom:56px;
  }
}
@media (min-width:1200px){
  #tvah-platform .tvahp-article-head{padding-top:112px;padding-bottom:80px}
}
#tvah-platform .tvahp-article h3{
  max-width:560px;
  text-wrap:balance;
  font-weight:500;
  font-size:1.5rem;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--tvahp-primary-foreground);
}
#tvah-platform .tvahp-article h3 span{color:var(--tvahp-black-700)}

/* ── article visual ────────────────────────────────────────────────
   The source's default panel: a flat ground carrying a dot grid, at half
   height below lg. The five product mockups that sit on top of it in the
   source are not ported — see the note in index.html. */
#tvah-platform .tvahp-visual{
  user-select:none;
  -webkit-user-select:none;
  border-top:1px solid var(--tvahp-white-500);
}
#tvah-platform .tvahp-panel{
  position:relative;
  height:327px;
  width:100%;
  overflow:hidden;
  background-color:var(--tvahp-white-300);
  color:var(--tvahp-white-800);
}
@media (min-width:992px){ #tvah-platform .tvahp-panel{height:654px} }
#tvah-platform .tvahp-dots{position:absolute;inset:0;width:100%;height:100%}
#tvah-platform .tvahp-dots.is-lg{display:none}
@media (min-width:992px){
  #tvah-platform .tvahp-dots.is-sm{display:none}
  #tvah-platform .tvahp-dots.is-lg{display:block}
}