/* Problems section (replaces the Fragment contact hero that used to sit here).
   Three columns: a social story card on the left, the statement in the middle, the
   six problems listed on the right.
   Type follows the site system: Funnel Display for the heading, Geist for body. */

.fpr-section{background-color:#0A0A0A;position:relative;overflow:hidden}
.fpr-section .padding-section-v{padding-top:7em;padding-bottom:7em}
.fpr-layout{grid-column-gap:5em;grid-row-gap:4em;grid-template-columns:.95fr 1.22fr 1fr;align-items:end;display:grid}

/* --- section header ---
   Small left-aligned section marker + full-width hairline: the exact type spec of
   the .fodl-system section's title (.fsys-title — Funnel Display 800, 1.575rem,
   uppercase), so the two section markers read as one system.
   The title sits in a .section-desc-box so the site's SplitText line reveal picks
   it up; the hairline is scaleX-drawn by a small script at the end of index.html. */
.fpr-header{margin-bottom:4.5em}
.fpr-title{color:#dcdcdc;text-align:left;font-family:"Funnel Display",sans-serif;font-size:1.575rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-transform:uppercase;margin:0}
.fpr-rule{background-color:#dcdcdc80;height:1px;margin-top:1.5em;transform-origin:0 50%}

/* --- story card ---
   Ported 1:1 from hashtag-template.webflow.io's story component: a rounded card
   (aspect 2/3.4) with the image filling it, progress bars at 1.5%, author row at 4%
   and the action bar at 3% from the bottom — no device bezel, that template has none.
   The two icon rows are their own SVGs (three-dots + close, and the Send Message bar
   with heart/send), copied into images/ as hashtag-story-icons-top/bottom.svg. */
.fpr-story{aspect-ratio:2/3.4;border-radius:1.5rem;width:100%;max-width:21rem;flex-flow:column;justify-content:flex-start;align-items:center;display:flex;position:relative;overflow:clip}
.fpr-story-media{object-fit:cover;width:100%;height:100%;display:block}
.fpr-story-media.is-2{opacity:0;position:absolute;inset:0}
.fpr-progress{z-index:4;grid-column-gap:2%;grid-template-columns:1fr 1fr;width:90%;display:grid;position:absolute;top:1.5%}
.fpr-bar{background-color:#ffffff45;border-radius:10px;width:100%;height:2px;overflow:hidden}
.fpr-bar-line{background-color:#fff;border-radius:10px;width:0%;height:100%}
.fpr-top{z-index:4;justify-content:space-between;align-items:center;width:90%;display:flex;position:absolute;top:4%}
.fpr-author{grid-column-gap:.6rem;align-items:center;display:flex}
.fpr-avatar{aspect-ratio:1;object-fit:cover;border-radius:50%;width:2.1rem}
.fpr-author-name{color:#fff;font-family:Geist,sans-serif;font-size:.95rem;font-weight:500;letter-spacing:-.01em}
.fpr-options{width:2.9rem;position:relative;top:-.25rem}
.fpr-actions{z-index:4;width:90%;position:absolute;bottom:3%}

/* --- centre copy ---
   Heading and sub sit in separate .section-desc-box wrappers so the site's SplitText
   line reveal treats them as two blocks. That script clones the element per line, so
   any margin on .fpr-heading/.fpr-sub would repeat on every line — the gap between the
   two blocks lives on the flex container instead. */
.fpr-copy{grid-row-gap:1.5em;flex-flow:column;align-items:flex-start;display:flex}
/* compact bracket label, same treatment as the fodl-way tag (fodl-way.css) —
   sits top-right of the list column, like the studio section's [ the studio ] */
.fpr-tag .labels-block{justify-content:flex-end;grid-column-gap:.55em;grid-row-gap:.55em;font-size:.85rem;padding-bottom:0}
.fpr-tag .label-text{color:#eeb603}
.fpr-side{grid-row-gap:2rem;flex-flow:column;justify-content:space-between;width:100%;display:flex}
.fpr-copy .section-text-box{grid-row-gap:1.4em;flex-flow:column;display:flex}
.fpr-heading{color:#dcdcdc;font-family:"Funnel Display",sans-serif;font-size:clamp(1.9rem,2.75vw,2.6rem);font-weight:800;line-height:1.08;letter-spacing:-.04em;text-transform:none;margin:0}
.fpr-sub{color:#dcdcdccc;font-family:Geist,sans-serif;font-size:1rem;font-weight:500;line-height:1.7;letter-spacing:-.03em;margin:0}

/* --- problem list ---
   The dark cta-link component from fragment-marketing-landing-pages.webflow.io
   /ui-kit/ctas (second CTA section), mapped to our theme — their idle red is our
   yellow: right-aligned text-only rows over accent hairlines, uniform padding.
   Hover springs the padding open (their cubic-bezier + timings verbatim), flips
   text and hairline to white and shows the 2em arrow at the right edge — a
   background-image exactly like the original (it can't transition; the padding
   motion carries the reveal). Pure CSS, no JS, same as the source. */
.fpr-list{flex-flow:column;display:flex}
.fpr-item{border-bottom:1px solid #eeb60359;justify-content:flex-end;text-align:right;padding:1.35rem 0;display:flex;
  transition:border-color .2s,color .2s,padding .6s cubic-bezier(.075,.82,.165,1)}
.fpr-item:first-child{padding-top:0}
.fpr-item:first-child:hover{padding-top:.65rem}
.fpr-item:hover{border-bottom-color:#fff;padding:2rem 2.75rem 2rem 0;
  background:url("/images/cta-arrow-white.svg") no-repeat 100% 50%/2em}
.fpr-item-text{color:#EEB603;font-family:Geist,sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:-.02em;line-height:1.4;transition:color .2s}
.fpr-item:hover .fpr-item-text{color:#fff}
@media (prefers-reduced-motion: reduce){
.fpr-item,.fpr-item-text{transition:none}
}

/* --- comment cards ---
   The comp's Instagram-comment "testimonials" under the sub copy: dark rounded
   cards, avatar + handle/timestamp + comment + Reply, outline heart with a count
   on the right. Entrance (stagger rise) lives in the inline script. */
.fpr-comments{grid-row-gap:.9rem;flex-flow:column;width:100%;max-width:30rem;display:flex}
.fpr-comment{grid-column-gap:.85rem;background-color:#151515;border-radius:.9rem;align-items:flex-start;text-align:left;padding:1rem 1.1rem;display:flex}
.fpr-comment-avatar{aspect-ratio:1;object-fit:cover;border-radius:50%;flex:none;width:2.4rem}
.fpr-comment-body{flex:1;grid-row-gap:.3rem;flex-flow:column;align-items:flex-start;display:flex}
.fpr-comment-head{grid-column-gap:.55rem;align-items:baseline;display:flex}
.fpr-comment-user{color:#fff;font-family:Geist,sans-serif;font-size:.92rem;font-weight:600;letter-spacing:-.01em}
.fpr-comment-time{color:#dcdcdc80;font-family:Geist,sans-serif;font-size:.8rem;font-weight:500}
.fpr-comment-text{color:#dcdcdcd9;font-family:Geist,sans-serif;font-size:.92rem;font-weight:500;line-height:1.45;letter-spacing:-.015em;margin:0}
.fpr-comment-reply{color:#dcdcdc73;font-family:Geist,sans-serif;font-size:.8rem;font-weight:600;margin-top:.15rem}
.fpr-comment-like{flex:none;grid-row-gap:.2rem;flex-flow:column;align-items:center;padding-top:.15rem;display:flex}
.fpr-comment-heart{color:#dcdcdc;width:1.15rem;height:1.15rem;display:block}
.fpr-comment-count{color:#dcdcdc99;font-family:Geist,sans-serif;font-size:.72rem;font-weight:500}

/* --- equal columns (comp) ---
   Desktop only: the story card gives up its fixed aspect and stretches to the
   centre column's height — the card and centre read as one equal-height band;
   the list keeps its own height and hangs from the band's bottom edge.
   Below 992px the card goes back to its 2/3.4 aspect (columns stack there). */
@media screen and (min-width:992px){
.fpr-story{aspect-ratio:auto;align-self:stretch;max-width:none;height:100%}
.fpr-side{align-self:stretch}
/* the list keeps its natural row rhythm, anchored to the band's bottom edge —
   spreading it across the full height read as stretched */
}

@media screen and (max-width:991px){
.fpr-header{margin-bottom:3.5em}
/* end-alignment only makes sense while all three columns share one row */
.fpr-layout{grid-column-gap:3em;grid-row-gap:3em;grid-template-columns:1fr 1fr;align-items:center}
.fpr-story{grid-row:span 2;max-width:17rem}
.fpr-heading{font-size:2.3rem}
}
@media screen and (max-width:767px){
.fpr-title{font-size:1.4rem}
.fpr-layout{grid-template-columns:1fr;justify-items:center;text-align:center}
.fpr-story{grid-row:auto;max-width:20rem}
.fpr-list{text-align:right;width:100%}
.fpr-copy{align-items:center}
}