/* This file used to open with a global reset -- "*" for margin/padding/
   box-sizing/font-family and "body" for background/colour. Two problems with
   that in a page-level stylesheet.

   The reset half was already redundant: css/Global.css sets exactly the same
   three properties on *, *::before, *::after, and sets body's colour and
   background from tokens.

   The font-family half was not redundant, it was a leak. "*" matches every
   element in the document, and cta.css loads after Global.css, so a rule
   meant for this one section was overriding the site typeface on the whole
   homepage -- index.html rendered in Poppins while every other page rendered
   in Inter. The section inherits var(--font-sans) with everything else now,
   which is what makes the homepage match the rest of the site.
*/

/* No min-height here on purpose. This was min-height:100vh, which forced
   the section to a full viewport regardless of its content; combined with
   align-items:center that centred the logo/text/phones inside a box far
   taller than they needed and left a large empty gap above them, right
   under the FAQ section. Letting it size to its content means the spacing
   comes from --space-section alone, the same as every other section. */

/* This is the last thing on the page before the footer, and it was flat on
   the same white as the FAQ above it -- nothing marked where one ended and
   the other began. It gets its own ground now, and the top edge is an arc
   rather than a straight line: the horizontal radius is half the width and
   the vertical radius a fixed 72px, which is what makes the curve shallow
   and wide instead of a circle. */

.cta-hero {
  position: relative;
  width: 100%;
  display: flex;
  /* flex-end, not center: the phone stack is the tallest thing here and it
     should sit ON the section floor, the way it does in the reference,
     rather than floating in the middle with its shadow cut off. */
  align-items: flex-end;
  /* Was space-between, which is what made the band feel empty: it pushed the
     copy against one inset and the mockups against the other and left the
     ~280px between them as dead air. The two are one composition, not two
     edges. Centred as a pair with a real gap, the band reads as filled at
     any width instead of stretching to fit the viewport. */
  justify-content: center;
  gap: clamp(40px, 5vw, 80px);
  /* The tighter of the two section tokens: this band is one column of copy
     beside a mockup, not a full content section, and at the full token it
     stood taller than it had anything to fill. The extra on top is what the
     copy needs to clear the arc's deepest point at the sides — enough for
     that, no more.

     Taken in again since: the band's height is the copy column plus this
     padding, and trimming the mockup alone bought nothing once the mockup
     dropped below the copy. 8px off the top and 8 off the floor. */
  padding: calc(var(--space-section-sm) - 8px) 7% 32px;
  border-radius: 50% 50% 0 0 / 72px 72px 0 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,102,0,.10) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 86% 78%, rgba(255,102,0,.08) 0%, rgba(255,255,255,0) 42%),
    /* Holds its tint all the way down. Fading to white by 78% meant the
       lower half of the band was the same colour as the section above it,
       so the arc marked a boundary that then dissolved. */
    linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 100%);
}

/* A hairline that follows the arc, so the edge reads as drawn rather than as
   a colour change. Inset by 1px and masked to the top so it does not close
   the shape along the bottom. */

.cta-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 160px;
  border-radius: inherit;
  border-top: 1px solid var(--primary-20);
  border-left: 1px solid var(--primary-10);
  border-right: 1px solid var(--primary-10);
  pointer-events: none;
}

/* Centred as a column: the logo sits on the same axis as the copy, the
   heading and the form below it. The old padding-left:40px is gone — it
   only made sense while everything was flush left, and it would push a
   centred column off-centre by 20px.

   Note there is no text-align:center here. The blocks below are centred,
   but their text stays left-aligned — centring the text itself gave every
   line a different start point, so the paragraph read as ragged. Centred
   block + left-aligned text keeps the group under the logo while giving
   all lines one shared left edge. */

/* One column, one left edge, one rhythm. Every child takes its gap from the
   spacing scale rather than its own margin, so the logo, the pitch, the
   heading, the sub-copy and the form stack at intervals that mean something
   instead of 45px here and -8px there. */

.cta-left {
  /* Was width:52% — a share of a row that no longer stretches to the insets.
     It takes the lead paragraph's own measure now and the centred row closes
     around it. No flex-basis: in the mobile rule this container turns into a
     column, where a basis would set the block's HEIGHT rather than its
     width. Plain width, which the mobile rule already overrides to 100%. */
  width: 560px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-tight);
  /* Was --space-block. The phones sit ON the floor and this column is
     bottom-aligned with them, so a block-scale pad here was lifting the copy
     off the floor by more than the section had reason to be tall. */
  padding-bottom: var(--space-tight);
}

/* Same max-width as .cta-description so the heading, sub-copy and form
   share that paragraph's left edge rather than starting at their own. */

