/* «تشطيبات ميثاق» landing page (/finishing/) — Mithaq navy/gold on the storefront light/dark tokens. */
.sfin{--f-accent:var(--salyss-store-accent,#d2b477);--f-on-accent:var(--salyss-store-on-accent,#17120a);--f-bg:var(--salyss-store-bg,#06111d);--f-surface:var(--salyss-store-surface,#0b1a29);--f-surface-alt:var(--salyss-store-surface-alt,#112536);--f-text:var(--salyss-store-text,#f7f2e8);--f-muted:var(--salyss-store-muted,#b4bfca);--f-border:var(--salyss-store-border,#244056);--f-ease:cubic-bezier(.2,.75,.15,1);position:relative;overflow:hidden;color:var(--f-text)}
.sfin a{text-decoration:none}
.sfin img{display:block;width:100%;height:100%;object-fit:cover}
.sfin-wrap{position:relative;width:min(100% - 32px,max(72vw,1180px),1820px);margin-inline:auto}
.sfin-eyebrow{display:inline-block;color:var(--f-accent);font-size:13px;font-weight:850;letter-spacing:.04em}
.sfin mark{background:none;color:var(--f-accent)}
.sfin-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border:1px solid var(--f-accent);border-radius:0;background:var(--f-accent);color:var(--f-on-accent);font-weight:850;transition:transform .3s var(--f-ease),background .3s ease,color .3s ease}
.sfin-btn:hover{transform:translateY(-2px)}
.sfin-btn span{transition:transform .3s var(--f-ease)}
.sfin-btn:hover span{transform:translateX(-5px)}
.sfin-btn.is-ghost{background:transparent;color:var(--f-accent)}
.sfin-btn.is-ghost:hover{background:var(--f-accent);color:var(--f-on-accent)}
.sfin-btn.is-wa{border-color:#25d366;background:#25d366;color:#05210f}
.sfin-btn small{font-size:13px;opacity:.8}
.sfin-link{display:inline-flex;align-items:center;gap:8px;color:var(--f-accent);font-weight:850;border-bottom:1px solid currentColor;padding-bottom:2px}
.sfin-head{display:grid;gap:12px;margin-bottom:clamp(26px,4vw,52px)}
.sfin-head h2{margin:0;font-size:clamp(34px,5vw,68px);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.sfin-head h2 span{color:var(--f-accent)}
.sfin-head p{max-width:58ch;margin:0;color:var(--f-muted);font-size:clamp(15px,1.25vw,18px);line-height:1.9}
.sfin-head--split{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:16px clamp(24px,5vw,80px);padding-bottom:clamp(18px,2.4vw,28px);border-bottom:1px solid var(--f-border)}
.sfin-head--split h2{color:var(--f-accent)}

/* Motion primitives (activated by public-finishing.js adding .is-ready on [data-sfin]) */
.sfin.is-ready [data-fx="up"]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--f-ease) var(--d,0s),transform .9s var(--f-ease) var(--d,0s)}
.sfin.is-ready [data-fx="reveal"]{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--f-ease) var(--d,0s)}
.sfin.is-ready [data-fx="line"]{display:inline-block;opacity:0;transform:translateY(60%);transition:opacity .9s var(--f-ease) var(--d,0s),transform .9s var(--f-ease) var(--d,0s)}
.sfin.is-ready [data-fx].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.sfin.is-ready [data-fx="words"] .w{display:inline-block;opacity:.16;transition:opacity .5s ease}
.sfin.is-ready [data-fx="words"] .w.is-lit{opacity:1}

