/*
 * Landing page — section layout only.
 *
 * Anything reusable lives in components.css. This file is the composition: how the
 * hero splits, how the calculator card is put together, and the handful of one-off
 * treatments the design calls for.
 */

/* -------------------------------------------------------------------------
 * Shared section furniture
 * ---------------------------------------------------------------------- */

.lb-section__title {
  margin-bottom: 6px;
}

.lb-section__title--spaced {
  margin-bottom: var(--space-8);
}

.lb-section__lede {
  margin-bottom: var(--space-8);
  max-width: 62ch;
}

.lb-section__note {
  margin: var(--space-6) 0 0;
  font-size: var(--text-body-sm);
  color: var(--ink);
}

.lb-card__text {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--ink);
}

.lb-card__title {
  margin-bottom: var(--space-3);
}

.lb-card__title--plain {
  color: var(--ink);
}

.lb-card__tag {
  justify-self: start;
}

.lb-icon--brand {
  color: var(--deep-green);
}

.lb-icon--amber {
  color: var(--amber-deep);
}

/* -------------------------------------------------------------------------
 * Hero — a Forest band carrying one object: the freight desk itself
 *
 * The band opens the page at full strength, as it always has. What changed is what
 * sits on it. The old hero ran a pitch column beside a narrow quote card, and the
 * pitch ran out of things to say a third of the way down, so the first screen was
 * half calculator and half hole.
 *
 * Now the band is composed in two moves. A quiet pitch row across the top — display
 * and lede, generous air to the right of them, nothing else. Then the calculator at
 * the full width of the container as a two-pane console: a Paper *deck* where the
 * shipment is described and the two weight candidates are worked out, and a Deep
 * Green *answer* pane where the winner is priced.
 *
 * Every device is one the system already owns: flat colour, 1px rules, translucent
 * white rules on the dark band, and tonal layering — Forest band, Paper deck, Deep
 * Green answer — doing the work a shadow would do in a system that allowed one.
 * ---------------------------------------------------------------------- */

.lb-hero {
  padding-block: var(--space-16) var(--space-20);
  /* The bars are hung off the band's own edges and run past them; the band is what
     crops them. isolation keeps the stacking context local, so the ornament can sit
     behind the container without any content on the page needing a z-index. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.lb-hero > .lb-container {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
 * Hero ornament — anchor tile
 *
 * One 80px SVG tile, inlined as a data URI and repeated. No extra request, no DOM, no
 * <img> to lay out: the ornament is a paint on a pseudo-element and costs the band one
 * composited layer.
 *
 * The motif is an anchor because half of what this company sells is sea freight — the
 * hero's own segmented control offers আকাশপথ and সমুদ্রপথ — so the surface carries the
 * page's subject rather than generic texture. The tile itself is --pattern-anchor in
 * tokens.css; the login screen paints the same one, and that is the point.
 *
 * At .05 the pattern is a surface, not an object, so it runs the whole band — edge to
 * edge and behind the pitch, which is where a surface belongs. White at 5% over Forest
 * lifts the ground to roughly #1A5544 under a tile stroke; the display type is solid
 * white over both, so the type's contrast never moves off the band's own ratio.
 * ---------------------------------------------------------------------- */

.lb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--pattern-anchor);
  background-repeat: repeat;
  background-size: 80px 80px;
}

/* Smaller tile on a phone, not a hidden one. The band is the same object at every
   width; what changes is that 80px repeats read as big shapes on a 390px screen, and
   64px keeps the rhythm of the desktop band. */
@media (max-width: 767px) {
  .lb-hero::before {
    background-size: 64px 64px;
  }
}

/* Centred over the instrument, not parked beside a hole. The calculator below runs
   the full 1080px of the container; a 680px pitch pinned left ended 400px short of
   its right edge, so the first screen read as an L with a dead top-right quadrant.
   Centring spends the same air symmetrically — the lockup sits on the instrument's
   vertical axis, and there is no edge left dangling. The measure itself is unchanged:
   this is where the block sits, not how wide the prose is allowed to run. */
.lb-hero__pitch {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
  text-align: center;
}

.lb-hero .lb-display {
  color: var(--white);
}

/* Brighter than the .8 the dark-band lede carries elsewhere, and on its own measure.
   It is doing more work here than a section lede does: it is the only prose between a
   52px display and a full-width instrument, and it now names what the price covers.
   The size stays on the ramp — the lift is colour and measure, not a new type step. */
