/* ============================================================
   How It Work - front/how_its_works_v2.blade.php, when
   CommonHelper::HOW_IT_WORKS_V2 is on. The old page and its rules are untouched.

   Four sections on white, in the arrangement the old page used. Everything is
   scoped to .hiw-v2, except the video dialog at the foot of this file, which
   is under .hiw-v2-video so it can outrank custom.css.
   ============================================================ */
.hiw-v2{
  --brand:#ffcc2a;
  --brand-dark:#e6b415;
  --ink:#1a1a1a;
  --ink-2:#3f4550;
  --muted:#6b7280;
  --line:#e6e8ec;
  --line-2:#f0f1f4;
  --green:#0f7b52;
  --green-bg:#e7f5ef;
  --r:10px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);

  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  /* .nav-top-fixed stands over the top of the page; this is the room it needs */
  padding-top:150px;
}
.hiw-v2 *{box-sizing:border-box}
.hiw-v2 h1,.hiw-v2 h2{margin:0;font-weight:700;letter-spacing:-.01em}
.hiw-v2 img{max-width:100%}

.hiw-v2 .hiw-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.hiw-v2 .hiw-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:34px 0 52px}
.hiw-v2 .hiw-body{max-width:560px}

/* the admin's own cut-outs on white, so they are contained and never cropped */
.hiw-v2 .hiw-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px}
.hiw-v2 .hiw-art > img:not(.hiw-mark){position:relative;z-index:1;max-height:390px;object-fit:contain}
/* Section one's picture, dressed as the home page dresses its own: a soft panel
   behind it and a slow float, so the empty corners of the file read as
   composition and not as a gap. Same numbers as home-v2.css. */
.hiw-v2 .hiw-art-img{position:relative;z-index:1;display:block;max-width:560px;isolation:isolate}
.hiw-v2 .hiw-art-img::before{
  content:"";position:absolute;z-index:-1;inset:8% 4% 10%;border-radius:28px;
  background:linear-gradient(150deg,#fff6df 0%,#f5f8fb 58%,#f7f9fc 100%);
  border:1px solid #edf0f4;
}
.hiw-v2 .hiw-art-img > img{
  position:relative;max-width:100%;max-height:390px;object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(16,24,40,.16));
  animation:hiw-v2-float 7s ease-in-out infinite;
}
@keyframes hiw-v2-float{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){
  .hiw-v2 .hiw-art-img > img{animation:none}
  .hiw-v2 .hiw-play::after{animation:none}
}
/* the faint drawing each old section carried behind its art, in the same corner */
.hiw-v2 .hiw-mark{position:absolute;right:0;bottom:4px;width:190px;opacity:.12;z-index:0}
.hiw-v2 .hiw-mark.is-chart{right:auto;bottom:auto;left:0;top:0;width:165px;opacity:.1}

.hiw-v2 .hiw-h{font-size:26px;line-height:1.3}
/* separator-yellow, which the site puts under every section heading */
.hiw-v2 .hiw-h::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--brand);margin:14px 0 22px}
/* .text-black-shad in custom.css: a light fill with a 2px shadow all the way
   round, so the first line is outlined instead of filled */
.hiw-v2 .hiw-ghost{
  margin:0 0 3px;font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:#f0f3f8;
  text-shadow:-2px 2px 0 var(--ink),-1px -1.75px 0 var(--ink),2px 0 0 var(--ink),
              2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -1px 0 var(--ink),-2px 0 0 var(--ink);
}
/* The admin pastes from Word and from web pages, so the text arrives with its
   own sizes, colours and alignment - the band came through at 18px in light
   grey. Flattened to the page's own, as the legal pages flatten theirs.
   !important is the only way past an inline style. */
.hiw-v2 .hiw-p{margin-bottom:24px}
.hiw-v2 .hiw-p,
.hiw-v2 .hiw-p *{font-size:14px !important;line-height:1.85 !important;color:var(--ink-2) !important;text-align:left !important}
.hiw-v2 .hiw-p p:last-child{margin-bottom:0}
/* Word leaves these behind, and they print as a blank line */
.hiw-v2 o\:p{display:none}

