/* Corners follow the homepage's own split: controls stay tight, surfaces are
   round. Its buttons and inputs are 4px and its .nx-card is 16px, so --r is
   left alone at 4px and only the card surfaces are rounded here. Raising --r
   itself was the mistake: .at-btn reads it, so the buttons rounded with it. */
.sv-uc,.sv-who,.sv-deep,.sv-case,.sv-price article,.sv-why-list{border-radius:12px}
/* No overflow:hidden on the card grids. It was there to round the old gridline
   layout, but it also clipped a card the moment it lifted on hover. The grids
   are gapped now, so each card carries its own corner and nothing needs
   clipping. */
/* ==========================================================================
   LEAD FORM, four fields
   The .lf- classes come from the inherited blocks so the look is the homepage's.
   These rules only cover what a four field, single column version needs.
   ========================================================================== */
#lead-form .lf-grid{display:block}
#lead-form .lf-f{display:block;margin-bottom:16px}
#lead-form .lf-f > span:first-child{display:block;font-size:12.5px;font-weight:500;
  margin-bottom:6px;color:var(--txt)}
#lead-form input,#lead-form textarea,#lead-form select{
  width:100%;font-family:var(--ui);font-size:14.5px;font-weight:350;padding:12px 14px;
  border:1px solid var(--line);border-radius:4px;background:var(--void);color:var(--txt);
  outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
#lead-form textarea{resize:vertical;min-height:86px;line-height:1.55}
#lead-form input:focus,#lead-form textarea:focus,#lead-form select:focus{
  border-color:var(--warm);box-shadow:0 0 0 3px rgba(200,16,46,.10)}
#lead-form input::placeholder,#lead-form textarea::placeholder{color:rgba(0,0,0,.34)}
#lead-form .lf-f.err input,#lead-form .lf-f.err textarea,
#lead-form .lf-f.err .lf-phone{border-color:var(--warm)}

/* the country code and the number read as one control */
#lead-form .lf-phone{display:grid;grid-template-columns:150px 1fr;gap:8px}
#lead-form .lf-phone select{padding:12px 8px;cursor:pointer}

#lead-form .lf-msg{display:none;font-size:11.5px;color:var(--warm);margin-top:5px}
#lead-form .lf-f.err .lf-msg{display:block}
#lead-form .lf-note{display:none;font-size:11.5px;color:var(--muted);opacity:.7;margin-top:5px}
#lead-form .lf-note.on{display:block}

#lead-form .lf-submit{width:100%;justify-content:center;margin-top:4px}
#lead-form .lf-priv{font-size:11.5px;color:var(--muted);opacity:.6;margin-top:12px;text-align:center}

#lead-form .lf-done{text-align:center;padding:26px 0 6px}
#lead-form .lf-tick{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--green,#14663f);color:#fff;
  font-size:18px;margin-bottom:14px}
#lead-form .lf-done h3{font-family:var(--display);font-size:20px;font-weight:500;
  letter-spacing:-.02em;margin-bottom:8px}
#lead-form .lf-done p{font-size:14.5px;font-weight:300;color:var(--muted)}
#lead-form.sent .lf-hd,#lead-form.sent .lf-grid,
#lead-form.sent .lf-submit,#lead-form.sent .lf-priv{display:none}

@media(max-width:640px){ #lead-form .lf-phone{grid-template-columns:120px 1fr} }

/* The inherited 132px band rhythm was built for a homepage where every section
   carries a large graphic. These bands are type only, so the padding dominates
   instead of framing anything. 96px holds the same feel at a readable length. */
.at-sec{padding-top:96px;padding-bottom:96px}
.at-final{padding-top:104px;padding-bottom:104px}

/* ==========================================================================
   HEADER TREATMENT, on the hero and on the footer
   The photograph and the #152647 base come straight off the homepage header.
   The closing CTA does NOT carry it: that section now runs the lead form, which
   is a light control surface and would be unreadable on the navy.
   ========================================================================== */
/* Two different navies on purpose, matching the homepage exactly: the hero sits
   on #152647 and the footer on the deeper #0a1d33. */
.at-hero,.at-foot{position:relative;overflow:hidden;isolation:isolate}
.at-hero{background:#152647}
.at-foot{background:#0a1d33}
.at-hero::before,.at-foot::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--nx-mesh);background-size:cover;background-position:50% 50%}
.at-hero::after,.at-foot::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none}