/* Hero */
.sfin-hero{padding:clamp(28px,4vw,56px) 0 clamp(36px,5vw,72px)}
.sfin-hero__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin-bottom:clamp(20px,3vw,36px)}
.sfin-hero__title{margin:6px 0 0;font-size:clamp(54px,9vw,132px);font-weight:900;line-height:1.25;letter-spacing:-.02em}
.sfin-hero__title em{font-style:normal;color:var(--f-accent)}
.sfin-hero__info{display:flex;gap:clamp(16px,3vw,40px);margin:0;padding:0;list-style:none}
.sfin-hero__info li{display:grid;gap:4px;padding-inline-start:16px;border-inline-start:2px solid var(--f-accent)}
.sfin-hero__info small{color:var(--f-muted);font-size:13px;font-weight:700}
.sfin-hero__info strong{font-size:clamp(16px,1.4vw,20px)}
.sfin-hero__strip{display:grid;grid-template-columns:701fr 399fr 701fr;gap:clamp(8px,.8vw,14px);height:clamp(220px,11.8vw,340px)}
.sfin-hero__tile{position:relative;margin:0;overflow:hidden;border-radius:0;background:var(--f-surface-alt)}
/* Hero slides wipe in like the former studio site: outer tiles from the top, the middle one from the bottom. */
.sfin-hero__tile img{position:absolute;inset:-8% 0;height:116%;z-index:1;clip-path:inset(0 0 100% 0)}
.sfin-hero__tile.is-from-bottom img{clip-path:inset(100% 0 0 0)}
.sfin-hero__tile img.is-on{z-index:2;clip-path:inset(0 0 0 0)}
.sfin-hero__tile img.is-entering{z-index:3;transition:clip-path 1.5s cubic-bezier(.45,0,.55,1)}
.sfin-intro{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);margin-top:clamp(10px,1vw,14px);padding:clamp(28px,4.4vw,64px);overflow:hidden;border:1px solid var(--f-border);border-radius:0;background:var(--f-surface)}
.sfin-intro::before{content:"";position:absolute;inset:0;background:var(--sfin-lines) center/cover no-repeat;opacity:.08;filter:invert(1);pointer-events:none}
.sfin-intro>*{position:relative}
.sfin-intro__about p{margin:0 0 18px;color:var(--f-muted);font-size:clamp(15px,1.2vw,17px);line-height:2}
.sfin-intro__about strong{color:var(--f-accent)}
.sfin-intro__pitch h2{margin:0 0 24px;font-size:clamp(24px,2.6vw,38px);font-weight:800;line-height:1.45}

/* Statement */
.sfin-statement{padding:clamp(48px,7vw,110px) 0}
.sfin-statement__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,84px);align-items:start}
.sfin-statement__lead{margin:0;font-size:clamp(24px,2.9vw,42px);font-weight:700;line-height:1.75}
.sfin-statement__sign{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(24px,3vw,40px);padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--f-border)}
.sfin-statement__sign h3{margin:0;font-size:clamp(18px,1.6vw,22px)}
.sfin-statement__sign h3 span{color:var(--f-accent)}
.sfin-video{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;overflow:hidden;border:0;border-radius:0;background:#000;cursor:pointer}
.sfin-video img{transition:transform 1s var(--f-ease),opacity .4s ease;opacity:.85}
.sfin-video:hover img{transform:scale(1.05);opacity:1}
.sfin-video__play{position:absolute;inset:50% auto auto 50%;display:grid;width:86px;height:86px;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:var(--f-accent)}
.sfin-video__play::before{content:"";position:absolute;inset:-12px;border:1px solid var(--f-accent);border-radius:50%;animation:sfin-pulse 2.2s ease-out infinite}
.sfin-video__play i{width:0;height:0;margin-inline-start:6px;border-block:12px solid transparent;border-inline-start:20px solid var(--f-on-accent)}
[dir=rtl] .sfin-video__play i{transform:scaleX(-1)}
.sfin-showcase{margin:0;cursor:default}
.sfin-showcase img{position:absolute;inset:-8% 0;height:116%;opacity:1}
.sfin-video__label{position:absolute;inset:auto 18px 16px auto;padding:6px 12px;border-radius:0;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:800}
@keyframes sfin-pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.sfin-quote{margin:clamp(18px,2.4vw,28px) 0 0;padding:0 0 0;border:0}
.sfin-quote p{margin:0;color:var(--f-muted);font-size:15px;line-height:2}
.sfin-quote footer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--f-border)}
.sfin-quote footer strong{color:var(--f-accent)}
.sfin-quote footer span{color:var(--f-muted);font-size:13px}