/* flat, with the darker yellow only as its edge: the mockup's own sizes, and
   the same button the Contact Us form carries */
.hiw-v2 .hiw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;
  background:var(--brand);border:1px solid var(--brand-dark);border-radius:8px;color:var(--ink);
  font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:none;
  transition:background .12s;
}
.hiw-v2 .hiw-btn i{font-size:11px}
.hiw-v2 .hiw-btn:hover{background:var(--brand-dark);color:var(--ink);text-decoration:none}
.hiw-v2 .hiw-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(255,204,42,.45)}
.hiw-v2 .hiw-cta{margin-top:24px}

/* ------------------------------------------------------------
   the steps: numbered and joined, so they read as an order
   ------------------------------------------------------------ */
.hiw-v2 .hiw-steps{list-style:none;margin:0;padding:0;position:relative}
.hiw-v2 .hiw-steps li{display:flex;align-items:center;gap:16px;padding-bottom:22px;position:relative}
.hiw-v2 .hiw-steps li:last-child{padding-bottom:4px}
/* the connector, drawn from one step's icon to the next */
.hiw-v2 .hiw-steps li::before{content:"";position:absolute;left:25px;top:54px;bottom:0;width:2px;background:var(--line)}
.hiw-v2 .hiw-steps li:last-child::before{display:none}
.hiw-v2 .hiw-step-ic{position:relative;width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none;z-index:1;box-shadow:var(--shadow);transition:background .2s,border-color .2s,transform .2s}
.hiw-v2 .hiw-step-ic img{width:29px;height:29px;object-fit:contain}
.hiw-v2 .hiw-step-n{position:absolute;right:-8px;top:-8px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--ink);font-size:11.5px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;transition:background .2s,color .2s}
/* the whole row answers the pointer, and the number turns dark so it is not
   lost on the yellow */
.hiw-v2 .hiw-steps li:hover .hiw-step-ic{background:var(--brand);border-color:var(--brand);transform:translateY(-2px)}
.hiw-v2 .hiw-steps li:hover .hiw-step-n{background:var(--ink);color:#fff}
.hiw-v2 .hiw-step-t{font-size:14.5px;font-weight:700;line-height:1.5}

/* ------------------------------------------------------------
   the video still, and the site's yellow play over it
   ------------------------------------------------------------ */
.hiw-v2 .hiw-video{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px}
.hiw-v2 .hiw-video > img{max-height:390px;object-fit:contain}
.hiw-v2 .hiw-video-btn{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink)}
.hiw-v2 .hiw-video-btn:hover{color:var(--ink);text-decoration:none}
.hiw-v2 .hiw-play{position:relative;width:62px;height:62px;border-radius:50%;background:var(--brand);color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 20px rgba(16,24,40,.25);transition:background .14s,transform .14s}
/* the triangle's own centre is the middle of its 24px box, so it needs no nudge */
.hiw-v2 .hiw-play svg{width:23px;height:23px;fill:currentColor}
/* the slow ring the home page banner draws round its play button */
.hiw-v2 .hiw-play::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(255,204,42,.55);animation:hiw-v2-pulse 2.2s ease-out infinite}
@keyframes hiw-v2-pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.hiw-v2 .hiw-video-btn:hover .hiw-play{background:var(--brand-dark);transform:scale(1.06)}

/* ------------------------------------------------------------
   the dark band, on the photograph the old section already used
   ------------------------------------------------------------ */
.hiw-v2 .hiw-band{
  position:relative;overflow:hidden;color:#fff;padding:64px 20px;margin:12px 0 0;
  background:var(--ink) url('../../images/crowdfunding-bg.jpg') center/cover no-repeat;
}
/* The photograph is already dark, so a flat black over all of it hides the
   house. The shade stays in the middle, under the text. */