.lb-hero__lede {
  margin: 0;
  font-size: var(--text-lede-lg);
  line-height: var(--lh-bangla);
  color: var(--text-on-dark-2);
  max-width: 48ch;
  /* balance, not pretty: this lede is three lines, which is what balance is for.
     pretty only defends the last line from a single-word widow and left the block
     reading long, long, short. */
  text-wrap: balance;
}

/* The tagline's two halves each take a line, because the break is the line the
   brand is written on. On a narrow phone that would manufacture a four-line display
   full of widows, so the halves rejoin one flow — and because they are elements
   rather than a <br>, the space between them survives the switch. */
.lb-hero__line {
  display: block;
}

@media (max-width: 480px) {
  .lb-hero__line {
    display: inline;
  }
}

@media (max-width: 767px) {
  .lb-hero {
    padding-block: var(--space-10) var(--space-12);
  }

  /* Centring is a desktop move: it exists to answer a 400px gap that only opens on a
     wide container. On a phone the container is the measure, so there is no gap to
     answer — and a five-line Bangla lede set centred is harder to read down than the
     same lines on a flush left edge. The block goes back to the page's default rag. */
  .lb-hero__pitch {
    justify-items: start;
    margin-bottom: var(--space-8);
    text-align: start;
  }
}


/* The h1 now carries the eyebrow and the display as two spans (hero.php says why). It
   takes over the pitch's own gap between them, and drops every heading default — the
   children set their own size, weight, leading and colour, so the h1 must add none. */
.lb-hero__title {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  font: inherit;
  letter-spacing: normal;
  color: inherit;
}

.lb-hero__title > .lb-overline,
.lb-hero__title > .lb-display {
  display: block;
}

/* A link on the Deep Green band: the lede's own colour, told apart by the underline
   rather than by a link blue that would fail contrast on this ground. */
.lb-hero__lede a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lb-hero__overline {
  margin: 0;
  /* Not amber. The band's one amber mark is the submit button, because that is what
     the Signal Scarcity Rule reserves it for — the single most important action.
     An overline is a label, and a second amber would spend the first one's meaning. */
  color: var(--text-on-dark-3);
}

/* -------------------------------------------------------------------------
 * Quick quote — the handoff
 *
 * The console's own grammar at a third of the size: a Deep Green header carrying what
 * this is and the one choice that changes what every number under it means, then a
 * Paper body carrying the carton and the button that goes and prices it.
 *
 * It is a plain GET form. There is no script on this page, so every state it has is a
 * state the browser gives it for free.
 *
 * Same devices as the instrument it hands off to — flat colour, a 1px translucent white
 * rule holding the object against the Forest band, 12px radius, 44px controls. Nothing
 * here is new vocabulary; it is the same object, smaller.
 * ---------------------------------------------------------------------- */

.lb-quickquote {
  border: var(--border-width) solid var(--rule-on-dark);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
}

/* Paper, not Deep Green — the same header the console has. Filling it dark was a real
   bug: .lb-segmented's track is a 3% green tint, which vanishes on Deep Green, and the
   inactive option's Muted label measured about 2.2:1 there. On Paper the track reads
   and the label passes, and the two controls are visibly the same object across the
   two pages, which is the point of borrowing the grammar at all. */
.lb-quickquote__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-width) solid var(--border-default);
}

.lb-quickquote__title {
  margin: 0;
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-semibold);
  color: var(--deep-green);
}

.lb-quickquote__mode {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

/* One row: what it weighs, how big it is, and the way out.
   `start`, not `end`: the dimension trio labels itself *underneath* each box, so its
   column is one line deeper than the weight field. Aligning the bottoms therefore
   pushed the weight input below the three it is meant to sit beside. Aligning the tops
   lines the controls up, because both columns carry the same label row above them. */
.lb-quickquote__body {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) minmax(0, 1.1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-6);
}

/* The button has no label of its own, so it carries an empty one — that keeps it level
   with the controls without a hard-coded offset that would drift the moment the label
   size or the field gap changes. */
.lb-quickquote__go {
  display: grid;
  gap: var(--space-2);
}

@media (max-width: 899px) {
  .lb-quickquote__body {
    grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  }

  .lb-quickquote__go {
    grid-column: 1 / -1;
    padding-bottom: 0;
  }
}

/* Below this the weight box and a three-cell carton cannot share a line without one of
   them becoming too narrow to read the number back. */