/* Marquee */
.sfin-marquee{overflow:hidden;padding:clamp(16px,2vw,24px) 0;border-block:1px solid var(--f-border);background:var(--f-surface)}
.sfin-marquee__track{display:flex;align-items:center;gap:clamp(20px,3vw,44px);width:max-content;animation:sfin-marquee 38s linear infinite}
.sfin-marquee span{font-size:clamp(28px,4vw,56px);font-weight:900;white-space:nowrap;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--f-accent) 75%,transparent)}
.sfin-marquee span:nth-of-type(3n+2){color:var(--f-accent);-webkit-text-stroke:0}
.sfin-marquee i{color:var(--f-accent);font-style:normal;font-size:22px}
.sfin-marquee:hover .sfin-marquee__track{animation-play-state:paused}
@keyframes sfin-marquee{to{transform:translateX(50%)}}

/* Expertise accordion */
.sfin-expertise{padding:clamp(56px,8vw,120px) 0;background:linear-gradient(180deg,var(--f-surface),var(--f-bg))}
.sfin-acc{border-top:1px solid var(--f-border)}
.sfin-acc__item{border-bottom:1px solid var(--f-border)}
.sfin-acc__head{display:grid;grid-template-columns:70px 1fr 48px;align-items:center;width:100%;padding:clamp(18px,2.4vw,30px) 0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.sfin-acc__num{color:var(--f-muted);font-weight:800}
.sfin-acc__title{font-size:clamp(24px,3.4vw,48px);font-weight:800;transition:color .3s ease,transform .5s var(--f-ease)}
.sfin-acc__head:hover .sfin-acc__title,.sfin-acc__item.is-open .sfin-acc__title{color:var(--f-accent)}
.sfin-acc__head:hover .sfin-acc__title{transform:translateX(-10px)}
.sfin-acc__icon{position:relative;width:44px;height:44px;border:1px solid var(--f-border);border-radius:50%;transition:background .3s ease,border-color .3s ease,transform .5s var(--f-ease)}
.sfin-acc__icon::before,.sfin-acc__icon::after{content:"";position:absolute;inset:50% auto auto 50%;width:14px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.sfin-acc__icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--f-ease)}
.sfin-acc__item.is-open .sfin-acc__icon{background:var(--f-accent);border-color:var(--f-accent);color:var(--f-on-accent);transform:rotate(180deg)}
.sfin-acc__item.is-open .sfin-acc__icon::after{transform:translate(-50%,-50%) rotate(0)}
.sfin-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--f-ease)}
.sfin-acc__item.is-open .sfin-acc__panel{grid-template-rows:1fr}
.sfin-acc__inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,48px);min-height:0;overflow:hidden;padding-inline-start:70px}
.sfin-acc__inner p{margin:0 0 clamp(20px,2.4vw,32px);color:var(--f-muted);font-size:clamp(15px,1.2vw,17px);line-height:2}
.sfin-acc__media{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;height:clamp(180px,20vw,280px);margin-bottom:clamp(20px,2.4vw,32px)}
.sfin-acc__media img{border-radius:0;transform:translateY(30px);opacity:0;transition:transform .9s var(--f-ease) .15s,opacity .9s ease .15s}
.sfin-acc__media img+img{transition-delay:.28s}
.sfin-acc__item.is-open .sfin-acc__media img{transform:none;opacity:1}
.sfin-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,40px)}