.hiw-v2 .hiw-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 85% at 50% 50%,rgba(0,0,0,.62) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.12) 100%)}
.hiw-v2 .hiw-band-in{position:relative;z-index:1;max-width:820px;margin:0 auto;text-align:center}
.hiw-v2 .hiw-band h2{font-size:24px;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hiw-v2 .hiw-band h2::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--brand);margin:14px auto 18px}
.hiw-v2 .hiw-band-p{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hiw-v2 .hiw-band-p,
.hiw-v2 .hiw-band-p *{font-size:14px !important;line-height:1.9 !important;color:#f2f4f7 !important;text-align:center !important}
.hiw-v2 .hiw-band-p p:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   the process list: whatever the admin pasted, with ticks
   ------------------------------------------------------------ */
.hiw-v2 .hiw-list ul{list-style:none;margin:0;padding:0}
.hiw-v2 .hiw-list li{position:relative;padding:13px 0 13px 37px;border-bottom:1px solid var(--line-2);font-size:14px;line-height:1.6;color:var(--ink)}
.hiw-v2 .hiw-list li:last-child{border-bottom:0}
/* the markup is the admin's, so the tick is drawn on the bullet */
.hiw-v2 .hiw-list li::before{
  content:"";position:absolute;left:0;top:12px;width:24px;height:24px;border-radius:50%;
  background:var(--green-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7b52' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center/13px 13px no-repeat;
}
/* the pasted html carries its own sizes and line heights; flattened */
.hiw-v2 .hiw-list li span,
.hiw-v2 .hiw-list li font{font-size:inherit !important;line-height:inherit !important}
.hiw-v2 .hiw-list li br{display:none}

/* ------------------------------------------------------------
   The video dialog. custom.css draws .video-modal's close as a 45px glyph
   pushed 10px up and loads after this file, so the header is named to
   outrank it.
   ------------------------------------------------------------ */
.hiw-v2-video .modal-dialog{max-width:820px}
.hiw-v2-video .modal-content{border:0;border-radius:12px;box-shadow:0 12px 40px rgba(16,24,40,.22);overflow:hidden}
.hiw-v2-video .modal-header{align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid #f0f1f4}
.hiw-v2-video .modal-title{margin:0;font-size:15px;font-weight:600;color:#1a1a1a}
.hiw-v2-video .modal-header button.close{
  margin:0 0 0 auto;padding:0;width:30px;height:30px;border-radius:7px;
  display:grid;place-items:center;font-size:21px;line-height:1;top:0;color:#6b7280;
  transition:background .15s,color .15s;
}
.hiw-v2-video .modal-header button.close:hover{background:#f4f5f7;color:#1a1a1a}
.hiw-v2-video .modal-body{padding:0;background:#000}

/* ------------------------------------------------------------
   narrower screens: the picture above the words, as the old page
   stacked them
   ------------------------------------------------------------ */
@media (max-width:991px){
  .hiw-v2{padding-top:132px}
  .hiw-v2 .hiw-sec{grid-template-columns:1fr;gap:26px;padding:22px 0 34px}
  .hiw-v2 .hiw-body{max-width:none}
  .hiw-v2 .hiw-art,
  .hiw-v2 .hiw-video{min-height:auto;order:-1}
  .hiw-v2 .hiw-art > img:not(.hiw-mark),
  .hiw-v2 .hiw-art-img > img,
  .hiw-v2 .hiw-video > img{max-height:300px}
  .hiw-v2 .hiw-art-img{max-width:460px}
  .hiw-v2 .hiw-art-img::before{inset:10% 2% 12%;border-radius:22px}
  .hiw-v2 .hiw-mark{width:140px}
}
@media (max-width:575px){
  .hiw-v2{padding-top:122px}
  .hiw-v2 .hiw-wrap{padding:0 14px}
  .hiw-v2 .hiw-h,
  .hiw-v2 .hiw-ghost{font-size:21px}
  .hiw-v2 .hiw-band{padding:40px 18px}
  .hiw-v2 .hiw-band h2{font-size:20px}
}