@media (max-width: 559px) {
  .lb-quickquote__body {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
  }

  .lb-quickquote__head {
    padding-inline: var(--space-5);
    justify-content: flex-start;
  }

  .lb-quickquote__mode {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
 * Under the strip — what happens next, and the second action
 * ---------------------------------------------------------------------- */

.lb-hero__after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.lb-hero__note {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-on-dark-2);
}

/* -------------------------------------------------------------------------
 * Ask AI — the last row of the first screen
 *
 * Four outbound links that open an assistant already pointed at this site. It is the
 * same vocabulary as everything else on the band and nothing new: the pill radius the
 * status pills use, the 36px small-control height, the ghost button's translucent
 * white border, and a wash on hover rather than a lift — nothing in this system moves
 * on hover.
 *
 * A rule above it, because this is a different kind of thing from the two rows it
 * follows: those price a carton and name what the next page does, this is another way
 * to read the page entirely. Same 16% hairline the band uses everywhere else.
 * ---------------------------------------------------------------------- */

/* Label and chips share one line while they fit and wrap together when they do not,
   so the wrapper carries the alignment and the list keeps its own wrapping. */
.lb-askai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--rule-on-dark);
}

.lb-askai__label {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--text-on-dark-3);
}

.lb-askai__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The quietest interactive object on the band: a 6% wash, a hairline that outlines a
   component rather than separating two, and the -2 text step. It has to read as
   clickable without competing with a 52px amber button two rows above it. */
.lb-chrome .lb-askai__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-sm);
  padding: 0 14px;
  border: var(--border-width) solid var(--rule-on-dark-strong);
  border-radius: var(--radius-full);
  background: var(--wash-on-dark-quiet);
  color: var(--text-on-dark-2);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}

.lb-chrome .lb-askai__chip:hover {
  background: var(--wash-on-dark);
  border-color: var(--ghost-border-on-dark-hover);
  color: var(--white);
  text-decoration: none;
}

/* White, for the same reason the ghost button's ring is: the system's Deep Green ring
   is invisible on Forest. */
.lb-chrome .lb-askai__chip:focus-visible {
  box-shadow: 0 0 0 var(--focus-width) var(--white);
}

/* The trademarks are filled, not stroked, so they carry no --stroke-icon and they
   inherit the chip's colour — which means they brighten with the label on hover
   instead of sitting at a fixed white the rest of the chip never matches. */
.lb-askai__mark {
  display: block;
  flex: none;
}

/* Below this the label and four chips cannot share a line, and a chip row that scrolls
   sideways hides its last two destinations. Stacking keeps all four visible. */
@media (max-width: 599px) {
  .lb-askai {
    gap: var(--space-3);
  }

  .lb-askai__label,
  .lb-askai__list {
    flex-basis: 100%;
  }
}

/* -------------------------------------------------------------------------
 * Trust strip
 * ---------------------------------------------------------------------- */

.lb-trust {
  border-block: var(--border-width) solid var(--border-default);
  padding-block: 28px;
}

/* -------------------------------------------------------------------------
 * Address
 * ---------------------------------------------------------------------- */

.lb-card__head-over {
  color: var(--text-on-dark-3);
}

.lb-card__head-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
}

.lb-address__foot {
  margin-top: var(--space-4);
  --lb-gap: 10px;
}

.lb-rule--ruled {
  border-top: var(--border-width) solid var(--border-default);
  padding-top: var(--space-4);
}

.lb-rule__title {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

/* -------------------------------------------------------------------------
 * Rates
 * ---------------------------------------------------------------------- */

.lb-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  justify-items: start;
}

.lb-tabs__panel,
.lb-tabs > * {
  min-width: 0;
}

.lb-tabs > .lb-segmented {
  margin-bottom: 0;
}

.lb-tabs__panel {
  width: 100%;
}

/* CSS-only tab switching, so the rate cards need no script and both are in the DOM. */
.lb-tabs:has(input[value="air"]:checked) .lb-tabs__panel[data-mode="sea"],
.lb-tabs:has(input[value="sea"]:checked) .lb-tabs__panel[data-mode="air"] {
  display: none;
}

.lb-rates__quote {
  margin-top: var(--space-6);
  --lb-gap: 14px;
}

.lb-rates__quote-title {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

/* -------------------------------------------------------------------------
 * Included / separate
 * ---------------------------------------------------------------------- */

.lb-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: var(--text-body-sm);
  color: var(--ink);
}

.lb-checklist__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lb-checklist__mark {
  color: var(--deep-green);
  margin-top: 3px;
}

