/* ═══════════════════════════════════════════════════════════════════════════
   ONE COST RED — the single definition, repeated here because this site has
   no stylesheet that every page loads. Values are identical everywhere; see
   polish.css for why there are three of them.

     --cost-red           text on a LIGHT surface      4.5:1
     --cost-red-on-dark   text on a DARK surface       4.5:1
     --cost-red-bar-on-dark   a BAR on a dark surface  3:1 is the bar
                              it must clear, and the looser bar buys a
                              deeper, truer red than the text one.

   The two *-auto tokens pick the right member of that set from the theme,
   so a badge on a card that goes dark stays readable without every rule
   having to say so twice.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --cost-red:#B3261E;
  --cost-red-on-dark:#F0776B;
  --cost-red-bar-on-dark:#E54B3E;
  --cost-red-auto:#B3261E;
  --cost-red-bar-auto:#B3261E;
}
:root[data-theme="dark"]{
  --cost-red-auto:var(--cost-red-on-dark);
  --cost-red-bar-auto:var(--cost-red-bar-on-dark);
}

/* ── "Your loan in 5 seconds" ──────────────────────────────────────────────
   Five steps, not three: the last two are the ones a calculator normally
   stops before. Each card owns a small drawn figure that fills as the card
   scrolls in, driven by --xs-p (0 to 1), set per card by the observer in
   loan-explainer.js. Phones run the same path as desktop instead of
   dropping to a static list.

   Everything animated is gated behind .xs-ready, which JS adds. With
   scripting off the section renders complete and fully opaque rather than
   sitting at 42% waiting for an observer that will never run. */
#marketing-view .ml-explainer{
  --xs-line:var(--refresh-line);--xs-ink:var(--refresh-ink);--xs-muted:var(--refresh-muted);
  --xs-green:#087443;--xs-warn:var(--cost-red-bar-auto, #B3261E);--xs-surface:var(--refresh-surface);
  display:block;padding-block:64px;
}
[data-theme=dark] #marketing-view .ml-explainer{--xs-green:#5fd49a;--xs-warn:#E8A06A;}
.ml-explainer .xs-head{max-width:620px;margin-bottom:34px;}
.ml-explainer .xs-head p{font-size:14px;line-height:1.75;}

