/* The real Montserrat Arm family, one face per weight the design calls for.
   Previously Light and Medium were faked with Regular and SemiBold. */
@font-face{font-family:'Montserrat arm';src:url('../fonts/Montserratarm-ExtraLight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat arm';src:url('../fonts/Montserratarm-Light.woff2')      format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat arm';src:url('../fonts/Montserratarm-Regular.woff2')    format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat arm';src:url('../fonts/Montserratarm-Medium.woff2')     format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat arm';src:url('../fonts/Montserratarm-SemiBold.woff2')   format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat arm';src:url('../fonts/Montserratarm-Bold.woff2')       format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --brand:#f6935b;            --gray50:#fafafa;
  --text-primary:#181d27;     --text-quaternary:#717680;
  --utility-gray-400:#a4a7ae; --title:#201717;
  --radius-md:8px; --radius-2xl:16px; --radius-xs:4px;
  --sp-xxs:2px; --sp-xs:4px; --sp-sm:6px; --sp-md:8px; --sp-lg:12px; --sp-xl:16px; --sp-3xl:24px;
  --card-shadow:114px 197px 64px 0 rgba(156,156,156,0), 73px 126px 58px 0 rgba(156,156,156,.01),
                41px 71px 49px 0 rgba(156,156,156,.05), 18px 32px 36px 0 rgba(156,156,156,.09),
                5px 8px 20px 0 rgba(156,156,156,.1);
}
*{box-sizing:border-box}
/* several card parts are display:flex, which would otherwise win over the
   browser's [hidden] rule and keep them on screen */
[hidden]{display:none!important}

/* The family lives on the block, not on body: the site's own stylesheet sets
   body{font-family:'MyFont' !important}, which inheritance cannot beat. */
.mainplan,.mainplan .frame{font-family:'Montserrat arm',system-ui,sans-serif}

/* The site header is fixed and would sit on top of the plan, so it steps aside
   while the map is passing behind it and comes back once the map is gone.
   Only opacity and transform change — layout and hit-testing stay put. */
.headerStatic{transition:opacity .25s ease, transform .25s ease}
.headerStatic.is-map-hidden{opacity:0;transform:translateX(-50%) translateY(-150%);pointer-events:none}

/* The design is authored at a fixed 1440x688; scale the whole stage so every
   distance stays exactly as drawn instead of re-flowing at other widths. */
.mainplan .frame{width:100%;overflow:hidden}
.mainplan .stage{width:1440px;height:688px;position:relative;transform-origin:top left;
  border-radius:2px;overflow:hidden}
.mainplan #gardenMap{position:absolute;inset:0;width:1440px;height:688px;display:block}

/* ---------- plot interaction (ours) ---------- */
.mainplan .plot{
  fill:#fff; fill-opacity:0; stroke:none; stroke-width:1px;
  pointer-events:all;              /* fill-opacity:0 alone can miss the cursor */
  cursor:pointer;
  transition:fill .18s ease, fill-opacity .18s ease, stroke .18s ease;
}
.mainplan .plot.is-hover{fill:rgba(255,255,255,.33);fill-opacity:1;stroke:#FFF;stroke-width:1px}
.mainplan .plot.is-selected{fill:rgba(246,147,91,.50);fill-opacity:1;stroke:#F6935B;stroke-width:1px}
/* the eight commercial blocks are reachable only through the bottom navigation */
.mainplan .plot.is-block{pointer-events:none;cursor:default}
/* houses held back until their specs and price arrive — inert entirely */
.mainplan .plot.is-off{pointer-events:none;cursor:default}
/* The "Վաճառված տները" switch tints every plot that is already taken. While it is
   on, that red is the only thing driving a sold plot's fill: hovering or picking
   one must not repaint it, which is why this rule deliberately outranks
   .is-hover and .is-selected instead of stepping aside for them. Figma 1177:32769
   shows exactly that — a sold house is selected there and stays red on the map,
   with the card on the right carrying the selection instead. */
.mainplan .stage.show-sold .plot.is-sold{
  fill:#FF7373;fill-opacity:.43;stroke:#FF7373;stroke-width:1px;
}

/* ---------- top-left counters ---------- */
.mainplan .stats{position:absolute;left:24px;top:16px;display:flex;flex-direction:column;gap:0}
.mainplan .statRow{display:flex;gap:var(--sp-sm);align-items:center;padding:var(--sp-md);border-radius:var(--radius-md)}
.mainplan .statRow.blur{backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}
.mainplan .statNum{width:46px;height:34px;display:flex;align-items:center;
  font-weight:500;font-size:32px;line-height:1.7;color:#4a4a4a}
.mainplan .statDiv{width:0;height:17px;border-left:1px solid #d5d7da}
.mainplan .statLabel{width:130px;font-weight:300;font-size:12px;line-height:1.24;color:#4a4a4a}

/* ---------- "Վաճառված տները" switch (Figma 1177:38658) ----------
   167x36 with no fill of its own: it only blurs the map behind it. */
.mainplan .soldToggle{position:absolute;left:880px;top:24px;width:167px;height:36px;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-xs);
  padding:var(--sp-lg);border:0;background:transparent;border-radius:var(--radius-md);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer}
.mainplan .soldToggleLabel{font-size:10px;font-weight:400;line-height:normal;
  color:#717680;white-space:nowrap}
.mainplan .soldToggleTrack{flex:0 0 auto;width:36px;height:20px;display:flex;align-items:center;
  padding:var(--sp-xxs);background:#f5f5f5;border-radius:9999px;overflow:hidden;
  transition:background .18s ease}
.mainplan .soldToggleKnob{width:16px;height:16px;border-radius:9999px;background:#fff;
  box-shadow:0 1px 3px 0 rgba(10,13,18,.1),0 1px 2px -1px rgba(10,13,18,.1);
  transition:transform .18s ease}
.mainplan .soldToggle[aria-checked="true"] .soldToggleTrack{background:var(--brand)}
.mainplan .soldToggle[aria-checked="true"] .soldToggleKnob{transform:translateX(16px)}

/* Figma's "Comertion" element is not decoration: it is the selected state of
   plot-185, same 24x27 box at the same 112,590. Drawing it statically made the
   map look pre-selected, so it is gone — clicking Սյունար paints it instead. */

/* ---------- card ---------- */
.mainplan .mpCard{position:absolute;top:24px;left:1073px;width:343px;
  display:flex;flex-direction:column;gap:var(--sp-xl);
  /* outline, not border: Figma's 0.5px stroke sits on top of the 343px box
     rather than eating into it, so the rows stay a full 311px wide.
     border:0 also undoes Bootstrap, which is loaded site-wide. */
  padding:var(--sp-xl);background:#fff;border:0;outline:.5px solid #fff;outline-offset:-.5px;
  border-radius:var(--radius-2xl);
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  box-shadow:var(--card-shadow);overflow:hidden}
.mainplan .cardTop{display:flex;flex-direction:column;gap:var(--sp-3xl);width:100%}
.mainplan .heroWrap{position:relative;width:311px;height:123px}
.mainplan .hero{width:311px;height:123px;border-radius:var(--radius-md);object-fit:cover;display:block}
/* status pill sits 11.5px inside the image — Figma places it at 27.5 from the
   card edge, and the card has 16px of padding */
.mainplan .badge{position:absolute;left:11.5px;top:11.5px;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-sm) 12px;border-radius:var(--radius-xs);background:#72b46c;
  color:#fff;font-weight:500;font-size:12px;line-height:16px;white-space:nowrap}
/* The pill is also baked into town-hero.webp and house-hero.webp, as the
   Armenian "Հասանելի". The live pill has to cover it, and it only did while the
   text was Armenian too — at 78px the Russian "Доступно" left the tail of the
   baked word sticking out to its right. Pinning the live pill to the same
   fractions of the image the baked one occupies makes it cover in every
   language and at every card width. Remove once the renders are re-exported
   without the pill. */
.mainplan .badge{left:3.86%;top:9.76%;min-width:31.03%;min-height:22.36%}
.mainplan .badge[data-status="sold"]{background:#ff6868}
.mainplan .cardBody{display:flex;flex-direction:column;gap:16px;width:100%}
.mainplan .titleRow{display:flex;align-items:center;justify-content:space-between;width:100%}
.mainplan .titleL{display:flex;align-items:center;gap:var(--sp-md)}
/* Figma gives the title row a flat 24px: without a fixed line-height the plot
   card's 20px title box grows to ~30px and the card ends up 6px taller than the
   park and category cards, so the panel jumps when you switch between them. */
.mainplan .cardTitle{margin:0;font-weight:600;font-size:20px;line-height:24px;letter-spacing:.2px;color:var(--title);white-space:nowrap}
.mainplan .tDiv{width:1px;height:12px;background:#d5d7da;flex:none}
.mainplan .cardNum{font-weight:700;font-size:12px;line-height:16px;color:#d5d7da;text-transform:uppercase;white-space:nowrap}
.mainplan .cardArea{font-size:20px;line-height:24px;color:var(--brand);white-space:nowrap}
.mainplan .cardArea b{font-weight:700}
.mainplan .cardArea span{font-weight:400}

/* amenity cards: two photos stacked, then title and a paragraph, button pinned
   to the bottom of a fixed-height card */
.mainplan .catPics{display:flex;flex-direction:column;gap:var(--sp-xl)}
.mainplan .catPics img{width:311px;height:123px;border-radius:var(--radius-md);object-fit:cover;display:block}
/* Սյունար uses one brand plate instead of two photos */
.mainplan .catPics.square img{height:262px}
.mainplan .catText{margin:0;font-weight:300;font-size:12px;line-height:1.69;color:var(--utility-gray-400)}
.mainplan .mpCard.is-category{height:551px}
/* the collapse control and the collapsed summary row exist only on phones */
.mainplan .mpToggle,.mainplan .mpBrief{display:none}
.mainplan .mpCard.is-category .cardTop{flex:1 0 0;min-height:0}
.mainplan .mpCard.is-category .cardBody{gap:var(--sp-lg)}

/* 82px so a taken plot's card is exactly as tall as one showing a price */
.mainplan .soldNote{display:flex;align-items:center;justify-content:center;width:100%;min-height:82px;
  padding:var(--sp-lg);background:var(--gray50);border-radius:var(--radius-md);
  font-weight:400;font-size:13px;line-height:1.4;color:#414651;text-align:center}
.mainplan .specs{display:flex;flex-direction:column;gap:var(--sp-sm);width:100%}

.mainplan .spec{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:var(--sp-md) var(--sp-lg);background:var(--gray50);border-radius:var(--radius-md);
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}
.mainplan .specL{display:flex;align-items:center;gap:var(--sp-xs)}
.mainplan .specIco{position:relative;width:20px;height:20px;flex:none;overflow:hidden}
.mainplan .specIco img{position:absolute;width:auto;height:auto;display:block}
/* icons without a per-icon inset simply fill the 20px frame */
.mainplan .specIco img.fit{inset:0;width:100%;height:100%;object-fit:contain}
.mainplan .specLabel{margin:0;font-weight:300;font-size:12px;line-height:1.69;color:var(--utility-gray-400);white-space:nowrap}
/* 24px, not 1.69em: it makes each spec row exactly the 40px Figma draws */
.mainplan .specV{display:flex;align-items:center;gap:var(--sp-xs);font-weight:500;line-height:24px;
  color:var(--text-primary);white-space:nowrap}
.mainplan .specV .v{font-size:14px}
.mainplan .specV .u{font-size:10px}

.mainplan .highlight{position:relative;display:flex;flex-direction:column;gap:var(--sp-xxs);
  justify-content:center;padding:var(--sp-lg);background:var(--gray50);
  border-radius:var(--radius-md);width:100%}
.mainplan .highlight .hl{margin:0;font-weight:300;font-size:12px;line-height:1.69;color:#414651}
.mainplan .highlight .hv{width:230px;height:36px;display:flex;align-items:center;
  font-weight:600;color:var(--brand);line-height:1.69}
.mainplan .highlight .hv .big{font-size:32px}
.mainplan .highlight .hv .sm{font-size:12px}
/* pinned to the right edge so it sits correctly whatever the label's width */
.mainplan .chip{position:absolute;right:12px;top:12px;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-xxs) var(--sp-md);background:#fff;border-radius:var(--radius-xs);
  font-weight:300;font-size:9px;line-height:1.69;color:#6c6c6c;white-space:nowrap}

.mainplan .cta{width:100%;height:40px;display:flex;align-items:center;justify-content:center;gap:4px;
  padding:var(--sp-md) 12px;background:var(--brand);border:0;border-radius:var(--radius-md);
  color:#fff;font-family:inherit;font-weight:500;font-size:12px;line-height:16px;
  cursor:pointer;overflow:hidden}
.mainplan .cta:disabled{background:#f2f4f6;color:#b6bcc4;cursor:not-allowed}

/* ---------- bottom navigation ---------- */
.mainplan .mapnav{position:absolute;top:632.47px;left:50%;transform:translateX(-50%);
  display:flex;gap:var(--sp-lg);align-items:center}
.mainplan .navBtn{display:flex;align-items:center;justify-content:center;gap:4px;height:36px;padding:12px;
  border:0;border-radius:6px;background:#fff;cursor:pointer;
  backdrop-filter:blur(8.15px);-webkit-backdrop-filter:blur(8.15px);
  font-family:inherit;font-weight:400;font-size:10px;color:var(--text-quaternary);white-space:nowrap}
.mainplan .navBtn.is-active{background:var(--brand);color:#fff}
/* Bootstrap's reboot puts a black ring on any focused <button>, which read as a
   border after every click. Bootstrap is linked after this file, so a bare
   button:focus would lose on source order — the html prefix outranks it.
   Deliberately global: every button on the page, not just the map's. */
html button:focus,html button:focus-visible{outline:none;box-shadow:none}
.mainplan .navIco{position:relative;width:14px;height:14px;flex:none;overflow:hidden}
.mainplan .navIco img{position:absolute;width:auto;height:auto;display:block}
/* Icons ship in #717680. Figma has a white copy only for the active button, so
   recolour instead — any button can then be the active one. */
.mainplan .navBtn.is-active .navIco img{filter:brightness(0) invert(1)}


/* =====================================================================
   Phone layout — Figma 1390:3438 and siblings (375x844).
   The plan turns a quarter-turn to fill a portrait screen: 1440x688 rotated
   is 688x1440, and 375/688 scales it to exactly 375x784.9 — the height the
   frame is drawn at. fit() applies that transform to the <svg> only, so the
   counters, switch, card and nav keep screen coordinates and normal type
   sizes instead of being scaled to 26% with the rest of the stage.
   ===================================================================== */
@media (max-width: 768px){
  .mainplan .frame{overflow:hidden}
  /* pan-y hands vertical page scrolling to the browser but keeps the pinch for
     the map's own handler; once zoomed, one finger drags the map instead, so the
     browser must not claim the gesture at all */
  .mainplan .stage{width:100%;transform:none;border-radius:0;touch-action:pan-y}
  .mainplan .stage.is-zoomed{touch-action:none}
  /* the chip strip scrolls sideways whatever the map is doing */
  .mainplan .mapnav{touch-action:pan-x}
  .mainplan #gardenMap{transform-origin:0 0}

  /* counters collapse into one white pill across the top */
  /* shrink-to-fit, not full width — the switch shares this row */
  /* Figma 1390:3471 draws this row 22px tall: 14px of content inside 4px of row
     padding, with the pill adding nothing vertically of its own. */
  .mainplan .stats{left:12px;right:auto;top:12px;flex-direction:row;align-items:center;
    gap:0;width:auto;max-width:calc(100% - 24px);padding:0 4px;background:#fff;
    border-radius:var(--radius-md);box-shadow:0 1px 3px rgba(10,13,18,.1)}
  .mainplan .statRow{gap:var(--sp-xs);padding:4px 6px;border-radius:0}
  .mainplan .statRow.blur{backdrop-filter:none;-webkit-backdrop-filter:none}
  .mainplan .statRow + .statRow{border-left:1px solid #d5d7da}
  .mainplan .statNum{width:auto;height:auto;font-size:14px;line-height:14px}
  /* 8px, not the 9 this started at: Figma draws these labels 67px wide and the
     real Montserrat Arm needs the smaller step to land there */
  .mainplan .statLabel{width:auto;font-size:8px;line-height:10px;white-space:nowrap}
  .mainplan .statDiv{display:none}

  /* the switch rides in the same top row, pinned right */
  /* No plate of its own, same as the desktop switch: the design floats the label
     and the track straight over the plan and only blurs what is behind them. The
     white background and shadow this used to carry were an invention. */
  .mainplan .soldToggle{left:auto;right:12px;top:12px;width:auto;height:22px;
    gap:var(--sp-sm);padding:4px 6px;background:transparent;border-radius:var(--radius-md);
    box-shadow:none}
  .mainplan .soldToggleLabel{font-size:12px;white-space:nowrap;text-align:right;line-height:16px}
  .mainplan .soldToggleTrack{width:32px;height:20px}
  .mainplan .soldToggleKnob{width:16px;height:16px}
  /* travel is the track's inner width less the knob: 32 - 2*2 padding - 16 = 12 */
  .mainplan .soldToggle[aria-checked="true"] .soldToggleKnob{transform:translateX(12px)}

  /* category chips become a horizontal scroller along the bottom */
  .mainplan .mapnav{top:auto;bottom:12px;left:0;right:0;transform:none;
    gap:var(--sp-md);padding:0 12px;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mainplan .mapnav::-webkit-scrollbar{display:none}
  .mainplan .navBtn{flex:0 0 auto;height:36px;padding:10px;border-radius:var(--radius-md);font-size:10px}

  /* the card stops floating beside the map and becomes a sheet above the chips.
     overflow is visible because the collapse control sits half outside the top
     edge, exactly as Figma draws it. */
  /* 343 is the width Figma draws the phone card at; capping it keeps the hero at
     319 on wider phones and tablets instead of letting it grow to 700+, which
     the status pill below is sized against. margin:auto centres the capped box
     between the two offsets. */
  .mainplan .mpCard{top:auto;bottom:60px;left:16px;right:16px;width:auto;
    max-width:343px;margin-inline:auto;
    gap:var(--sp-lg);padding:var(--sp-lg);border-radius:var(--radius-2xl);overflow:visible}
  .mainplan .mpCard.is-category{height:auto}
  /* The desktop card is a fixed 551px tall, and that definite height is what lets
     flex:1 0 0 hand .cardTop the leftover space. Here the card is height:auto, so
     the same rule resolves a 0 basis against nothing and collapses .cardTop to 0px
     — the photos, title and copy then spill out and get clipped, which left ten of
     the eleven category cards showing nothing but a 76px sliver. */
  .mainplan .mpCard.is-category .cardTop{flex:0 1 auto}
  .mainplan .heroWrap,.mainplan .hero{width:100%;height:auto;aspect-ratio:311/123}
  .mainplan .catPics img{width:100%;height:auto;aspect-ratio:311/123}
  .mainplan .catPics.square img{aspect-ratio:311/262}
  .mainplan .cardTop{gap:var(--sp-lg)}
  .mainplan .cardTitle{font-size:16px;line-height:20px}
  .mainplan .cardArea{font-size:16px;line-height:20px}
  .mainplan .catText{font-size:11px}
  .mainplan .highlight .hv{width:auto;height:auto}
  .mainplan .highlight .hv .big{font-size:24px}
  /* The desktop rule pins .soldNote to 82px, the height the price block happens to
     be there. Here the price is set at 24px, so that block grows to 87 and a taken
     plot's card came out 5px shorter than a free one — the panel jumped when you
     stepped between them. Pin both to the same number instead of one to the other. */
  .mainplan .highlight,.mainplan .soldNote{min-height:87px}

  /* Figma 1349:16804 draws the expanded rows as plain text: the grey plate and
     the leading icon are desktop-only decoration. */
  .mainplan .specs{gap:0}
  .mainplan .spec{padding:var(--sp-xs) 0;background:transparent;border-radius:0;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .mainplan .specIco{display:none}
  .mainplan .specLabel{font-size:13px}
  .mainplan .specV .v{font-size:15px}
  .mainplan .specV .u{font-size:11px}

  /* ---------- collapse / expand (Figma "CaretUp" 1390:3686) ---------- */
  .mainplan .mpToggle{display:block;position:absolute;right:12px;top:-12px;z-index:99;
    width:32px;height:32px;padding:0;border:0;background:transparent;line-height:0;cursor:pointer}
  .mainplan .mpToggle svg{display:block;transition:transform .2s ease}
  /* the chevron points up while collapsed and flips once the card is open */
  .mainplan .mpCard:not(.is-collapsed) .mpToggle svg{transform:rotate(180deg)}

  /* ---------- collapsed card: one 97px row (Figma 1390:3674) ---------- */
  .mainplan .mpCard.is-collapsed{padding:var(--sp-lg)}
  .mainplan .mpCard.is-collapsed .cardTop,
  .mainplan .mpCard.is-collapsed .highlight,
  .mainplan .mpCard.is-collapsed .soldNote,
  .mainplan .mpCard.is-collapsed .cta{display:none}
  .mainplan .mpCard.is-collapsed .mpBrief{display:flex}
  .mainplan .mpBrief{gap:var(--sp-lg);align-items:center;width:100%}
  .mainplan .briefPic{flex:0 0 87px;width:87px;height:73px;display:block;
    border-radius:var(--radius-md);object-fit:cover;background:#f5f5f5}
  /* town-hero.webp ships with a green "Հասանելի" pill baked into its top-left
     corner. On the expanded card the live .badge lands exactly on top of it, so
     it has never been visible; here the render is re-cropped to 87x73 and the
     baked pill would show through — and read as green even on a sold plot.
     Framing the crop to the right edge drops it and still centres the house. */
  .mainplan .briefPic.is-plot{object-position:100% 50%}

  /* Same defect on the expanded card. The baked pill is a fixed fraction of the
     render — 193x55 at 24,24 in a 622x246 image — so it grows with the card,
     while the live pill is a fixed 92x28 (112.5 when it reads "Վաճառված է").
     They coincide only at the 311px hero the render was exported for, which is
     desktop; on phones the baked green leaks out under and beside the red one.
     Pinning the live pill to those same fractions makes it cover at any width.
     Remove this block once town-hero.webp is re-exported without the pill. */
  /* the pill's cover-up now lives on the base rule, for every width */
  .mainplan .briefBody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--sp-xs)}
  .mainplan .briefBadge{align-self:flex-start;padding:var(--sp-sm) 12px;border-radius:var(--radius-xs);
    background:#72b46c;color:#fff;font-weight:500;font-size:12px;line-height:16px;white-space:nowrap}
  .mainplan .briefBadge[data-status="sold"]{background:#ff6868}
  .mainplan .briefNum{font-weight:700;font-size:12px;line-height:16px;color:#d5d7da;
    text-transform:uppercase;white-space:nowrap}
  /* Figma draws this row with "Թաունհաուս", which fits beside the area. The longer
     "Առանձնատուն" does not, so the area drops to its own line rather than the
     title being cut to "Առանձնա…" — the drawn case still lays out as one row. */
  .mainplan .briefRow{display:flex;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:0 var(--sp-md)}
  .mainplan .briefTitle{margin:0;font-weight:600;font-size:20px;line-height:24px;
    letter-spacing:.2px;color:var(--title);white-space:nowrap}
  .mainplan .briefArea{flex:none;margin-left:auto;font-size:20px;line-height:24px;
    color:var(--brand);white-space:nowrap}
  .mainplan .briefArea b{font-weight:700}
  .mainplan .briefArea span{font-weight:400}
  /* two lines, then an ellipsis — the copy is longer than the row can show */
  .mainplan .briefText{margin:0;font-weight:300;font-size:12px;line-height:1.42;
    color:var(--utility-gray-400);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
}

/* The 12px switch label takes the toggle to 127px, and beside the 208px counters
   that needs 359px of the 375 the row is drawn for. Below 360 the two would
   overlap — an iPhone SE is 320 — so step both labels down just there. */
@media (max-width: 359px){
  .mainplan .statLabel{font-size:7px}
  .mainplan .soldToggleLabel{font-size:9px}
  .mainplan .statRow{padding:4px}
}