.cta-callback {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-tight);
  /* The pitch above is the section's preamble and this block is its ask, so
     the two still want a beat between them — but at block scale that beat
     read as a break in the column rather than a step down it. */
  margin-top: var(--space-tight);
  text-align: left;
}

/* .cta-hero centres this column against the taller phone stack
   (align-items:center), so shrinking the logo just splits the extra
   height evenly above and below rather than opening a gap on one side. */

.cta-logo {
  /* Was 260px centred. At that size it dominated a section whose point is
     the copy and the form below it. */
  /* baoiam.png is a 390x390 canvas whose artwork only occupies 317x203 of
     it, so 178px here rendered a visibly smaller mark than the old landscape
     file did. 160px puts the artwork at ~130px wide — a step down with the
     rest of the band, so the mark stays in proportion to the copy under it
     rather than becoming the largest thing in the column. */
  width: 160px;
  max-width: 100%;
  /* The negative block margins are the file's own transparent padding
     (72px above the mark, 115px below) scaled to this width and taken back,
     so the logo sits where it did rather than opening a band of empty space
     above and below it. They scale with the width — at 220px they were
     -55/-51; at 160 that is 160/220 of each, or the padding comes back. */
  margin: -40px 0 -37px;
  display: block;
}

.cta-description {
  /* Was font-size:29px on a width:150% box — nearly 3x the site's lead-text
     scale, and wider than its own parent (.cta-left), which is what made it
     read as oversized and spilling past its column. Sits a step above the
     shared lead token now: this column has height to fill next to the
     phones, and the copy is the section's main pitch. */
  text-align: left;
  width: 100%;
  max-width: 560px;
  /* Was a clamp of its own, a step above the shared token, and --ink-900
     against the other paragraph's --ink-500. Two leads in one section, one
     of them bigger and near-black: the weight was already 400 on both, but
     the size and the darkness made this one read as the bold one. Same
     token, same colour, so they read as a pair. */
  font-size: var(--fs-lead);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-500);
  /* Lead copy, not a headline: pretty keeps the natural taper and stops a
     single word being stranded on the last line. balance would flatten it. */
  text-wrap: pretty;
}

/* Was a hardcoded 34px — bigger than the section titles elsewhere on the
   page. Tracks just above the shared sub-heading token: still smaller than
   a section title, but large enough to hold the eye as this column's call
   to action beside the tall phone stack. */

/* This h2 is the section's title -- there is no other heading above it -- so
   it takes the same token and weight as every other section title on the
   site rather than the 26px/400 it had, which read as a lead. */

.cta-callback h2 {
  font-size:var(--fs-section);
  font-weight:800;
  line-height: 1.15;
  /* Display weight at this size sets loose; the same negative tracking the
     other section titles carry. */
  color:var(--ink);
  /* Written to sit on one line at desktop. If a narrow column does force a
     break, balance splits it evenly rather than leaving one orphan word. */
  text-wrap: balance;
}

.cta-callback p {
  font-size:var(--fs-lead);
  font-weight:400;
  line-height: 1.6;
  color:var(--ink-500);
  /* Shares the lead paragraph's measure so the heading, this line and the
     form all read off one column edge. */
  max-width: 560px;
  text-wrap: pretty;
}

/* The form was 33px tall with 12px text — smaller than any other control on
   the site and easy to miss as the section's call to action. Scaled up so the
   button reads as the primary action it is. */

.cta-form {
  display: flex;
  width: 460px;
  max-width: 100%;
  /* Was 50px. A 50-tall bar under a 16px line of sub-copy read as a slab;
     44 is still a comfortable tap target and sits in the column instead of
     interrupting it. */
  height: 44px;
  /* Flush with the copy above it, not centred inside .cta-callback —
     the whole point is one shared left edge down the column. */
  margin: 0;
}

.cta-select {
  width: 82px;
  flex: none;
  border: 1px solid #9a9a9a;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 11px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  padding-left: 10px;
  padding-right: 24px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cta-select:hover,
.cta-select:focus {
  border-color: #ff6600;
}

.cta-input {
  flex: 1;
  /* min-width:0 so this is the element that gives up room when the row is
     tight — a flex item's default min-width:auto would stop it shrinking. */
  min-width: 0;
  border: 1px solid #9a9a9a;
  border-left: none;
  border-right: none;
  padding: 0 16px;
  font-size: 14px;
  outline: none;
}

/* The browser default sits around #757575, which on a white field inside a
   peach band read as faint as the border did. */

.cta-input::placeholder{
  color: #6a6a6a;
}

.cta-button {
  /* Was a fixed 155px, which broke the old longer label across two lines
     inside the row. Sized by its label instead, with a floor so it never
     collapses narrower than the input beside it needs — the floor came down
     with the label. */
  min-width: 140px;
  padding: 0 20px;
  flex: none;
  white-space: nowrap;
  border: none;
  background: #ff6600;
  color: white;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: opacity .2s ease;
}

.cta-button:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* Same visible/error/success pattern as .int-form-status on the
   internship page, so a submit message anywhere on the site behaves the
   same way — inline under the form, not a browser alert(). */

.cta-form-status {
  display: none;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
}

.cta-form-status.visible {
  display: block;
}

.cta-form-status.error {
  color: #d93025;
}

.cta-form-status.success {
  color: #188038;
}

.cta-phone {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.18));
}