/* Row */
#marketing-view .ml-explain-steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
  list-style:none;padding:0;margin:0;
}
#marketing-view .ml-explain-steps .xs-step{
  position:relative;display:flex;flex-direction:column;
  padding:20px 18px 22px;border:1px solid var(--xs-line);border-radius:16px;
  background:var(--xs-surface);
  transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1),border-color .35s ease,box-shadow .35s ease;
}
#marketing-view .xs-ready .xs-step{
  opacity:calc(.42 + var(--xs-p,0) * .58);
  transform:translateY(calc((1 - var(--xs-p,0)) * 22px));
}
.ml-explain-steps .xs-step>span{font:700 9px/1.4 Inter,system-ui,sans-serif;letter-spacing:1.3px;color:var(--xs-green);}
.ml-explain-steps .xs-step strong{display:block;font:700 20px/1.25 var(--font-sans),sans-serif;letter-spacing:-.4px;color:var(--xs-ink);margin:0 0 9px;}
.ml-explain-steps .xs-step p{font-size:12px!important;line-height:1.65;color:var(--xs-muted);margin:0;}
.ml-explain-steps .ml-step-active{border-color:var(--xs-green);box-shadow:0 14px 30px #0874431f;}
.ml-explain-steps .xs-step--warn.ml-step-active{border-color:var(--xs-warn);box-shadow:0 14px 30px #b3261e1f;}
.ml-explain-steps .xs-step--warn>span{color:var(--xs-warn);}

/* Figures — at rest every shape is drawn in full; .xs-ready hands control
   of the fill to --xs-p. */
.xs-art{margin:16px 0 14px;}
.xs-art svg{display:block;width:100%;height:auto;max-width:92px;overflow:visible;}
.xs-track{fill:var(--xs-line);}
.xs-track.xs-stroke{fill:none;stroke:var(--xs-line);stroke-width:5;stroke-linecap:round;}
.xs-fill{fill:var(--xs-green);}
.xs-arc{fill:none;stroke:var(--xs-green);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:67;}
.xs-ticks rect{fill:var(--xs-green);}
.xs-bite{fill:var(--xs-warn);}
.xs-cmp--a{fill:var(--xs-muted);transform:scaleX(.918);transform-origin:2px center;}
.xs-cmp--b{fill:var(--xs-warn);}

.xs-ready .xs-fill{transform:scaleX(var(--xs-p,0));transform-origin:2px center;transition:transform .7s cubic-bezier(.3,.9,.3,1);}
.xs-ready .xs-arc{stroke-dashoffset:calc(100 - var(--xs-p,0) * 33);transition:stroke-dashoffset .7s cubic-bezier(.3,.9,.3,1);}
.xs-ready .xs-ticks rect{transform:scaleY(calc(.18 + var(--xs-p,0) * .82));transform-origin:center 26px;transition:transform .5s cubic-bezier(.3,.9,.3,1);}
.xs-ready .xs-ticks rect:nth-child(2){transition-delay:.05s}.xs-ready .xs-ticks rect:nth-child(3){transition-delay:.1s}.xs-ready .xs-ticks rect:nth-child(4){transition-delay:.15s}.xs-ready .xs-ticks rect:nth-child(5){transition-delay:.2s}.xs-ready .xs-ticks rect:nth-child(6){transition-delay:.25s}.xs-ready .xs-ticks rect:nth-child(7){transition-delay:.3s}.xs-ready .xs-ticks rect:nth-child(8){transition-delay:.35s}.xs-ready .xs-ticks rect:nth-child(9){transition-delay:.4s}.xs-ready .xs-ticks rect:nth-child(10){transition-delay:.45s}.xs-ready .xs-ticks rect:nth-child(11){transition-delay:.5s}
/* The bite is the fee: it eats into the bar you thought you received. */
.xs-ready .xs-bite{transform:scaleX(var(--xs-p,0));transform-origin:2px center;transition:transform .55s cubic-bezier(.3,.9,.3,1) .25s;}
.xs-ready .xs-cmp--a{transform:scaleX(calc(var(--xs-p,0) * .918));transition:transform .7s cubic-bezier(.3,.9,.3,1);}
.xs-ready .xs-cmp--b{transform:scaleX(var(--xs-p,0));transform-origin:2px center;transition:transform .7s cubic-bezier(.3,.9,.3,1) .22s;}

/* Rail */
.xs-rail{position:relative;height:2px;margin:26px 0 14px;border-radius:2px;background:var(--xs-line);overflow:hidden;}
.xs-rail i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--xs-rail,0));background:linear-gradient(90deg,var(--xs-green),var(--xs-warn));transition:transform .45s cubic-bezier(.4,0,.2,1);}
#marketing-view .ml-explain-note{font-size:10.5px!important;line-height:1.7;margin:0;color:var(--xs-muted);max-width:760px;}

/* Phone and small tablet: a snap rail you swipe, which is the motion the
   stacked column never had. */
@media(max-width:860px){
  #marketing-view .ml-explainer{padding-block:42px;}
  .ml-explainer .xs-head{margin-bottom:22px;}
  #marketing-view .ml-explain-steps{
    display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:4px 16px 16px;margin:0 -16px;scrollbar-width:none;
  }
  #marketing-view .ml-explain-steps::-webkit-scrollbar{display:none;}
  #marketing-view .ml-explain-steps .xs-step{flex:0 0 78%;max-width:300px;scroll-snap-align:center;}
  .ml-explain-steps .xs-step strong{font-size:22px;}
  .xs-art svg{max-width:104px;}
  .xs-rail{margin-top:4px;}
}
@media(min-width:861px) and (max-width:1100px){
  #marketing-view .ml-explain-steps{grid-template-columns:repeat(3,1fr);}
}
@media(prefers-reduced-motion:reduce){
  #marketing-view .xs-ready .xs-step{opacity:1;transform:none;}
  .xs-ready .xs-fill,.xs-ready .xs-bite,.xs-ready .xs-cmp--b{transform:scaleX(1);}
  .xs-ready .xs-cmp--a{transform:scaleX(.918);}
  .xs-ready .xs-ticks rect{transform:scaleY(1);}
  .xs-ready .xs-arc{stroke-dashoffset:67;}
  .ml-explainer *{transition-duration:.01ms!important;}
}

