/* ==========================================================================
   WittyTrades.com - home page presentation layer
   Arihant Intellect, 14 October 2026

   Loaded by indianstocksresearch.html ONLY, and every rule below is scoped to
   body.wt-home-v2. Nothing here changes wording, prices, links, images or the
   order of anything - it is spacing, alignment and surface treatment only.

   TO SWITCH IT OFF: delete the one <link> to this file in the <head> of
   indianstocksresearch.html. The page returns to exactly how it was. Removing
   the wt-home-v2 class from <body> does the same thing.

   Colours are the site's own: navy #0A1C44, panel #E2E7F8 / #F5F7FA,
   WhatsApp green #1FC156, body text #333333, links #1B4F9C, gold #F6C851 on
   dark. Every pairing used here is at or above WCAG AA contrast.
   ========================================================================== */

/* the tokens live in wt-accessibility.css on body.wt-v2,
   which every page carries - home pages get both classes. */

/* --------------------------------------------------------------------------
   1. Section rhythm. The page ran 0, 15, 16, 32 and 80px of padding between
      neighbouring sections, which is what makes it read as unfinished. One
      scale, applied to the content sections only - the menu and the two thin
      banners keep their own tight spacing.
   -------------------------------------------------------------------------- */
body.wt-home-v2 #video2-1ic,
body.wt-home-v2 #apeople1-1gy,
body.wt-home-v2 #list03-1wv,
body.wt-home-v2 #contacts1-1ha,
body.wt-home-v2 #afeatures4-1wn,
body.wt-home-v2 #social-buttons02-1ix,
body.wt-home-v2 #aform2-1j2{
  padding-top: var(--wt-sec-y);
  padding-bottom: var(--wt-sec-y);
}

/* a hairline between adjoining sections of the same colour, so they separate */
body.wt-home-v2 #afeatures4-1wn{ border-top: 1px solid var(--wt-line); }

/* --------------------------------------------------------------------------
   2. Line length. Full-width paragraphs on a 1140px container run past 120
      characters, which is tiring on a desktop and the main reason the page
      feels loose. Cap the measure; leave the layout alone.
   -------------------------------------------------------------------------- */
@media (min-width: 992px){
  body.wt-home-v2 #list03-1wv .mbr-text,
  body.wt-home-v2 #afeatures4-1wn .mbr-text,
  body.wt-home-v2 #aform2-1j2 .mbr-text{
    max-width: 68ch;
  }
  body.wt-home-v2 #afeatures4-1wn .mbr-text{ margin-left: auto; margin-right: auto; }
}

/* --------------------------------------------------------------------------
   3. The eight navigation tiles. They sit in a flex wrap, so the last row
      centres under the others and the cards end up different heights. A grid
      gives even columns, equal heights and a predictable count per row:
      2 on a phone, 3 on a tablet, 4 on a desktop.
   -------------------------------------------------------------------------- */
body.wt-home-v2 #apeople1-1gy .cards-wrap{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wt-gap);
  align-items: stretch;
  width: 100%;
}
@media (min-width: 576px){
  body.wt-home-v2 #apeople1-1gy .cards-wrap{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px){
  body.wt-home-v2 #apeople1-1gy .cards-wrap{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body.wt-home-v2 #apeople1-1gy .card{
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  display: flex;
}
body.wt-home-v2 #apeople1-1gy .card-wrap{
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--wt-line);
  border-radius: var(--wt-r);
  overflow: hidden;
  box-shadow: var(--wt-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.wt-home-v2 #apeople1-1gy .card-wrap:hover,
body.wt-home-v2 #apeople1-1gy .card-wrap:focus-within{
  transform: translateY(-3px);
  box-shadow: var(--wt-shadow-lift);
  border-color: #B9C6E4;
}

/* One image box for all eight, so the titles line up across a row.
   The eight artworks run from 0.61 to 2.06 in aspect ratio - a portrait badge
   next to a wide banner - so the box has to letterbox them (contain), never
   crop them (cover), or the tall ones lose their heads and the wide ones lose
   their ends. */
body.wt-home-v2 #apeople1-1gy .img-wrapper{ margin: 0; background: #FFFFFF; }
body.wt-home-v2 #apeople1-1gy .img-wrapper img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: contain;
  object-position: center;
  padding: 10px 12px;
  background: #FFFFFF;
}

/* the title block takes the leftover height, so every card ends level */
body.wt-home-v2 #apeople1-1gy .card-box{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 10px 14px;
  min-height: 62px;
}
body.wt-home-v2 #apeople1-1gy .card-title{ margin: 0; line-height: 1.35; }
body.wt-home-v2 #apeople1-1gy .card-title a{
  display: block;
  padding: 2px 0;
  color: var(--wt-link);
}