/* Why */
.sfin-why{padding:clamp(56px,8vw,120px) 0}
.sfin-why__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}
.sfin-why__list{display:grid;gap:0;margin:0;padding:0;list-style:none;align-content:start}
.sfin-why__list li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--f-border)}
.sfin-why__list li:first-child{border-top:1px solid var(--f-border)}
.sfin-why__list span{color:var(--f-accent);font-size:clamp(20px,2vw,28px);font-weight:900}
.sfin-why__list p{margin:0;font-size:clamp(15px,1.25vw,18px);line-height:1.95}
.sfin-why__side{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.sfin-why__image{grid-column:1/-1;position:relative;height:clamp(220px,24vw,340px);margin:0;overflow:hidden;border-radius:0}
.sfin-why__image img{position:absolute;inset:-10% 0;height:120%}
.sfin-why__stats{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sfin-why__stats>div{display:grid;gap:4px;padding:clamp(18px,2.4vw,28px);border:1px solid var(--f-border);border-radius:0;background:var(--f-surface)}
.sfin-why__stats strong{color:var(--f-accent);font-size:clamp(40px,5vw,68px);font-weight:900;line-height:1}
.sfin-why__stats small{color:var(--f-muted);font-weight:750}
.sfin-why__cta{grid-column:1/-1;display:grid;gap:10px;justify-items:start;padding:clamp(22px,3vw,34px);border-radius:0;background:var(--f-accent);color:var(--f-on-accent)}
.sfin-why__cta h3{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:900}
.sfin-why__cta p{margin:0;opacity:.85;line-height:1.8}
.sfin-why__cta .sfin-btn{border-color:var(--f-on-accent);background:var(--f-on-accent);color:var(--f-accent)}

/* Projects rail */
.sfin-projects{padding:clamp(56px,8vw,120px) 0;background:var(--f-surface)}
.sfin-projects__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:clamp(20px,2.4vw,30px)}
.sfin-filters{display:flex;flex-wrap:wrap;gap:8px}
.sfin-filters button,.sfin-arrows button{min-height:42px;padding:0 18px;border:1px solid var(--f-border);border-radius:0;background:transparent;color:var(--f-muted);font:inherit;font-weight:800;cursor:pointer;transition:all .25s ease}
.sfin-filters button:hover,.sfin-arrows button:hover{border-color:var(--f-accent);color:var(--f-accent)}
.sfin-filters button.is-active{border-color:var(--f-accent);background:var(--f-accent);color:var(--f-on-accent)}
.sfin-arrows{display:flex;gap:8px}
.sfin-arrows button{width:46px;padding:0;font-size:18px}
.sfin-rail{--sfin-gutter:max(calc((100vw - min(100vw - 32px,max(72vw,1180px),1820px))/2 - 8px),16px);display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;padding:4px var(--sfin-gutter) 10px;scroll-padding-inline:var(--sfin-gutter);scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.sfin-rail::-webkit-scrollbar{display:none}
.sfin-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.sfin-rail.is-dragging *{pointer-events:none}
.sfin-card{flex:0 0 clamp(290px,38vw,560px);scroll-snap-align:start;overflow:hidden;border:1px solid var(--f-border);border-radius:0;background:var(--f-bg);transition:opacity .4s ease,transform .4s var(--f-ease)}
.sfin-card[hidden]{display:none}
.sfin-card__media{aspect-ratio:16/10;overflow:hidden}
.sfin-card__media img{transition:transform 1s var(--f-ease)}
.sfin-card:hover .sfin-card__media img{transform:scale(1.05)}
.sfin-card__body{display:grid;gap:12px;padding:clamp(16px,2vw,24px)}
.sfin-card__tags{display:flex;flex-wrap:wrap;gap:6px}
.sfin-card__tags span{padding:4px 10px;border:1px solid color-mix(in srgb,var(--f-accent) 50%,transparent);border-radius:0;color:var(--f-accent);font-size:12px;font-weight:800}
.sfin-card h3{margin:0;font-size:clamp(18px,1.6vw,23px);font-weight:800;line-height:1.5}
.sfin-card dl{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;padding-top:12px;border-top:1px solid var(--f-border)}
.sfin-card dl div{display:grid;gap:2px}
.sfin-card dt{color:var(--f-muted);font-size:12px;font-weight:700}
.sfin-card dd{margin:0;font-size:14px;font-weight:800}

/* Contact */
.sfin-contact{padding:clamp(56px,8vw,110px) 0}
.sfin-contact__box{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(24px,4vw,60px);padding:clamp(28px,5vw,64px);border:1px solid color-mix(in srgb,var(--f-accent) 45%,transparent);border-radius:0;background:radial-gradient(90% 130% at 100% 0%,color-mix(in srgb,var(--f-accent) 16%,transparent),transparent 60%),var(--f-surface)}
.sfin-contact h2{margin:8px 0 12px;font-size:clamp(30px,3.8vw,52px);font-weight:900;line-height:1.2}
.sfin-contact p{margin:0;color:var(--f-muted);line-height:1.9}
.sfin-contact__actions{display:grid;gap:12px;justify-items:stretch}
.sfin-contact__actions .sfin-btn{justify-content:center;min-height:58px;font-size:17px}
.sfin-contact__actions .sfin-link{justify-self:center;margin-top:6px}

/* Video modal */
.sfin-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:16px;background:rgba(3,8,14,.9);backdrop-filter:blur(6px)}
.sfin-modal[hidden]{display:none}
.sfin-modal__frame{width:min(1100px,100%);aspect-ratio:16/9;overflow:hidden;border-radius:0;background:#000}
.sfin-modal__frame iframe{width:100%;height:100%;border:0}
.sfin-modal__close{position:absolute;top:16px;inset-inline-start:16px;width:48px;height:48px;border:0;border-radius:50%;background:var(--f-accent);color:var(--f-on-accent);font-size:28px;line-height:1;cursor:pointer}

@media(max-width:1023px){
  .sfin-statement__grid,.sfin-why__grid,.sfin-contact__box{grid-template-columns:1fr}
  .sfin-acc__inner{grid-template-columns:1fr;padding-inline-start:0}
}
@media(max-width:767px){
  .sfin-hero__strip{grid-template-columns:1fr 1fr;height:auto}
  .sfin-hero__tile{height:200px}
  .sfin-hero__tile:first-child{grid-column:1/-1;height:240px}
  .sfin-intro{grid-template-columns:1fr}
  .sfin-head--split{grid-template-columns:1fr}
  .sfin-acc__head{grid-template-columns:44px 1fr 44px}
  .sfin-acc__media{grid-template-columns:1fr 1fr;height:160px}
  .sfin-why__list li{grid-template-columns:44px 1fr}
  .sfin-hero__info{width:100%}
  .sfin-arrows{display:none}
  .sfin-card{flex-basis:84vw}
}
@media(prefers-reduced-motion:reduce){
  .sfin.is-ready [data-fx]{opacity:1;transform:none;clip-path:none;transition:none}
  .sfin.is-ready [data-fx="words"] .w{opacity:1}
  .sfin-marquee__track,.sfin-video__play::before{animation:none}
  .sfin-hero__tile img{transition:none}
}

/* ── Typography scale (one rhythm for the whole page) + planner, steps, dock ─────────────────────── */
.sfin{--fs-body:clamp(16px,.55vw + 11px,19px);--fs-small:clamp(13px,.25vw + 11px,15px);--fs-h2:clamp(30px,2.4vw + 10px,58px);--fs-h3:clamp(19px,.7vw + 13px,26px);font-size:var(--fs-body);line-height:1.9}
.sfin-eyebrow{font-size:var(--fs-small)}
.sfin-btn{min-height:54px;padding:0 26px;font-size:clamp(15px,.3vw + 12px,17px)}
.sfin-hero__title{font-size:clamp(50px,5.4vw + 12px,128px);line-height:1.2}
.sfin-hero__info small{font-size:var(--fs-small)}
.sfin-hero__info strong{font-size:clamp(16px,.6vw + 11px,22px)}
.sfin-head h2{font-size:var(--fs-h2);line-height:1.2}
.sfin-head p,.sfin-intro__about p,.sfin-acc__inner p,.sfin-why__list p,.sfin-quote p,.sfin-contact p{font-size:var(--fs-body);line-height:1.95}
.sfin-intro__pitch h2{font-size:clamp(24px,1.4vw + 12px,40px);line-height:1.5}
.sfin-intro__actions{display:flex;flex-wrap:wrap;gap:12px}
.sfin-ticks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.sfin-ticks li{position:relative;padding-inline-start:30px;font-weight:750}
.sfin-ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:16px;height:9px;border-inline-start:2px solid var(--f-accent);border-bottom:2px solid var(--f-accent);transform:rotate(-45deg)}
.sfin-statement__lead{font-size:clamp(22px,1.25vw + 12px,38px);line-height:1.8}
.sfin-statement__sign h3{font-size:var(--fs-h3)}
.sfin-quote footer strong{font-size:clamp(16px,.4vw + 12px,19px)}
.sfin-quote footer span{font-size:var(--fs-small)}
.sfin-marquee span{font-size:clamp(26px,2vw + 10px,52px)}
.sfin-acc__num{font-size:var(--fs-small)}
.sfin-acc__title{font-size:clamp(22px,1.4vw + 12px,42px)}
.sfin-why__list h3{margin:0 0 4px;font-size:var(--fs-h3);font-weight:850}
.sfin-why__list p{color:var(--f-muted)}
.sfin-why__list span{font-size:var(--fs-h3)}
.sfin-why__stats strong{font-size:clamp(38px,2.6vw + 14px,72px)}
.sfin-why__stats small{font-size:var(--fs-small)}
.sfin-card h3{font-size:var(--fs-h3)}
.sfin-card dt{font-size:13px}
.sfin-card dd{font-size:var(--fs-small)}
.sfin-filters button{font-size:var(--fs-small)}
.sfin-contact h2{font-size:var(--fs-h2)}

/* Steps */
.sfin-steps{padding:clamp(56px,7vw,110px) 0;border-top:1px solid var(--f-border)}
.sfin-steps__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;counter-reset:s}
.sfin-steps__list li{position:relative;display:grid;align-content:start;gap:8px;padding:28px clamp(14px,1.6vw,28px) 0;border-top:2px solid var(--f-border)}
.sfin-steps__list li::before{content:"";position:absolute;top:-2px;inset-inline:0;height:2px;background:var(--f-accent);transform:scaleX(0);transform-origin:right;transition:transform 1.1s var(--f-ease) var(--d,0s)}
.sfin-steps__list li.is-in::before{transform:scaleX(1)}
.sfin-steps__num{color:var(--f-accent);font-size:clamp(28px,1.6vw + 10px,44px);font-weight:900;line-height:1}
.sfin-steps__list h3{margin:0;font-size:var(--fs-h3);font-weight:850}
.sfin-steps__list p{margin:0;color:var(--f-muted)}