/* Founder photo. Falls back to the NV monogram via onerror until a real
   portrait is dropped at /assets/nakul-verma.jpg, so the hero never shows a
   broken image while the file is missing. */
.ml-founder-photo{display:block;flex:none;width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid #bed6c8;background:#e8f3ec;}
[data-theme=dark] .ml-founder-photo{border-color:#3c5a4a;background:#15362a;}

/* ── Hero credential block ─────────────────────────────────────────────────
   The left hero column ran 455px shorter than the Loan Lab card beside it,
   so the founder line sat above a large void. This fills it with the
   background already published on about.html rather than ornament, and
   replaces a microcopy line that only restated the hero description.

   .ml-demo is a light card in both themes and the hero behind it does not
   flip, so these colours are fixed rather than theme-swapped — the same
   reason the Loan Lab's own type is not overridden in dark mode. */
/* Built with a hardcoded #ffffff8c panel and a fixed #3f5a4d text colour, so
   in dark mode it composited to rgb(145,157,152) behind rgb(63,90,77) text —
   2.69:1, unreadable. Exactly the hardcoded-colour trap this foundation
   exists to prevent, and I walked into it. Both now come from tokens that
   flip with the theme. */
#marketing-view .hero__cred{
  max-width:440px;margin:22px 0 0;padding:18px 20px;
  border:1px solid var(--mo-line, #cfdfd5);
  border-left:3px solid var(--mo-accent, #087443);
  border-radius:4px 14px 14px 4px;
  background:color-mix(in srgb, var(--mo-surface, #fff) 88%, transparent);
}
#marketing-view .hero__cred .hc-lead{margin:0 0 14px;font:500 13px/1.7 Inter,system-ui,sans-serif;color:var(--mo-text-soft, #3f5a4d);}
#marketing-view .hero__cred .hc-marks{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0 0 14px;padding:0;}
#marketing-view .hero__cred .hc-marks li{  padding:5px 11px;border:1px solid var(--mo-line, #bed6c8);border-radius:100px;background:color-mix(in srgb, var(--mo-accent, #087443) 12%, var(--mo-surface, #fff));
  font:700 10px/1.4 Inter,system-ui,sans-serif;letter-spacing:.3px;color:var(--mo-accent, #0a5c3a);white-space:nowrap;
}
#marketing-view .hero__cred .hc-more{
  display:inline-flex;align-items:center;gap:6px;
  font:700 12px/1 Inter,system-ui,sans-serif;color:var(--mo-accent, #087443);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--mo-accent, #087443) 65%, transparent);padding-bottom:2px;transition:gap .2s ease;
}
#marketing-view .hero__cred .hc-more:hover{gap:10px;border-bottom-color:#087443;}
@media(max-width:860px){
  #marketing-view .hero__cred{max-width:none;margin-top:18px;padding:16px 16px;}
  #marketing-view .hero__cred .hc-lead{font-size:12.5px;}
}
@media(prefers-reduced-motion:reduce){#marketing-view .hero__cred .hc-more{transition:none;}}

/* The Loan Lab card runs ~1078px against a 855px left column, so ~240px of
   void is left even with the credential panel in place. Rather than padding
   it out with content nobody asked for, the column follows you down while
   you read the long card. The hero stays two-column down to 640px
   (landing-value.css:30), so sticky starts there too: at 861px there was a
   641-860px window where the columns sat side by side and the short one just
   left a void -- which is the width a tablet actually reports. Below 640px
   the grid is a single column,
   where sticky would pin the headline over the calculator. */
@media(min-width:901px){
  /* .hero carries overflow:hidden to clip the haikei background SVG, which
     makes it a scroll container and stops sticky working. overflow:clip
     clips identically without creating one (body already relies on clip). */
  #marketing-view #hero.ml-hero{overflow:clip;}
  #marketing-view .hero__inner>.hero__content{position:sticky;top:26px;align-self:start;}
}

/* NOTHING ADDS .wa-tucked ANY MORE. The scroll watcher in loan-explainer.js
   that used to put it on while the reader scrolled down was removed on
   24 Oct 2026 ("whatsapp hamesha dikhe") — it made the contact button
   invisible for the entire reading journey. The rule is kept, unreferenced,
   so that putting the behaviour back is one line in the JS rather than a
   rewrite; the transition below is still live and still smooths the hover
   and shadow. If you ever re-add the class, read that note first. */
.whatsapp-float{transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,box-shadow .25s ease;}
.whatsapp-float.wa-tucked{transform:translateY(130%) scale(.85);opacity:0;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:opacity .01ms;}.whatsapp-float.wa-tucked{transform:none;}}

/* At 641-900px the hero was two 317px columns: too narrow for the Loan Lab
   calculator, and the short left column still left ~292px of void under the
   credential panel even with sticky on. Below 901px the hero stacks instead,
   which gives the calculator full width and removes the gap entirely. */
@media(max-width:900px){
  #marketing-view .ml-hero .hero__inner{grid-template-columns:1fr;gap:28px;}
  #marketing-view .hero__inner>.hero__content{position:static;}
}

/* ── No horizontal scroll, at any width ───────────────────────────────────
   The five steps were a swipe rail below 860px. A rail hides four of five
   cards behind a gesture nobody is told about, and the owner was right that
   scrolling sideways to read a five-step explanation is work, not design.
   They now wrap: three across on tablet, stacked on phone. Nothing hidden,
   no sideways scroll anywhere. */
@media(max-width:860px){
  #marketing-view .ml-explain-steps{
    display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
    overflow:visible;padding:0;margin:0;scroll-snap-type:none;
  }
  #marketing-view .ml-explain-steps .xs-step{flex:initial;max-width:none;}
  /* The two closing steps carry the argument, so they get full width. */
  #marketing-view .ml-explain-steps .xs-step--warn,
  #marketing-view .ml-explain-steps .xs-step--final{grid-column:1/-1;}
}
@media(max-width:560px){
  #marketing-view .ml-explain-steps{grid-template-columns:1fr;}
}

/* ── The cost bars: proportion, not just totals ───────────────────────────
   Showing only total interest hides the thing that matters — how much of
   what you hand back is interest. Each bar is the FULL repayment, scaled
   against the longest tenure, with the interest share in red at the end.
   Three years and five years are then comparable at a glance. */
.story-cost-row{display:grid;grid-template-columns:62px 1fr auto auto;align-items:center;gap:10px;margin-bottom:10px}
.story-cost-row>span{font:700 11px/1.3 var(--font-sans),sans-serif;color:var(--refresh-muted)}
.story-cost-bar{position:relative;height:16px;border-radius:8px;background:var(--refresh-line);overflow:hidden;
  width:calc(var(--w) * var(--story-reveal,1));transition:width .9s cubic-bezier(.3,.9,.3,1)}
.story-cost-bar i{position:absolute;inset:0;background:#1a7a4a}
.story-cost-bar b{position:absolute;top:0;bottom:0;right:0;width:var(--int);background:var(--cost-red-bar-auto, #B3261E)}
.story-cost-row>strong{font:800 13px/1 var(--font-sans),sans-serif;color:var(--refresh-ink);font-variant-numeric:tabular-nums}
.story-cost-row>em{font:800 12px/1 var(--font-sans),sans-serif;color:var(--cost-red-auto, #B3261E);font-style:normal;font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
.story-label em{font-style:normal;font-weight:700;color:var(--cost-red-auto, #B3261E)}
.story-cost-key{display:flex;gap:16px;margin:12px 0 0;font-size:10.5px!important;color:var(--refresh-muted)}
.story-cost-key span{display:inline-flex;align-items:center;gap:6px}
.story-cost-key span::before{content:"";width:12px;height:8px;border-radius:2px}
.story-cost-key .k-p::before{background:#1a7a4a}
.story-cost-key .k-i::before{background:var(--cost-red-bar-auto, #B3261E)}
@media(max-width:560px){
  .story-cost-row{grid-template-columns:52px 1fr auto;gap:8px}
  .story-cost-row>em{grid-column:2/-1;text-align:left;min-width:0}
}

/* ── Founder block placement ──────────────────────────────────────────────
   It sat immediately under the two CTAs, so the eye went
   headline -> buttons -> a face, and the face read as a third call to
   action. Credentials are supporting evidence, not a next step: they get a
   rule above them and clear air, so the CTAs finish before the proof
   begins. */
#marketing-view .ml-founder{
  margin-top:var(--mo-s6,32px);
  padding-top:var(--mo-s5,24px);
  border-top:1px solid var(--refresh-line);
  gap:12px;
}
#marketing-view .hero__cred{margin-top:14px}
@media(max-width:640px){
  #marketing-view .ml-founder{margin-top:24px;padding-top:18px}
}

/* The .mn-proof block that stood here was retired the same day it was
   written. It was this content in a thin strip with no heading, and it
   read as leftovers — see #marketing-view .mn-who in
   homepage-refresh.css, which replaced it with a section that states
   its own job. The .ml-founder and .hero__cred rules ABOVE are still
   live and still style the two blocks inside it. */

/* ── Membership: the free offer, revealed on scroll ───────────────────────
   This section is the strongest thing on the page and it sat completely
   still — a wall of six bullets the eye slid off. It now arrives in order
   as you scroll, driven by --ms-p, so each thing you get lands one at a
   time instead of all at once.

   On the colour: the owner asked for "Free" to run red → green. I put the
   RED on the struck-through ₹249 instead — red on "Free" reads as cost or
   danger, which is backwards. The price you are not paying is the red; the
   word Free lands in brand green. Same drama, correct meaning. */

/* The headline sweeps as it arrives. */
#marketing-view .ml-membership #ml-member-title{
  background-image:linear-gradient(100deg,
    var(--mo-text,#082c24) 0%, var(--mo-text,#082c24) 38%,
    var(--mo-green-400,#18C979) 50%,
    var(--mo-text,#082c24) 62%, var(--mo-text,#082c24) 100%);
  background-size:300% 100%;
  background-position:calc(140% - var(--ms-p,0) * 160%) 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* The price you are NOT paying. */
#marketing-view .ml-membership .ml-price-was s{
  color:#B3261E;
  opacity:calc(0.35 + var(--ms-p,0) * 0.65);
  text-decoration-thickness:2px;
}

/* Free: scales up into place and settles on brand green. */
#marketing-view .ml-membership .ml-free{
  display:inline-block;
  transform:scale(calc(0.72 + var(--ms-free,0) * 0.28));
  transform-origin:left center;
  /* The word travels from a warm amber to brand green as it scales up.
     It used to start at 8deg — a red — which meant a reader who stopped
     mid-travel was looking at the site's cost colour on the word "Free".
     Starting at 38deg keeps the whole journey in warm-to-green and never
     passes through red. --ms-free now reaches 1 inside the first quarter
     of the runway, so the in-between is brief by design. */
  color:hsl(
    calc(38deg + var(--ms-free,0) * 110deg)
    calc(66% + var(--ms-free,0) * 8%)
    calc(44% - var(--ms-free,0) * 4%));
  will-change:transform;
}

/* Each benefit arrives in turn, and grows very slightly as it lands so the
   eye is pulled down the list rather than dropped at the top of it.

   Two things make it read as a line switching ON rather than being dragged
   on by the scrollbar:

     · the LATCH. loan-explainer.js adds .ml-li-on once a line is half way
       through its window and never takes it off. --li then goes to 1 on its
       own, so a reader who stops scrolling mid-list never leaves a line
       stranded at a third of its brightness.
     · the TRANSITION lives on .ml-li-on only. While the line is still being
       scrubbed by scroll there must be no transition at all, or every frame
       of the scroll would chase the previous one and the whole list would
       smear. The moment the class lands, the same properties get an easing
       and finish the last of the move by themselves. */
#marketing-view .ml-membership .ml-plan ul li{
  --li-t:var(--li, 0);
  opacity:calc(0.34 + var(--li-t) * 0.66);
  transform:translateY(calc((1 - var(--li-t)) * 12px)) scale(calc(0.988 + var(--li-t) * 0.012));
  transform-origin:left center;
}
#marketing-view .ml-membership .ml-plan ul li.ml-li-on{
  --li-t:1;
  transition:opacity .34s cubic-bezier(.2,.85,.25,1),
             transform .42s cubic-bezier(.2,.85,.25,1);
}

/* The highlight itself. Before a line arrives its lead-in is the same muted
   grey as the rest of it; on arrival the lead-in snaps to full ink and the
   bullet to brand green. That contrast step is the part that reads as "this
   one, now" — opacity alone was too soft to register as a highlight. */
#marketing-view .ml-membership .ml-plan ul li strong{
  color:color-mix(in srgb, var(--mo-text,#082c24) calc(var(--li-t) * 100%), var(--refresh-muted,#5a7366));
  transition:color .3s ease;
}
@supports not (color: color-mix(in srgb, red, blue)){
  #marketing-view .ml-membership .ml-plan ul li strong{color:var(--mo-text,#082c24);}
}
#marketing-view .ml-membership .ml-plan ul li::marker{
  color:color-mix(in srgb, var(--refresh-green,#1FA463) calc(var(--li-t) * 100%), var(--refresh-line,#CFDFD5));
}

@media(prefers-reduced-motion:reduce){
  #marketing-view .ml-membership #ml-member-title{background:none;-webkit-text-fill-color:currentColor;color:var(--mo-text,#082c24)}
  #marketing-view .ml-membership .ml-free{transform:none;color:var(--mo-green-700,#087443)}
  #marketing-view .ml-membership .ml-price-was s{opacity:1}
  #marketing-view .ml-membership .ml-plan ul li,
  #marketing-view .ml-membership .ml-plan ul li.ml-li-on{--li-t:1;opacity:1;transform:none;transition:none}
}

/* The interest figure inside step 03. It was the same muted grey as the
   sentence around it, so the one number the step exists to point at read as
   ordinary prose. #B3261E measures 6.17:1 on the card's white ground, and
   lightens in dark mode via --mo-bad so it stays legible on both. */
#marketing-view .ml-explain-steps .xs-interest{
  color:var(--mo-bad, #B3261E);
  font-weight:700;
}

/* ── THE HERO IS ONE COLUMN NOW, AND THE LAB HAS ITS OWN ROOM ─────────────
   24 Oct 2026. The Loan Lab was the right-hand track of .hero__inner; with
   it gone, a two-column grid would leave half the hero empty, so the grid
   collapses to one. Several files declare that grid — homepage-refresh.css,
   motion-graphics.css and this one — so this sits at the end of the last of
   them, at #marketing-view .ml-hero .hero__inner, which outranks all of
   them and does not need !important to do it.

   The text gets a max-width because a single column in a 1136px container
   would otherwise set the headline and the promise across the full width,
   and a line of body copy that long is tiring to read. */
#marketing-view .ml-hero .hero__inner{
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
#marketing-view .ml-hero .hero__content{ max-width:720px; }
/* The sticky rule existed so the text stayed put while the tall card beside
   it scrolled. There is nothing beside it now, and a sticky element in a
   one-column hero just lags behind the scroll. */
@media(min-width:901px){
  #marketing-view .hero__inner>.hero__content{ position:static; }
}

#marketing-view .ml-lab{
  padding-block:clamp(38px,5vw,70px);
  background:var(--refresh-bg);
  border-bottom:1px solid var(--refresh-line);
}
#marketing-view .ml-lab__inner{ max-width:760px; margin-inline:auto; }
/* It was built to sit in half a column; given a section it can breathe,
   but not sprawl — the repayment curve stops being readable much past this. */
#marketing-view .ml-lab .ml-demo{ max-width:none; margin-inline:auto; }