/* Talvemo v5.5: public homepage only. The /templates grid is not changed. */
.site-benefit-strip { background:#f6f8f5; }
.site-benefit-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding-block:30px; gap:0; }
.site-benefit-point { display:flex; align-items:center; gap:14px; padding-inline:22px; border-left:1px solid #d9e2d8; min-width:0; }
.site-benefit-point:first-child { padding-left:0; border-left:0; }
.site-benefit-point:last-child { padding-right:0; }
.site-benefit-icon { display:flex; align-items:center; justify-content:center; width:49px; height:49px; flex:0 0 49px; border-radius:50%; background:#e4efea; color:var(--site-accent-dark); }
.site-benefit-point h2 { font-size:16px; line-height:1.4; font-weight:700; letter-spacing:-.025em; }
.site-benefit-point p { margin-top:5px; font-size:14px; line-height:1.55; color:var(--ui-secondary); }
.site-home-templates { overflow:hidden; background:#fff; padding-block:74px 66px; }
.site-carousel-section-heading h2 { font-size:38px; margin-top:13px; letter-spacing:-1.3px; }
.site-carousel-section-heading > p { max-width:620px; margin:15px auto 0; font-size:17px; line-height:1.7; }
.site-featured-carousel { --carousel-card:clamp(238px,21vw,300px); --carousel-gap:14px; --carousel-heading:66px; margin-top:29px; }
.site-carousel-viewport { position:relative; }
.site-carousel-viewport::before, .site-carousel-viewport::after { content:""; position:absolute; inset-block:0; width:clamp(22px,5vw,76px); z-index:2; pointer-events:none; }
.site-carousel-viewport::before { left:0; background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.site-carousel-viewport::after { right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }
.site-featured-track { display:flex; gap:var(--carousel-gap); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; position:relative; padding:22px calc((100% - var(--carousel-card)) / 2); -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y pinch-zoom; cursor:grab; }
.site-featured-track::-webkit-scrollbar { display:none; }
.site-featured-track:focus-visible { outline:2px solid var(--site-accent); outline-offset:-3px; border-radius:4px; }
.site-featured-track.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.site-featured-track.is-dragging * { cursor:grabbing!important; }
.site-featured-track > .site-carousel-card { flex:0 0 var(--carousel-card); min-width:0; scroll-snap-align:center; scroll-snap-stop:always; }
.site-carousel-card-inner { transform-origin:50% 55%; transition:transform .24s ease,opacity .24s ease; }
[data-carousel-ready] .site-carousel-card:not(.is-centered) .site-carousel-card-inner { transform:scale(.86); }
.site-carousel-card-heading { height:var(--carousel-heading); text-align:center; display:flex; flex-direction:column; justify-content:flex-start; gap:5px; padding:3px 6px 15px; }
.site-carousel-card-heading h3 { font-size:22px; font-weight:680; letter-spacing:-.5px; line-height:1.2; }
.site-carousel-card-heading p { font-size:14px; line-height:1.45; color:var(--ui-secondary); }
.site-carousel-sheet { position:relative; width:100%; aspect-ratio:1142 / 1478; background:white; border:1px solid #d9e2dc; border-radius:3px; box-shadow:0 6px 15px #263d3012; }
.site-carousel-preview { display:block; width:100%; height:100%; text-decoration:none; border-radius:3px; overflow:hidden; cursor:zoom-in; }
.site-carousel-preview img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; }
.site-carousel-card.is-centered .site-carousel-sheet { border-color:#8eb4a5; box-shadow:0 10px 24px #2444381c,0 0 0 4px #edf3ef; }
.site-carousel-zoom { position:absolute; right:10px; top:10px; display:inline-flex; align-items:center; gap:6px; border-radius:5px; background:#fff; border:1px solid var(--site-line); color:var(--site-accent-dark); padding:7px 9px; font-size:13px; font-weight:600; box-shadow:0 2px 8px #193b3310; opacity:0; transition:opacity .15s; }
.site-carousel-card.is-centered .site-carousel-preview:hover .site-carousel-zoom, .site-carousel-preview:focus-visible .site-carousel-zoom { opacity:1; }
.site-carousel-card-action { position:absolute; inset:auto 0 0; padding:30px 15px 15px; border-radius:0 0 3px 3px; background:linear-gradient(0deg,rgba(255,255,255,.96) 50%,rgba(255,255,255,0)); pointer-events:none; }
.site-carousel-card-action .site-button { display:flex; width:100%; min-height:47px; font-size:15px; padding:11px 12px; gap:10px; pointer-events:auto; }
[data-carousel-ready] .site-carousel-card:not(.is-centered) .site-carousel-card-action { visibility:hidden; }
.site-carousel-controls { position:absolute; z-index:3; left:0; right:0; top:calc(50% + var(--carousel-heading) / 2); transform:translateY(-50%); display:flex; align-items:center; justify-content:space-between; padding-inline:clamp(12px,3.2vw,48px); pointer-events:none; }
.site-carousel-arrow { display:flex; align-items:center; justify-content:center; width:52px; height:52px; flex:0 0 52px; border-radius:50%; border:1px solid #a2b1a7; background:#fff; color:var(--site-accent-dark); box-shadow:0 5px 16px #193b3320; padding:0; pointer-events:auto; }
.site-carousel-arrow:hover { background:var(--site-accent); border-color:var(--site-accent); color:#fff; }
.site-carousel-arrow:active { box-shadow:0 2px 6px #193b3320; }
.site-carousel-footer { text-align:center; margin-top:22px; }
.site-carousel-footer > .site-button { min-width:246px; }
@media(min-width:1800px) { .site-featured-carousel { --carousel-card:310px; --carousel-gap:10px; } }
@media(min-width:701px) and (max-width:1200px) {
  .site-benefit-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 0; padding-block:27px; }
  .site-benefit-point:nth-child(3) { border-left:0; padding-left:0; }
  .site-benefit-point:nth-child(2) { padding-right:0; }
  .site-benefit-point h2 { font-size:17px; }
  .site-benefit-point p { font-size:15px; }
}
@media(max-width:700px) {
  .site-benefit-list { grid-template-columns:1fr; padding-block:8px; }
  .site-benefit-point, .site-benefit-point:first-child, .site-benefit-point:last-child { padding:18px 0; border-left:0; border-top:1px solid #dfe7df; gap:16px; }
  .site-benefit-point:first-child { border-top:0; }
  .site-benefit-icon { width:46px; height:46px; flex-basis:46px; }
  .site-benefit-point h2 { font-size:16px; }
  .site-benefit-point p { font-size:14px; margin-top:3px; }
  .site-home-templates { padding-block:51px 48px; }
  .site-carousel-section-heading h2 { font-size:31px; line-height:1.15; letter-spacing:-1px; }
  .site-carousel-section-heading > p { font-size:16px; margin-top:13px; }
  .site-featured-carousel { --carousel-card:min(70vw,340px); --carousel-gap:12px; --carousel-heading:62px; margin-top:17px; }
  .site-featured-track { padding-block:18px; }
  .site-carousel-card-heading h3 { font-size:21px; }
  .site-carousel-card-heading p { font-size:13px; }
  [data-carousel-ready] .site-carousel-card:not(.is-centered) .site-carousel-sheet { opacity:.65; }
  .site-carousel-viewport::before, .site-carousel-viewport::after { width:20px; }
  .site-carousel-controls { padding-inline:10px; }
  .site-carousel-arrow { width:44px; height:44px; flex-basis:44px; }
  .site-carousel-arrow svg { width:20px; height:20px; }
  .site-carousel-card-action { padding:25px 11px 11px; }
  .site-carousel-card-action .site-button { font-size:14px; min-height:44px; padding:9px 8px; gap:7px; }
  .site-carousel-footer { margin-top:21px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-featured-track, .site-carousel-card-inner, .site-carousel-zoom { transition:none!important; scroll-behavior:auto!important; }
}

/* Announces the selected template without visible dots, labels or a counter. */
.site-carousel-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