.at-hero::after{background:
  radial-gradient(70% 60% at 24% 46%,
    rgba(4,10,20,.42) 0%, rgba(4,10,20,.22) 56%, rgba(4,10,20,0) 88%),
  linear-gradient(90deg,
    rgba(4,10,20,.40) 0%, rgba(4,10,20,.18) 50%, rgba(4,10,20,0) 100%)}

/* the footer is dense with small links, so it needs a flatter, heavier scrim
   than the hero, which only has to protect a headline */
.at-foot::after{background:
  linear-gradient(180deg, rgba(4,10,20,.34) 0%, rgba(4,10,20,.46) 100%)}

/* content above both layers */
.at-hero .at-wrap,.at-foot .at-wrap{position:relative;z-index:2}
.at-hero .at-hero-in{position:relative;z-index:2}

/* .at-hero is display:flex, so .at-wrap was sizing to its own content and the
   auto margins then centred it, pushing the hero copy right of the 1240px grid
   every other section sits on. Filling the flex line puts it back on the shared
   container, flush left with the nav and the sections below. */
.at-hero .at-wrap{width:100%;flex:1 1 auto}
.at-hero .at-hero-in{margin-left:0;max-width:940px}

/* footer copy re-set for the navy field */
.at-foot .tl{color:#fff}
.at-foot .at-mono{color:#fff;opacity:.82}
.at-foot .at-foot-top{border-bottom-color:rgba(255,255,255,.22)}
.at-foot h5{color:#fff;opacity:.72}
.at-foot .at-foot-cols a{color:#fff;opacity:.8}
.at-foot .at-foot-cols a:hover{opacity:1;color:#e8944b}

/* the light hero carries a near opaque white pad behind the copy so black text
   clears the dot field. On a photograph it washes the copy out instead. */
.at-hero .at-hero-in::before{display:none}

/* copy re-set for the dark hero */
.at-hero .at-kicker{color:#fff;opacity:.92}
.at-hero .at-kicker::before{
  background:linear-gradient(90deg,#c8102e 0%,#e8944b 100%);
  background-color:transparent;height:2px;opacity:1}
.at-hero .at-h1{color:#fff}
.at-hero .at-lede{color:#fff;opacity:.84}
.at-hero .sv-crumb{color:#fff;opacity:.6}

/* The hero no longer carries a kicker, so its heading is the first thing under
   the breadcrumb. The inherited h1 top margin assumed a kicker sat above it. */
.at-hero .at-h1{margin-top:14px}

/* The hero button was picking up the generic 12.5px, which is the nav size.
   The homepage runs its hero button at 16px / 500 / 10px 24px, giving a 48px
   control. Matched exactly rather than guessed at a larger number. */
.at-hero .at-btn{font-size:16px;font-weight:500;padding:10px 24px;letter-spacing:.004em}

/* the bundle paints both buttons solid crimson at .at-btn.at-btn--ghost, which
   ties a single descendant class and wins on source order. Doubling outranks it. */
.at-hero .at-btn.at-btn--ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.at-hero .at-btn.at-btn--ghost:hover{
  border-color:#fff;background:rgba(255,255,255,.10);color:#fff}

.at-hero h1{max-width:18ch}
.sv-crumb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:8px}
.sv-crumb a{color:inherit;text-decoration:none}
.sv-crumb a:hover{color:#e8944b;opacity:1}
.sv-crumb i{font-style:normal;color:#e8944b;padding:0 5px}
.sv-lead{font-size:16.5px;font-weight:300;line-height:1.72;color:var(--muted);max-width:70ch}
.sv-inline{margin-top:34px}

/* Six use case cards, three across. Previously one grid drawing 1px gridlines
   through a background colour, which left the cards touching with no air. Now
   separate cards with real spacing, each with its own border and corner. */
.sv-ucs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:46px}
.sv-uc{background:var(--void);border:1px solid var(--line);padding:26px 24px 28px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),
             transform .35s var(--ease)}
.sv-uc:hover{border-color:rgba(0,0,0,.26);transform:translateY(-5px);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.42)}
.sv-uc h3{font-family:var(--display);font-size:17px;font-weight:500;letter-spacing:-.016em;
  margin-bottom:8px;line-height:1.28}
.sv-uc p{font-size:14px;font-weight:300;line-height:1.62;color:var(--muted)}

/* three alternating why blocks, standing where GLG puts an image */
.sv-whys{margin-top:14px}
.sv-why{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;
  padding:46px 0;border-bottom:1px solid var(--line)}
.sv-why:first-child{border-top:1px solid var(--line)}
.sv-why.alt .sv-why-txt{order:2}
.sv-why.alt .sv-why-list{order:1}
.sv-why-txt .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--warm);
  display:block;margin-bottom:14px}
.sv-why-txt h3{font-family:var(--display);font-size:clamp(22px,2.1vw,29px);font-weight:500;
  letter-spacing:-.028em;line-height:1.16;margin-bottom:13px;max-width:20ch}
.sv-why-txt p{font-size:15px;font-weight:300;line-height:1.7;color:var(--muted);max-width:52ch}
.sv-why-list{list-style:none;background:var(--slate);border-radius:12px;padding:8px 24px}
.sv-why-list li{position:relative;padding:16px 0 16px 26px;font-size:14.5px;font-weight:300;
  line-height:1.6;color:var(--txt);border-bottom:1px solid var(--line)}
.sv-why-list li:last-child{border-bottom:0}
.sv-why-list li:before{content:"";position:absolute;left:0;top:25px;width:11px;height:1px;
  background:linear-gradient(90deg,#c8102e,#e8944b)}

.sv-steps{list-style:none;margin-top:46px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 52px}
.sv-step{display:flex;gap:18px;border-top:1px solid var(--line);padding-top:22px}
.sv-step .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--warm);padding-top:4px}
.sv-step h3{font-family:var(--display);font-size:17.5px;font-weight:500;letter-spacing:-.016em;margin-bottom:7px}
.sv-step p{font-size:14.5px;font-weight:300;line-height:1.64;color:var(--muted)}

/* Same treatment as the use case cards: spaced, bordered, rounded. These were
   still on the old gridline layout, which only looked right because on the
   Expert Calls page they sat inside a navy band that overrode it. On a light
   section the cards touched with square corners. */
.sv-whos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:46px}
.sv-who{background:var(--void);border:1px solid var(--line);padding:26px 22px 28px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),
             transform .35s var(--ease)}
.sv-who:hover{border-color:rgba(0,0,0,.26);transform:translateY(-5px);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.42)}
.sv-who h3{font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:-.016em;margin-bottom:8px}
.sv-who p{font-size:13.5px;font-weight:300;line-height:1.62;color:var(--muted)}

.sv-vals{list-style:none;margin-top:46px;max-width:920px}
.sv-val{display:flex;gap:22px;padding:24px 0;border-top:1px solid var(--line)}
.sv-val:last-child{border-bottom:1px solid var(--line)}
.sv-val .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--warm);padding-top:5px}
.sv-val h3{font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:-.018em;margin-bottom:8px}
.sv-val p{font-size:14.5px;font-weight:300;line-height:1.68;color:var(--muted);max-width:66ch}

.sv-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:46px}
.sv-case{border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;background:var(--void)}
.sv-case .tag{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warm);margin-bottom:12px}
.sv-case h3{font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:-.018em;margin-bottom:10px}
.sv-case p{font-size:14.5px;font-weight:300;line-height:1.66;color:var(--muted)}