/* Planner */
.sfin-planner{padding:clamp(56px,7vw,110px) 0;scroll-margin-top:90px}
.sfin-planner__box{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,72px);padding:clamp(26px,4vw,60px);border:1px solid color-mix(in srgb,var(--f-accent) 50%,transparent);background:radial-gradient(80% 120% at 100% 0%,color-mix(in srgb,var(--f-accent) 14%,transparent),transparent 60%),var(--f-surface)}
.sfin-planner__head{display:grid;align-content:start;gap:12px}
.sfin-planner__head h2{margin:0;font-size:var(--fs-h2);line-height:1.2}
.sfin-planner__head p{margin:0;color:var(--f-muted)}
.sfin-planner__progress{height:4px;margin-top:10px;background:var(--f-border)}
.sfin-planner__progress i{display:block;width:0;height:100%;background:var(--f-accent);transition:width .5s var(--f-ease)}
.sfin-planner__count{color:var(--f-muted);font-size:var(--fs-small);font-weight:750}
.sfin-planner__body{min-height:260px}
.sfin-planner__step{margin:0;padding:0;border:0;animation:sfin-step .5s var(--f-ease)}
.sfin-planner__step legend{margin-bottom:18px;padding:0;font-size:clamp(22px,1.1vw + 12px,34px);font-weight:850}
.sfin-planner__options{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.sfin-planner__options button{min-height:58px;padding:10px 16px;border:1px solid var(--f-border);background:var(--f-bg);color:var(--f-text);font:inherit;font-size:clamp(15px,.3vw + 12px,17px);font-weight:750;text-align:start;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease}
.sfin-planner__options button:hover{border-color:var(--f-accent);transform:translateY(-2px)}
.sfin-planner__options button.is-picked{border-color:var(--f-accent);background:var(--f-accent);color:var(--f-on-accent)}
.sfin-planner__done{animation:sfin-step .5s var(--f-ease)}
.sfin-planner__done h3{margin:0 0 14px;font-size:clamp(22px,1.1vw + 12px,32px)}
.sfin-planner__done ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;margin:0 0 16px;padding:0;list-style:none}
.sfin-planner__done li{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--f-border)}
.sfin-planner__done li small{color:var(--f-muted);font-size:13px}
.sfin-planner__done li strong{font-size:var(--fs-body)}
.sfin-planner__note{display:grid;gap:6px;margin-bottom:16px;font-weight:750}
.sfin-planner__note small{color:var(--f-muted);font-weight:500}
.sfin-planner__note textarea{width:100%;padding:12px 14px;border:1px solid var(--f-border);background:var(--f-bg);color:var(--f-text);font:inherit;resize:vertical}
.sfin-planner__note textarea:focus{outline:none;border-color:var(--f-accent)}
.sfin-planner__actions{display:flex;flex-wrap:wrap;gap:12px}
.sfin-planner__nav{grid-column:2;display:flex;gap:16px}
.sfin-planner__nav button{padding:0;border:0;background:none;color:var(--f-muted);font:inherit;font-size:var(--fs-small);font-weight:800;cursor:pointer}
.sfin-planner__nav button:hover{color:var(--f-accent)}
@keyframes sfin-step{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Mobile dock */
.sfin-dock{display:none}
@media(max-width:767px){
  .sfin{padding-bottom:70px}
  .sfin-dock{position:fixed;inset:auto 0 0 0;z-index:9990;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--f-border);background:var(--f-bg);box-shadow:0 -10px 30px rgba(0,0,0,.35);transform:translateY(110%);transition:transform .35s var(--f-ease)}
  .sfin-dock.is-on{transform:none}
  .sfin-dock a{display:grid;place-items:center;min-height:60px;color:var(--f-text);font-weight:850;font-size:15px}
  .sfin-dock .is-plan{background:var(--f-accent);color:var(--f-on-accent)}
  .sfin-dock .is-wa{color:#25d366}
  .sfin-steps__list{grid-template-columns:1fr;gap:0}
  .sfin-steps__list li{grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:12px;padding:20px 0}
  .sfin-steps__num{grid-row:span 2}
  .sfin-planner__box{grid-template-columns:1fr}
  .sfin-planner__nav{grid-column:auto}
  .sfin-planner__options{grid-template-columns:1fr 1fr}
  .sfin-planner__done ul{grid-template-columns:1fr}
}
@media(min-width:768px) and (max-width:1100px){.sfin-steps__list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}}
@media(prefers-reduced-motion:reduce){.sfin-planner__step,.sfin-planner__done{animation:none}.sfin-steps__list li::before{transform:none;transition:none}}
/* Projects rail stays inside the page width: 3 whole cards on desktop, 2 on tablet, one-and-a-bit on phones. */
.sfin-rail{--sfin-gap:clamp(14px,1.4vw,22px);width:min(100% - 32px,max(72vw,1180px),1820px);margin-inline:auto;gap:var(--sfin-gap);padding:4px 0 10px;scroll-padding-inline:0}
.sfin-rail .sfin-card{flex:0 0 calc((100% - 2 * var(--sfin-gap)) / 3)}
@media(max-width:1100px){.sfin-rail .sfin-card{flex-basis:calc((100% - var(--sfin-gap)) / 2)}}
@media(max-width:767px){.sfin-rail .sfin-card{flex-basis:86%}}