/* --------------------------------------------------------------------------
   4. The video and the note beside it. Keep the two-column arrangement on a
      desktop, give them a real gap, and make the frame hold 16:9 on a phone
      instead of collapsing.
   -------------------------------------------------------------------------- */
body.wt-home-v2 #video2-1ic .row{ row-gap: var(--wt-gap); align-items: flex-start; }
body.wt-home-v2 #video2-1ic iframe,
body.wt-home-v2 #video2-1ic .mbr-figure iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 10px;
  display: block;
}
body.wt-home-v2 #video2-1ic h1,
body.wt-home-v2 #video2-1ic .mbr-section-title{
  font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.3rem);
  line-height: 1.25;
  margin-bottom: .5em;
}

/* --------------------------------------------------------------------------
   5. The two banner strips. On a phone the 8/4 column split squeezes the
      button into a third of the width; stack them and let the button be a
      proper target.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px){
  body.wt-home-v2 #contacts1-1l3 .row,
  body.wt-home-v2 #contacts1-1l4 .row{
    row-gap: 10px;
    text-align: center;
  }
  body.wt-home-v2 #contacts1-1l3 .btn,
  body.wt-home-v2 #contacts1-1l4 .btn{
    width: 100%;
    justify-content: center;
  }
}
body.wt-home-v2 #contacts1-1l3 .btn,
body.wt-home-v2 #contacts1-1l4 .btn{
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   6. The four buttons on the navy band. Equal heights, gold on navy for the
      headings (9:1 contrast), and a target that is comfortable on a phone.
   -------------------------------------------------------------------------- */
body.wt-home-v2 #social-buttons02-1ix .row{ row-gap: var(--wt-gap); align-items: stretch; }
body.wt-home-v2 #social-buttons02-1ix .card{ display: flex; }
body.wt-home-v2 #social-buttons02-1ix .card > *{ width: 100%; }
body.wt-home-v2 #social-buttons02-1ix .btn{
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
body.wt-home-v2 #social-buttons02-1ix .card-title{ color: var(--wt-gold); }

/* --------------------------------------------------------------------------
   7. The opt-in form. Fields the same height and shape, and a tap target that
      meets 2.5.8 on a phone without changing a single field or label.
   -------------------------------------------------------------------------- */
body.wt-home-v2 #aform2-1j2 .form-control,
body.wt-home-v2 #aform2-1j2 input[type="text"],
body.wt-home-v2 #aform2-1j2 input[type="email"],
body.wt-home-v2 #aform2-1j2 input[type="tel"],
body.wt-home-v2 #aform2-1j2 select,
body.wt-home-v2 #aform2-1j2 textarea{
  min-height: 46px;
  border-radius: 8px;
}
body.wt-home-v2 #aform2-1j2 textarea{ min-height: 110px; }
body.wt-home-v2 #aform2-1j2 .btn{
  min-height: 48px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.wt-home-v2 #aform2-1j2 .row{ row-gap: 12px; }

/* The three fields are each pinned to col-md-3, so on a desktop they fill
   549px of a 730px row and stop, leaving a block of dead space to their right
   and the Submit button sitting 4px off their left edge. Let them share the
   row evenly, and put the consent line and the button on their own full-width
   rows, flush with the fields. */
@media (min-width: 768px){
  /* the three groups are different heights because two of the hints wrap onto
     a second line; topped out, their labels and fields sit on one line */
  body.wt-home-v2 #aform2-1j2 .dragArea{ align-items: flex-start; }
  body.wt-home-v2 #aform2-1j2 .dragArea > .col-md-3.form-group{
    flex: 1 1 0;
    max-width: none;
  }
  body.wt-home-v2 #aform2-1j2 .dragArea > .col-auto,
  body.wt-home-v2 #aform2-1j2 .dragArea > .mbr-section-btn{
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

/* The button stretched the full 700px width of the form. It carries
   Bootstrap's .w-100 utility, which is width:100% !important, so overriding it
   needs the same weight. */
@media (min-width: 768px){
  body.wt-home-v2 #aform2-1j2 .mbr-section-btn .btn{
    width: auto !important;
    min-width: 190px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* The consent tick box is position:absolute inside a centred block, with no
   positioned ancestor to anchor it - so it floats into the middle of the
   sentence ("I agree to be contacted [x] y WittyTrades.com"). Put it back in
   the flow, on its own, to the left of the words it belongs to. It was also
   13px, below the 24px minimum and fiddly on a phone. */
body.wt-home-v2 #aform2-1j2 .form-check{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding-left: 0;
}
body.wt-home-v2 #aform2-1j2 .form-check-input,
body.wt-home-v2 #aform2-1j2 input[type="checkbox"],
body.wt-home-v2 #aform2-1j2 input[type="radio"]{
  position: static !important;
  width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 2px 0 0 0;
  flex: 0 0 24px;
}
body.wt-home-v2 #aform2-1j2 .form-check-label{
  margin: 0;
  line-height: 1.5;
  text-align: left;
}

