/*-----------------------------------------------------------------------------------
	CogniFlow® — /twinflow/ page styles
	About: TwinFlow's product page. Kept in its own file so it's easy to find
	       and safe to expand later without touching shared style.css.
	Author: Tamas Pardy (with Claude)
-----------------------------------------------------------------------------------*/

.status-pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:var(--swatch-var-7096);
	background:rgba(45,50,80,.08);
	padding:7px 14px 7px 10px;
	border-radius:100px;
	margin-bottom:18px;
}
.status-dot{
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--swatch-var-7096);
}

.dfmini-hero-media{
	padding:24px;
	border-radius:24px;
	background:linear-gradient(150deg, rgba(45,50,80,.06) 0%, rgba(66,71,105,.12) 100%);
}
/* Round 5: this is now a Bootstrap carousel (TwinFlow photo <-> water-in-oil
   video, 10s auto-rotate) rather than a single static image. Each slide is
   centered the same way the old single image was. */
.dfmini-hero-media .carousel-item{
	min-height:340px;
}
/* Center content only for the states Bootstrap itself renders as visible
   (display:block) — matching those selectors rather than overriding
   .carousel-item's own display keeps Bootstrap's show/hide + slide
   transition working normally. */
.dfmini-hero-media .carousel-item.active,
.dfmini-hero-media .carousel-item-next,
.dfmini-hero-media .carousel-item-prev{
	display:flex;
	align-items:center;
	justify-content:center;
}
.dfmini-hero-media img,
.dfmini-hero-media video{
	max-width:100%;
	max-height:340px;
	width:auto;
	height:auto;
	object-fit:contain;
	border-radius:12px;
}

.coming-soon-note{
	display:flex;
	flex-direction:column;
	gap:10px;
	align-items:flex-start;
	background:rgba(45,50,80,.05);
	border:1px dashed rgba(45,50,80,.25);
	border-radius:16px;
	padding:20px 24px;
	margin-top:8px;
}
.coming-soon-note p{
	margin:0;
	color:rgba(0,0,0,.6);
}

.status-pill-soon{
	color:var(--swatch-var-4279);
	background:rgba(45,50,80,.85);
}
.status-pill-soon .status-dot{
	background:var(--swatch-var-4279);
}

/* ---- Comparison cards ---- */
.compare-card{
	display:flex;
	flex-direction:column;
	background:var(--swatch-var-4279);
	border-radius:20px;
	padding:36px 32px;
	box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.compare-card-highlight{
	background:linear-gradient(150deg, rgba(45,50,80,.06) 0%, rgba(66,71,105,.1) 100%);
	border:1px solid rgba(45,50,80,.12);
}
.compare-subhead{
	color:rgba(0,0,0,.6);
	font-size:15px;
	line-height:1.5;
}
.compare-feature-list{
	list-style:none;
	margin:0;
	padding:0;
}
.compare-feature-list li{
	position:relative;
	padding-left:28px;
	margin-bottom:12px;
	font-size:14.5px;
	line-height:1.5;
	color:rgba(0,0,0,.75);
}
.compare-feature-list li::before{
	content:"✓";
	position:absolute;
	left:0;
	top:0;
	font-weight:bold;
	color:var(--swatch-var-7096);
}

/* ---- Mini use-case cards ---- */
.dfmini-usecase-card{
	background:var(--swatch-var-4279);
	border-radius:20px;
	padding:28px 26px 30px;
	box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.dfmini-usecase-media{
	border-radius:16px;
	overflow:hidden;
	background:linear-gradient(150deg, rgba(45,50,80,.06) 0%, rgba(66,71,105,.12) 100%);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:14px;
	margin-bottom:16px;
}
.dfmini-usecase-media .ratio{
	width:100%;
	border-radius:8px;
	overflow:hidden;
}
.dfmini-usecase-media video,
.dfmini-usecase-media .ratio img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:8px;
}
.dfmini-usecase-icon{
	margin-bottom:4px;
}

/* ---- Hero feature grid (emoji-illustrated advantages, folded up from the
   old TwinFlow-vs-DF-MINI comparison section) ---- */
.feature-emoji-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}
.feature-emoji-item{
	display:flex;
	gap:12px;
	align-items:flex-start;
}
/* Round 5: swapped the emoji glyphs for subtle line icons in the site's
   navy brand color — emoji didn't fit the visual aesthetic. */