.sv-price{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:860px}
.sv-price article{border:1px solid var(--line);border-radius:12px;padding:26px 24px}
.sv-price h3{font-family:var(--display);font-size:17.5px;font-weight:500;margin-bottom:8px}
.sv-price p{font-size:14px;font-weight:300;line-height:1.64;color:var(--muted)}

.at-a{overflow:hidden;transition:height .42s var(--ease)}
.at-a[hidden]{display:block;height:0}

/* ==========================================================================
   TWO COLUMN ZONE + NEXY RAIL
   The hand built agent panel that used to sit here is gone. Nexy AI is lifted
   whole out of the homepage instead, so the rail now supplies only the seat and
   the component brings its own everything. See nexy_component.py.
   ========================================================================== */
.sv-zone{background:var(--void);border-top:1px solid var(--line)}
.sv-zone-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;
  align-items:start;padding-top:96px;padding-bottom:96px}
.sv-sub+.sv-sub{margin-top:88px;padding-top:88px;border-top:1px solid var(--line)}
.sv-rail{position:sticky;top:96px;align-self:start}

/* ==========================================================================
   NAV OVER THE HERO
   A solid white bar sitting on the navy hero was the thing that looked wrong.
   The nav now starts transparent and only takes its white ground once the page
   has scrolled past the hero. The mark goes white while it is over the navy,
   because its wordmark is dark and would otherwise disappear.
   ========================================================================== */