/* --------------------------------------------------------------------------
   8. Headings on one scale, so the page steps down consistently rather than
      jumping between section styles.
   -------------------------------------------------------------------------- */
body.wt-home-v2 #list03-1wv .mbr-section-title,
body.wt-home-v2 #contacts1-1ha .mbr-section-title,
body.wt-home-v2 #afeatures4-1wn .mbr-section-title,
body.wt-home-v2 #aform2-1j2 .mbr-section-title{
  font-size: clamp(1.3rem, 1.02rem + 1.15vw, 1.95rem);
  line-height: 1.3;
  margin-bottom: .55em;
}

/* --------------------------------------------------------------------------
   9. Phone gutters. A consistent 16px down both edges, and nothing allowed to
      push the page sideways.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px){
  body.wt-home-v2 .container,
  body.wt-home-v2 .container-fluid{
    padding-left: 16px;
    padding-right: 16px;
  }
  body.wt-home-v2 #apeople1-1gy .card-box{ padding: 10px 8px 12px; min-height: 56px; }
}

/* --------------------------------------------------------------------------
   10b. Key Features of Our Advisory Services.

       Five lines of 13.8px grey text in a single narrow column, pushed to the
       right by an empty column, with most of the section's width unused. Same
       five points, same words, same order and the same gold tick - given room,
       a readable size, and a light panel each so they scan in a glance.

       The fifth point is the risk disclaimer, not a selling point, so it sits
       apart from the four features rather than dressed up like one.
   -------------------------------------------------------------------------- */
body.wt-home-v2 #list03-1wv .mbr-section-title{
  color: #1A2B4C;
}
body.wt-home-v2 #list03-1wv .mbr-section-title::after{
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: #F2AC2B;
}
/* the empty column that pushed the list off to the right */
@media (min-width: 992px){
  body.wt-home-v2 #list03-1wv .col-lg-4{ display: none; }
  body.wt-home-v2 #list03-1wv .col-lg-6{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

body.wt-home-v2 #list03-1wv ul.list{
  padding-left: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px){
  body.wt-home-v2 #list03-1wv ul.list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
  }
}

body.wt-home-v2 #list03-1wv .item-wrap{
  position: relative;
  margin: 0;
  padding: 16px 18px 16px 54px;
  background: #FFFFFF;
  border: 1px solid var(--wt-line);
  border-radius: 12px;
  box-shadow: var(--wt-shadow);
  color: var(--wt-ink);
  font-size: 1rem;
  line-height: 1.6;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.wt-home-v2 #list03-1wv .item-wrap:hover{
  transform: translateY(-2px);
  box-shadow: var(--wt-shadow-lift);
  border-color: #B9C6E4;
}
/* the theme pairs a 50px padding on the <ul> with margin-left:-50px on the
   tick, so with the list padding removed the tick has to have that negative
   margin cleared too - otherwise it hangs outside the card */
body.wt-home-v2 #list03-1wv .item-wrap::before{
  left: 18px;
  top: 17px;
  margin-left: 0;
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 15px;
  text-align: center;
}

/* the disclaimer: across the full width, quieter, and plainly not a feature */
@media (min-width: 768px){
  body.wt-home-v2 #list03-1wv .item-wrap:last-child{ grid-column: 1 / -1; }
}
body.wt-home-v2 #list03-1wv .item-wrap:last-child{
  background: #FBFCFE;
  border-color: #DCE3F0;
  border-left: 4px solid #F2AC2B;
  box-shadow: none;
  font-size: .9rem;
  color: #4A5468;
  padding-left: 54px;
}
body.wt-home-v2 #list03-1wv .item-wrap:last-child:hover{
  transform: none;
  box-shadow: none;
  border-color: #DCE3F0;
  border-left-color: #F2AC2B;
}
body.wt-home-v2 #list03-1wv .item-wrap:last-child::before{ left: 16px; }

@media (prefers-reduced-motion: reduce){
  body.wt-home-v2 #list03-1wv .item-wrap{ transition: none; }
  body.wt-home-v2 #list03-1wv .item-wrap:hover{ transform: none; }
}

/* --------------------------------------------------------------------------
   11. Targets you can actually hit.

       Each card on the navy band carries three links to the same place - the
       social icon, the name, and the arrow - and the icon and arrow were
       16x22 and 40x22. Those are icon links, not words inside a sentence, so
       WCAG 2.2 asks for 24x24 as a minimum; 44x44 is the comfortable size and
       costs nothing here.
   -------------------------------------------------------------------------- */