.cta-right {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Holds the stack at its own width in the centred row rather than giving
       any of it up to the copy column beside it. */
    flex: none;
}

.cta-phone-wrap {
    position: relative;
    /* Scaled down from 430: the pair of mockups was the tallest thing in the
       section and set its height, which is what made the band feel oversized
       next to the copy it sits beside. Down again from 340: the copy column
       runs about 400px, so the stack was still setting a height well past
       anything standing on the left. 240 is the width at which the stack's
       424px of height finally lands just above the copy column instead of
       towering over it — the mockups are the section's garnish, not its
       subject.

       216 now, which puts the stack at 382 and finally under the copy's
       403. Past this point the copy sets the band's height and shrinking
       the mockup further only opens a gap above it. */
    width: 216px;
    aspect-ratio: 430 / 760;
}

/* Both phones are sized as a share of the wrap rather than in px, so the
   stack keeps its exact composition at any wrap width — the percentages are
   the old 237/30 and 198/10 measured against the 340px it used to be. */

.cta-phone-back {
    width: 69.7%;
    left: 8.82%;
    bottom: 0;
    border-radius: 25px;
}

.cta-phone-front {
    width: 58.24%;
    right: 2.94%;
    bottom: 0;
    border-radius: 25px;
}

@media (max-width: 768px) {
  .cta-hero {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(28px, 6vw, 40px) 16px 24px;
    gap: 16px;
    border-radius: 36px 36px 0 0 / 22px 22px 0 0;
  }

  .cta-hero::before {
    height: 50px;
  }

  .cta-left {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 0;
  }

  .cta-logo {
    width: 120px;
    max-width: 100%;
    margin: -12px 0 -10px;
    display: block;
  }

  .cta-description {
    font-size: clamp(13px, 3.4vw, 14.5px);
    line-height: 1.55;
    color: var(--ink-700, #444);
    margin: 0 0 2px 0;
    max-width: 100%;
    text-wrap: pretty;
  }

  .cta-callback {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 102, 0, 0.18);
  }

  .cta-callback h2 {
    font-size: clamp(20px, 5.5vw, 25px);
    line-height: 1.22;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--ink, #111);
    margin: 0;
    text-wrap: balance;
  }

  .cta-callback p {
    font-size: clamp(13px, 3.4vw, 14.5px);
    line-height: 1.5;
    color: var(--ink-700, #555);
    margin: 0 0 4px 0;
    text-wrap: pretty;
  }

  .cta-form {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: 380px;
    height: 42px;
    min-height: 42px;
    border: 1.5px solid rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
    margin: 8px 0 0 0;
    box-sizing: border-box;
  }

  .cta-select {
    width: auto;
    min-width: 58px;
    height: 100%;
    min-height: 100%;
    font-size: 13px;
    font-weight: 600;
    padding: 0 18px 0 8px;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 0;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px;
    -webkit-appearance: none;
    appearance: none;
    color: #222;
    box-sizing: border-box;
    cursor: pointer;
  }

  .cta-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    min-height: 100%;
    font-size: 13.5px;
    padding: 0 10px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #222;
    outline: none;
    box-sizing: border-box;
  }

  .cta-input::placeholder {
    color: #888;
    font-size: 13px;
  }

  .cta-button {
    width: auto;
    min-width: auto;
    height: 100%;
    min-height: 100%;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    padding: 0 14px;
    border: none;
    border-radius: 0;
    background: #ff6600;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background-color .2s ease;
  }

  .cta-button:active {
    background: #e65c00;
  }

  .cta-form-status {
    margin-top: 8px;
    font-size: 12.5px;
  }

  .cta-right {
    width: 100%;
    max-width: 100%;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    padding-bottom: 6px;
    box-sizing: border-box;
  }

  .cta-phone-wrap {
    position: relative;
    width: 200px;
    height: 280px;
    min-height: 280px;
    aspect-ratio: auto;
    display: block;
    margin: 0 auto;
  }

  .cta-phone {
    position: absolute;
    width: auto;
  }

  .cta-phone-back {
    top: 0;
    bottom: auto;
    left: 8px;
    right: auto;
    height: 100%;
    width: auto;
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  }

  .cta-phone-front {
    bottom: 0;
    top: auto;
    right: 8px;
    left: auto;
    height: 76%;
    width: auto;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  }
}