.lb-checklist__dash {
  color: var(--muted);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Origins
 * ---------------------------------------------------------------------- */

.lb-origin__name {
  font-size: var(--text-lede);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.lb-origin__city {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--muted);
}

.lb-origin__transit {
  font-size: var(--text-small);
  color: var(--muted);
}

.lb-origin__status {
  justify-self: start;
  margin-top: var(--space-1);
}

/* -------------------------------------------------------------------------
 * Services
 * ---------------------------------------------------------------------- */

.lb-service {
  background: var(--paper);
  padding: var(--space-5);
}

/* Amber marks the one service worth stopping on. */
.lb-service--flagged {
  border-color: var(--signal-amber);
}

.lb-service__title {
  margin: 0;
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

/* -------------------------------------------------------------------------
 * Tracking
 * ---------------------------------------------------------------------- */

/* The ID field this section used to carry is gone — tracking is account-only, so the
   section now explains and links rather than collecting anything. */
.lb-track__example {
  margin-bottom: var(--space-4);
}

/* -------------------------------------------------------------------------
 * Audience
 * ---------------------------------------------------------------------- */

.lb-audience__title {
  margin: 0 0 6px;
  font-size: var(--text-lede);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

/* -------------------------------------------------------------------------
 * Insurance band
 * ---------------------------------------------------------------------- */

.lb-insurance {
  background: var(--surface-darker);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
}

.lb-insurance__title {
  margin-bottom: var(--space-2);
  color: var(--white);
}

.lb-insurance__lede {
  margin: 0 0 28px;
  font-size: var(--text-body-sm);
  color: var(--text-on-dark-3);
  max-width: 60ch;
}

.lb-insurance__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  color: var(--signal-amber);
}

.lb-insurance__body {
  margin: 0;
  font-size: var(--text-small);
  color: var(--text-on-dark-2);
}

/* -------------------------------------------------------------------------
 * Testimonials
 * ---------------------------------------------------------------------- */

.lb-quote {
  margin: 0;
}

.lb-quote__text {
  margin: 0 0 14px;
  font-size: var(--text-body-sm);
  color: var(--ink);
}

/* -------------------------------------------------------------------------
 * Prohibited
 * ---------------------------------------------------------------------- */

/* An h2 element, so the browser's own heading margin has to go; the summary row
   places it. Size and weight are unchanged - promoting it was a semantics fix, not
   a visual one. */
.lb-accordion__title {
  margin: 0;
  font-size: var(--text-h3);
  line-height: 1.4;
  font-weight: var(--weight-semibold);
  color: var(--deep-green);
}

.lb-prohibited__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

/* The ink step, not the mark. --status-delayed is the dot/rule colour and measures
   4.19:1 on Paper at 14px, which fails AA on the one line in this section that most
   needs reading. Its ink step is what the Two-Step Rule exists for: 5.29:1. */
.lb-prohibited__title--alert {
  color: var(--status-delayed-ink);
}

.lb-prohibited__body {
  margin: 0;
  font-size: var(--text-small);
  color: var(--ink);
}

/* -------------------------------------------------------------------------
 * FAQ
 * ---------------------------------------------------------------------- */

.lb-faq {
  max-width: 820px;
}

.lb-faq .lb-section__title {
  margin-bottom: var(--space-6);
}

/* -------------------------------------------------------------------------
 * Closing CTA
 * ---------------------------------------------------------------------- */

.lb-cta {
  padding-block: 64px;
}

.lb-cta .lb-container {
  justify-items: start;
}

.lb-cta__title {
  margin: 0;
  /* Both endpoints are ramp steps — h2 to h1 — rather than an invented 24px floor. */
  font-size: clamp(var(--text-h2), 3.4vw, var(--text-h1));
  line-height: 1.3;
  font-weight: var(--weight-bold);
  color: var(--white);
  max-width: 24ch;
  text-wrap: balance;
}

.lb-cta__lede {
  margin: 0;
  font-size: var(--text-body-size);
  color: var(--text-on-dark-2);
  max-width: 52ch;
}

/* Two links out of the homepage into the calculator, both placed where the question
   they answer comes up rather than in a sign-off. */
.lb-rates__tool,
.lb-faq__more {
  margin: var(--space-6) 0 0;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--muted);
}

/* A standalone link is a target, and WCAG 2.5.8 puts the floor at 24px. Both of these
   sit in running text whose line box alone came in under it. */
.lb-rates__tool a,
.lb-faq__more a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}