body.wt-home-v2 #social-buttons02-1ix .card-img a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
}
/* the arrow link, kept in its own rule: a browser without :has() drops this
   one and still gets the icon rule above */
body.wt-home-v2 #social-buttons02-1ix a:has(> .mobi-mbri-right){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
}

/* the text alternative's download link sat at 22px tall */
body.wt-home-v2 .wt-video-alt a[download],
body.wt-home-v2 .wt-video-alt a[href$=".txt"]{
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
}

/* --------------------------------------------------------------------------
   12. One gutter down both edges of a phone. The theme pairs a 16px container
       padding with a -15px row margin, so a paragraph sat at 16px from the
       edge while the block below it sat at 31px, and some blocks reached 46px
       on the right. On a stacked phone layout the column padding buys nothing,
       so everything lines up on the same 16px.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px){
  body.wt-home-v2 #video2-1ic .row,
  body.wt-home-v2 #apeople1-1gy .row,
  body.wt-home-v2 #list03-1wv .row,
  body.wt-home-v2 #contacts1-1ha .row,
  body.wt-home-v2 #afeatures4-1wn .row,
  body.wt-home-v2 #social-buttons02-1ix .row,
  body.wt-home-v2 #aform2-1j2 .row,
  body.wt-home-v2 #footer01-1r2 .row{
    margin-left: 0;
    margin-right: 0;
  }
  body.wt-home-v2 #video2-1ic .row > [class*="col-"],
  body.wt-home-v2 #apeople1-1gy .row > [class*="col-"],
  body.wt-home-v2 #list03-1wv .row > [class*="col-"],
  body.wt-home-v2 #contacts1-1ha .row > [class*="col-"],
  body.wt-home-v2 #afeatures4-1wn .row > [class*="col-"],
  body.wt-home-v2 #aform2-1j2 .row > [class*="col-"],
  body.wt-home-v2 #footer01-1r2 .row > [class*="col-"]{
    padding-left: 0;
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   14. "Follow US on Social Media Platforms" and the four buttons under it.

       The line sits alone on a white band with 34px of air above and below it,
       then the navy band with the buttons starts - so the heading reads as a
       stray sentence rather than the title of the block it belongs to. Same
       text, same place in the page: it joins the navy band.
   -------------------------------------------------------------------------- */
body.wt-home-v2 #afeatures4-1wn{
  background-color: var(--wt-navy);
  border-top: 0;
  padding-bottom: 0;
}
body.wt-home-v2 #afeatures4-1wn .card-text,
body.wt-home-v2 #afeatures4-1wn .card-box p{
  color: #FFFFFF;
  text-align: center;
  font-size: clamp(1.15rem, .95rem + .85vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0;
}
body.wt-home-v2 #afeatures4-1wn .card-text::after{
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: var(--wt-gold);
}
body.wt-home-v2 #social-buttons02-1ix{ padding-top: clamp(22px, 3vw, 38px); }

/* --------------------------------------------------------------------------
   15. "Get in touch today!"

       A 20.8px heading, a grey-on-pale "Tel:" label at about 4.3:1, and the
       phone and email reading as plain grey text rather than as the links they
       are. Same details, in a readable hierarchy.
   -------------------------------------------------------------------------- */
body.wt-home-v2 #contacts1-1ha .mbr-section-title,
body.wt-home-v2 #contacts1-1ha h2,
body.wt-home-v2 #contacts1-1ha h3{
  color: #1A2B4C;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.25;
  margin-bottom: .5em;
}
body.wt-home-v2 #contacts1-1ha p{ color: var(--wt-ink); line-height: 1.65; }
body.wt-home-v2 #contacts1-1ha a[href^="tel"],
body.wt-home-v2 #contacts1-1ha a[href^="mailto"]{
  color: var(--wt-link);
  text-decoration: underline;
  display: inline-block;
  padding: 2px 0;
}
body.wt-home-v2 #contacts1-1ha .row{ align-items: center; row-gap: var(--wt-gap); }
body.wt-home-v2 #contacts1-1ha .image-wrapper img{
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   18. Respect a visitor who has asked for less movement, and never let the
       polish weaken the focus outline the remediation put in.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body.wt-home-v2 #apeople1-1gy .card-wrap{ transition: none; }
  body.wt-home-v2 #apeople1-1gy .card-wrap:hover,
  body.wt-home-v2 #apeople1-1gy .card-wrap:focus-within{ transform: none; }
}
body.wt-home-v2 a:focus-visible,
body.wt-home-v2 button:focus-visible,
body.wt-home-v2 .btn:focus-visible{
  outline: 3px solid #005FCC;
  outline-offset: 2px;
}