.feature-icon{
	flex:0 0 auto;
	width:26px;
	height:26px;
	color:var(--swatch-var-7096);
	margin-top:2px;
}
.feature-icon svg{
	width:100%;
	height:100%;
	display:block;
}
.feature-emoji-item strong{
	display:block;
	font-size:15px;
	color:var(--swatch-var-458);
	margin-bottom:2px;
}
.feature-emoji-item p{
	margin:0;
	font-size:13.5px;
	line-height:1.45;
	color:rgba(0,0,0,.6);
}
@media (max-width:575px){
	.feature-emoji-grid{grid-template-columns:1fr;}
}

/* ---- Publication cards ---- */
.pub-card{
	display:flex;
	flex-direction:column;
	background:var(--swatch-var-4279);
	border-radius:20px;
	padding:28px 26px 26px;
	box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.pub-visual{
	width:64px;
	height:64px;
	border-radius:14px;
	margin-bottom:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(150deg, rgba(45,50,80,.08) 0%, rgba(66,71,105,.14) 100%);
}
.pub-visual img{
	width:32px;
	height:32px;
}
.pub-year{
	display:inline-block;
	font-size:12px;
	font-weight:bold;
	letter-spacing:.06em;
	color:var(--swatch-var-7096);
	background:rgba(45,50,80,.08);
	padding:5px 12px;
	border-radius:100px;
	margin-bottom:12px;
	width:fit-content;
}
.pub-title{
	font-size:16.5px;
	font-weight:bold;
	line-height:1.35;
	color:var(--swatch-var-458);
	margin-bottom:8px;
}
.pub-meta{
	font-size:13px;
	color:rgba(0,0,0,.5);
	margin-bottom:10px;
}
.pub-summary{
	font-size:14px;
	line-height:1.55;
	color:rgba(0,0,0,.65);
}
.pub-link-btn{
	margin-top:auto;
	align-self:flex-start;
}

@media (max-width:767px){
	.dfmini-hero-media{padding:16px;}
	.dfmini-hero-media img{max-height:240px;}
	.compare-card{padding:28px 22px;}
	.dfmini-usecase-card{padding:24px 20px 26px;}
	.pub-card{padding:24px 20px 22px;}
}

/* ---- New minimal hero screen (screen 1) — mirrors the homepage's #hero
   fill-screen pattern (title/subtitle -> media block that grows to fill
   remaining height -> arrow row), but without an embedded nav row since
   this page keeps its nav in the separate header bloc above. Added Sep
   2026 when the TwinFlow page was split into a dedicated hero + a
   "why TwinFlow" value-prop screen (formerly one combined block). ---- */
/* This page's nav lives in a separate #navigation bloc ABOVE the hero
   (unlike the homepage, where the nav is embedded inside #hero itself),
   so #twinflow-hero starts ~106px further down the page than #hero does.
   That extra offset pushes the arrow row further into the fixed
   cookie-consent banner's footprint than the homepage's flat 110px
   safe-zone accounts for -- confirmed hidden entirely behind the banner
   on first visit, at both desktop and mobile widths. Bumped padding to
   clear it with ~40px to spare in both cases (mobile needs much more
   because the cookie text wraps to 3-4 lines on narrow screens, making
   that banner ~190px tall vs ~72px on desktop). Sep 2026. */
#twinflow-hero.bloc-fill-screen{
	padding-bottom:220px;
}
@media (max-width:767px){
	#twinflow-hero.bloc-fill-screen{
		padding-bottom:340px;
	}
}
#twinflow-hero.bloc-fill-screen > .hero-title-wrap{
	flex-grow:0;
	margin-top:6vh;
}
#twinflow-hero.bloc-fill-screen > .hero-media-wrap{
	flex-grow:1;
	display:flex;
	flex-direction:column;
	min-height:0;
	margin-top:5vh;
}
#twinflow-hero .hero-img-row{
	flex:1 1 0%;
	min-height:0;
	position:relative;
}
#twinflow-hero .hero-img-col{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
}
#twinflow-hero .hero-img-col picture{
	height:100%;
	max-width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
#twinflow-hero .hero-img-col img{
	height:100%;
	width:auto;
	max-width:100%;
	object-fit:contain;
}
#twinflow-hero .hero-arrow-row{
	flex:0 0 auto;
	padding-top:12px;
}