.mn{transition:background .32s var(--ease),border-color .32s var(--ease),
    backdrop-filter .32s var(--ease)}
.mn--over{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.mn--over .mn-mark{filter:brightness(0) invert(1)}
.mn--over .mn-item > a{color:#fff}
.mn--over .mn-item > a:hover{color:#e8944b;background:transparent}
.mn--over .mn-sub{color:rgba(255,255,255,.72);border-left-color:rgba(255,255,255,.3)}
.mn--over .mn-btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.mn--over .mn-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.10)}

/* ==========================================================================
   ORANGE ON HOVER
   The homepage's own hovers run to ink and crimson. Orange is the warm end of
   the ember ramp, so hovering picks up the same colour the headline emphasis
   already ends on. Applied to every link and quiet control on the page.
   ========================================================================== */
.sv-crumb a:hover{color:#e8944b}
.at-sec .at-link:hover,.sv-zone .at-link:hover{color:#e8944b;border-bottom-color:#e8944b}
.mn-item > a:hover{color:#e8944b}
.at-foot .at-foot-cols a:hover{opacity:1;color:#e8944b}
.at-acc .at-q:hover{color:#e8944b}
.at-acc .at-q:hover .pm span{background:#e8944b}
/* Every card heading goes orange on hover, on light ground and on navy. The
   case study cards were the gap: they had the rule for their tag but not for
   the heading, so those alone stayed white. */
.sv-uc:hover h3,.sv-deep:hover h3,.sv-price article:hover h3,
.sv-who:hover h3,.sv-case:hover h3{color:#e8944b}
.sv-sub--band .sv-who:hover h3,.sv-sub--band .sv-case:hover h3,
.sv-sub--band .sv-uc:hover h3{color:#e8944b}
.sv-case:hover .tag{color:#e8944b}

/* the pricing cards were the one card type with no hover at all */
.sv-price article{transition:border-color .35s var(--ease),box-shadow .35s var(--ease),
  transform .35s var(--ease)}
.sv-price article:hover{border-color:rgba(0,0,0,.26);transform:translateY(-5px);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.42)}
@media(prefers-reduced-motion:reduce){.sv-price article:hover{transform:none}}

/* Solid buttons are the exception to the orange rule. Orange on a crimson fill
   read as a colour clash rather than a state change, so they invert instead:
   white ground, crimson text, crimson border. This is also what the homepage
   does with .at-btn--solid:hover. */
.at-btn.at-btn--solid:hover,
.mn-btn.mn-btn--solid:hover{
  background:#fff;border-color:#c8102e;color:#c8102e}
.at-hero .at-btn.at-btn--solid:hover{background:#fff;border-color:#c8102e;color:#c8102e}

/* ==========================================================================
   GREY BANDS BECOME NAVY
   Every grey surface on the page now runs the hero's treatment: the same
   #152647 base, the same photograph and the same scrim. Anything sitting on
   them is re-set for a dark field, and the card surfaces become translucent
   white so a band reads as one navy block rather than white boxes on navy.
   ========================================================================== */
/* A band lives inside the left grid column now, so its navy has to break out to
   the full viewport while the copy stays on the column. One pseudo element does
   both layers: scrim over photograph, in a single background shorthand. */
.sv-sub--band{position:relative;z-index:0;padding:76px 0;margin:34px 0;
  border-top:0!important}
.sv-sub--band::before{content:"";position:absolute;top:0;bottom:0;
  left:50%;transform:translateX(-50%);width:100vw;z-index:-1;background-color:#152647;
  background-image:
    radial-gradient(70% 60% at 24% 46%,
      rgba(4,10,20,.42) 0%, rgba(4,10,20,.22) 56%, rgba(4,10,20,0) 88%),
    linear-gradient(90deg,
      rgba(4,10,20,.40) 0%, rgba(4,10,20,.20) 50%, rgba(4,10,20,.06) 100%),
    var(--nx-mesh);
  background-size:auto,auto,cover;
  background-position:center,center,50% 50%}

.sv-sub--band .at-kicker{color:#fff;opacity:.92}
.sv-sub--band .at-kicker::before{
  background:linear-gradient(90deg,#c8102e 0%,#e8944b 100%);
  background-color:transparent;height:2px;opacity:1}
.sv-sub--band .at-h2{color:#fff}
.sv-sub--band .at-lede,.sv-sub--band .sv-lead{color:#fff;opacity:.84}

/* the proof panel inside each "why Nextyn" row was the other grey surface */
.sv-why-list{background:#152647}
.sv-why-list li{color:#fff;border-bottom-color:rgba(255,255,255,.16)}

/* ==========================================================================
   CARDS ON NAVY, LIFTED ON HOVER
   Same recipe as the homepage's .nx-card: 16px radius, translucent white,
   an inset top highlight and a deep drop shadow. The homepage does not move
   the card, so the lift is the one thing added here to make it rise.
   ========================================================================== */
.sv-sub--band .sv-whos,.sv-sub--band .sv-cases,.sv-sub--band .sv-ucs{background:none;border:0;gap:16px}
.sv-sub--band .sv-who,.sv-sub--band .sv-case,.sv-sub--band .sv-uc{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:16px;padding:20px 22px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px -26px rgba(0,0,0,.6);
  transition:background .35s var(--ease), border-color .35s var(--ease),
             box-shadow .35s var(--ease), transform .35s var(--ease)}

/* Layer one: a pool of warm light that follows the cursor inside the card.
   This is the technique Linear uses on its own surfaces, and it is what makes
   a card feel lit rather than just moved. --mx and --my are written by script
   on pointermove; without script it simply never appears. */
.sv-sub--band .sv-who::before,.sv-sub--band .sv-case::before,.sv-sub--band .sv-uc::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(232,148,75,.20) 0%, rgba(232,148,75,.07) 42%, rgba(232,148,75,0) 70%)}

/* Layer two: an ember hairline that lights along the top edge. */
.sv-sub--band .sv-who::after,.sv-sub--band .sv-case::after,.sv-sub--band .sv-uc::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;
  pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:linear-gradient(90deg,transparent,#e8944b 45%,#c8102e 75%,transparent)}

.sv-sub--band .sv-who > *,.sv-sub--band .sv-case > *,.sv-sub--band .sv-uc > *{position:relative;z-index:2}

.sv-sub--band .sv-who:hover,.sv-sub--band .sv-case:hover,.sv-sub--band .sv-uc:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 26px 54px -26px rgba(0,0,0,.72);
  transform:translateY(-6px)}
.sv-sub--band .sv-who:hover::before,.sv-sub--band .sv-case:hover::before,
.sv-sub--band .sv-uc:hover::before,
.sv-sub--band .sv-who:hover::after,.sv-sub--band .sv-case:hover::after,
.sv-sub--band .sv-uc:hover::after{opacity:1}

.sv-sub--band .sv-who h3,.sv-sub--band .sv-case h3,.sv-sub--band .sv-uc h3{color:#fff}
.sv-sub--band .sv-who p,.sv-sub--band .sv-case p,
.sv-sub--band .sv-uc p{color:#fff;opacity:.78}
.sv-sub--band .sv-case .tag{color:#e8944b}
@media(prefers-reduced-motion:reduce){
  .sv-sub--band .sv-who:hover,.sv-sub--band .sv-case:hover,
  .sv-sub--band .sv-uc:hover{transform:none}
}

@media(max-width:1080px){
}

@media(max-width:1100px){ .sv-ucs{grid-template-columns:repeat(2,minmax(0,1fr))}
                          .sv-whos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:900px){
  .at-sec{padding-top:66px;padding-bottom:66px}
  .sv-ucs,.sv-whos,.sv-steps,.sv-cases,.sv-price{grid-template-columns:1fr}
  .sv-why{grid-template-columns:1fr;gap:26px;padding:36px 0}
  .sv-why.alt .sv-why-txt,.sv-why.alt .sv-why-list{order:0}
  .at-hero h1{max-width:none}
}