/* css/mobile.css - phone-only overrides for the Contractam business site.
   ---------------------------------------------------------------------
   Linked AFTER the page's own inline <style> block, so it wins on source
   order without needing !important. Every rule here lives inside a
   max-width query, so nothing in this file can reach a tablet or desktop
   layout. Add new phone-only rules here rather than inline. */


/* ---------------------------------------------------------------
   HERO
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {

	/* The theme already clears the 80px fixed bar with
	   .hero-section { margin-top: 80px }, so this padding is breathing
	   room only - it is not carrying the bar the way the desktop rule
	   does. Trimmed from the theme's 80px to lift the headline up the
	   screen on a phone. */
	#hero.hero-22 {
		padding-top: 56px;
	}
}


/* ---------------------------------------------------------------
   HERO DIVIDER TO SECTION 2
   Two values stack under that line: the hero's own 40px bottom margin
   and section 2's 70px top padding, which put 112.7px between the line
   and the heading. Zero the first and set the second, so the whole gap
   is one number in one place.
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {

	#hero.hero-22 {
		margin-bottom: 0;
	}

	/* 67.3px, not 70: the heading's line box is 41.4px tall for 36px of
	   text, so 2.7px of half-leading sits above the letters before the
	   padding is reached. That leaves exactly 70px of white between the
	   line and the top of the heading, against the 50px the note above
	   the line carries - the line sits nearer what it closes off than
	   what it opens. */
	#benefits {
		padding-top: 67.3px;
	}
}

@media (max-width: 479.98px) {

	/* The headline carries its own <br> tags and is meant to read as
	   three rows: "Manage all / your contracts / with AI". At the 59px
	   the page sets for this width, the middle row is wider than the
	   column on a phone, so it wraps and the headline becomes four rows.
	   Scaling with the viewport keeps that row intact from 320px up, and
	   the value never exceeds the 59px it replaces. */
	.hero-split-title h1 {
		font-size: 12vw;
	}
}


/* ---------------------------------------------------------------
   HERO: the tab card is a desktop interface
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {

	/* Four tabs and a wide dashboard screenshot do not survive a phone
	   column, so the whole card comes out and the flat screenshot in the
	   markup takes its place. */
	.hero-tabs {
		display: none;
	}

	.hero-mobile-shot {
		display: block;
		width: 100%;
		height: auto;
		margin-top: 48px;
		border-radius: 12px;
		box-shadow: 0 24px 50px rgba(18, 0, 54, 0.12);
	}

	/* Sits directly under that screenshot, filling the space the tab card
	   used to occupy. */
	.hero-mobile-note {
		display: block;
		margin: 20px 0 0;
		font-family: var(--base-font);
		font-size: 0.85rem;
		font-weight: 400;
		line-height: 1.5;
		color: var(--gray);
		text-align: center;
	}

	/* Closes the hero off before the next section. Keeps the theme's
	   faded hairline; only the spacing around it is set here. */
	/* hr.divider is matched element-plus-class by the page's section rule,
	   which sets a 100px top margin. Matching that shape here, and loading
	   later, is what lets this smaller gap win.

	   46.6px, not 50: the note's line box is 20.4px tall for 13.6px of
	   text, so 3.4px of half-leading sits under the letters before the
	   margin even starts. Taking that off leaves exactly 50px of white
	   between the baseline row and the line. */
	hr.hero-mobile-divider {
		display: block;
		margin: 46.6px 0 0;
	}
}


/* ---------------------------------------------------------------
   SLIDE-IN NAV DRAWER
   The drawer replaces the bar from 991px down, not 767px, so these
   reach tablets too - hence the wider query.
   ------------------------------------------------------------- */

@media (max-width: 991.98px) {

	/* The drawer is a white panel, so its call to action follows the
	   page's near-black like every other button on the site, rather than
	   the theme's slate. */
	#header .wsmenu > .wsmenu-list a.btn {
		background-color: #111 !important;
		border-color: #111 !important;
		color: #fff !important;
	}

	/* White on the black panel. */
	#header .wsmenu > .wsmenu-list > li > a.h-link {
		color: #fff;
	}

	/* The call to action. The theme renders it as one more full-width row,
	   flush to the drawer edges with square corners, so it reads as a menu
	   item rather than something to press. Inset the row and give the
	   button back its padding and rounded corners, so it looks like the
	   one in the header. */
	/* The bar's single button belongs to the wide layout only. */
	#header .wsmenu > .wsmenu-list > li.mobile-last-link {
		display: none;
	}

	/* ---- The drawer itself ----
	   Black panel, white type, with the logo at the top and the contact
	   details and social links at the foot. */
	#header .wsmenu > .wsmenu-list {
		background-color: #0e0e0e;
	}

	#header .wsmenu > .wsmenu-list > li {
		border-bottom-color: rgba(255, 255, 255, 0.10);
	}

	#header .wsmenu > .wsmenu-list > li > a.h-link {
		border-bottom-color: rgba(255, 255, 255, 0.10);
	}

	/* the chevron on the items that open */
	#header .wsmenu > .wsmenu-list > li > .wsmenu-click > i {
		border-color: rgba(255, 255, 255, 0.55);
	}

	/* sub-panels sit on the same black rather than the theme's white */
	#header .wsmenu > .wsmenu-list > li > ul.sub-menu,
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu {
		background-color: #0e0e0e;
		border-bottom-color: rgba(255, 255, 255, 0.10);
	}

	#header .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a,
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu ul.link-list > li > a {
		color: rgba(255, 255, 255, 0.82);
	}

	#header .wsmenu > .wsmenu-list > li > .wsmegamenu .mm-desc {
		color: rgba(255, 255, 255, 0.55);
	}

	/* The column titles inside the Platform panel. index.html still marks
	   these up as h6; the insight template uses p. Both are matched, and
	   both need !important because responsive.css paints them the deep
	   purple --header-color, which is invisible on the black drawer. */
	#header .wsmegamenu h6.title,
	#header .wsmegamenu p.title {
		color: rgba(255, 255, 255, 0.45) !important;
	}

	/* ---- Logo at the top of the drawer ---- */
	#header .wsmenu > .wsmenu-list > li.nav-drawer-head {
		display: block;
		padding: 26px 20px 22px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
		/* the drawer centres its contents; the logo sits left, on the same
		   edge as the menu labels and the contact block below */
		text-align: left;
	}

	/* The link wraps the image and is inline by default, so it picks up
	   that centring unless it is made a block of its own. The theme also
	   pads every li > a in the drawer by 20px on the left, which pushed
	   the logo in past the menu labels - so that comes off here. */
	#header .wsmenu > .wsmenu-list > li.nav-drawer-head > a {
		display: block;
		padding: 0;
	}

	/* 40% up from the 44px it was. The logo file carries about 4% of
	   transparent space down its left edge, so the negative margin pulls
	   the mark itself onto the same line as the labels below rather than
	   leaving it looking indented. */
	#header .wsmenu > .wsmenu-list > li.nav-drawer-head img {
		display: block;
		width: auto;
		max-height: 62px;
		margin-left: -8px;
	}

	/* ---- Contact details and socials at the foot ---- */
	#header .wsmenu > .wsmenu-list > li.nav-drawer-foot {
		display: block;
		padding: 30px 20px 40px;
		border-bottom: none;
		text-align: left;
	}

	.drawer-foot-title {
		margin: 0 0 18px;
		font-family: var(--main-font);
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.2;
		color: #fff;
	}

	.drawer-foot-title--follow {
		margin-top: 34px;
	}

	.drawer-foot-label {
		margin: 0 0 2px;
		font-size: 0.8125rem;
		font-weight: 300;
		line-height: 1.4;
		color: rgba(255, 255, 255, 0.5);
	}

	.drawer-foot-value {
		margin: 0 0 16px;
		font-size: 0.9375rem;
		font-weight: 400;
		line-height: 1.4;
	}

	.drawer-foot-value a {
		color: #fff;
	}

	.drawer-foot-socials {
		display: flex;
		gap: 14px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.drawer-foot-socials > li {
		margin: 0;
		padding: 0;
		border: none;
	}

	.drawer-foot-socials a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: 50%;
		color: #fff;
	}

	.drawer-foot-socials [class*="flaticon-"]::before {
		font-size: 0.9375rem;
		line-height: 1;
	}

	/* ---- The page behind the drawer ----
	   #header holds the drawer, so everything except the header is
	   blurred; blurring #page itself would blur the drawer with it. */
	body.wsactive #page > *:not(#header) {
		filter: blur(5px);
	}
}


/* ---------------------------------------------------------------
   MOBILE HEADER BAR
   ------------------------------------------------------------- */

@media (max-width: 991.98px) {

	/* The theme positions the logo with a 25px top margin inside an 80px
	   bar. At the size this site runs the logo that leaves 25px above it
	   and 1px below, so it reads as pushed to the bottom. Laying the bar
	   out as a row centres it properly instead. The burger is absolutely
	   positioned by the theme, so it sits outside this flow and keeps the
	   position it already had. */
	.wsmobileheader {
		display: flex;
		align-items: center;
	}

	.wsmobileheader .smllogo {
		margin-top: 0;
		padding-left: 20px;
	}

	/* Larger in the bar: 60px of an 80px bar, leaving even space above
	   and below. */
	.wsmobileheader .smllogo img {
		max-height: 60px;
		width: auto;
	}
}


/* ---------------------------------------------------------------
   HERO BUTTONS
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {

	/* The hero description, matched to the item descriptions in the
	   platform section below it: same 17px, same 1.5 line height, same
	   near-black. It was 13.6px at a 1.55 line height in the theme's
	   grey, which read as a different kind of text entirely. Weight was
	   already 300. */
	.hero-split-side p {
		font-size: 17px;
		line-height: 1.5;
		color: #111;
	}

	/* Sized against the desktop button: cut 30%, then raised 20% from
	   there, so these are 0.84 of the desktop values. Padding and label
	   scale by the same factor, so the shape is unchanged. */
	.hero-demo-btn {
		padding: 12.6px 23.52px;
		font-size: 0.7875rem;
	}
}


/* ---------------------------------------------------------------
   PLATFORM FEATURE LIST
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {

	/* The theme centres .fbox-2 below 768px. Stacked one per row on a
	   phone that reads as a loose column of centred fragments, so the
	   headings and their copy stay left-aligned instead - the same
	   ragged-right column the rest of the page uses. The theme's own
	   reset of the desktop left rule and its indent is kept. */
	.fbox-2 {
		text-align: left;
	}

	/* The title and its intro follow the list below them. .title-01 is
	   centred at every width by the theme, so this turns it off for this
	   one section - the other sections on the page keep their centred
	   titles. The theme already zeroes the .px-35 side padding here, so
	   the intro starts on the same left edge as everything else. */
	#benefits .title-01 {
		text-align: left;
	}
}


/* ---------------------------------------------------------------
   PLATFORM SECTION TYPE
   Weights and line heights for the phone reading of section 2.
   Weight 300 only renders as 300 because index.html asks Google Fonts
   for that Inter weight; without it the browser falls back to 400 and
   nothing looks lighter.
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {

	/* Main heading - 115% */
	#benefits .section-title h2 {
		font-weight: 500;
		line-height: 1.15;
	}

	/* Feature titles - 125% */
	#benefits .fbox-txt h6 {
		font-weight: 500;
		line-height: 1.25;
	}

	/* Intro and item copy - 150% */
	#benefits .section-title p,
	#benefits .fbox-txt p {
		font-weight: 300;
		line-height: 1.5;
	}

	/* Black, in place of the theme's grey body text and the deep purple
	   it uses for headings. #111 is the near-black the rest of this page
	   already runs on - the buttons, the drawer and the hero all use it. */
	#benefits .section-title h2,
	#benefits .section-title p,
	#benefits .fbox-txt h6,
	#benefits .fbox-txt p {
		color: #111;
	}
}


/* ---------------------------------------------------------------
   SECTION DIVIDERS
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {

	/* home.css gives the divider a 100px top margin and forces the
	   section after it to 100px of top padding, so the line is centred
	   between two sections that carry 100px of their own padding. On a
	   phone those sections drop to 70px, but the two 100px values do
	   not - so the line ends up with 170px above it and 100px below,
	   which is the hole after the last feature item.

	   Hand the spacing back to the phone rhythm. Every divider on this
	   page now carries the same gap: 50px between it and the last thing
	   in the section above, 70px between it and the first letters of the
	   section below. */
	hr.divider:not(.hero-mobile-divider) {
		margin-top: 0;
	}

	/* ---- 70px below every line ----
	   The numbers are not all 70 because what sits under the line is not
	   always the same shape. Where a section opens on a .module-subtitle
	   the eyebrow's line height equals its font size, so nothing is
	   added and the padding is the gap. Where it opens on an h2 the line
	   box is taller than the type, and that half-leading plus the title
	   wrapper's own offset has to come off the padding. Each value below
	   was measured, not derived. */
	hr.divider + section.content-section {
		padding-top: 70px;
	}

	#pricing {
		padding-top: 64px;
	}

	#comp-table,
	#faqs {
		padding-top: 63.7px;
	}

	hr.divider + section.banner-section .banner-overlay {
		padding-top: 70px;
	}

	/* ---- 50px above every line ----
	   The module sections end on their screenshot and carry no bottom
	   padding at all on a phone, so the image ran straight into the
	   line. The rest end on text, whose descender space counts toward
	   the gap and so comes off the padding. */
	section.content-section {
		padding-bottom: 50px;
	}

	#benefits {
		padding-bottom: 45.7px;
	}

	#pricing {
		padding-bottom: 44.3px;
	}

	#comp-table {
		padding-bottom: 2.2px;
	}

	#faqs {
		padding-bottom: 50px;
	}
}


/* ---------------------------------------------------------------
   PLATFORM FEATURE COPY
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {

	/* One item per row here, so the longer description fits and reads
	   better than the clipped desktop line. home.css hides this version
	   and shows the short one everywhere above this breakpoint. */
	.fbox-desc--long {
		display: block;
	}

	.fbox-desc--short {
		display: none;
	}
}


/* ---------------------------------------------------------------
   PLATFORM FEATURE SPACING
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {

	/* responsive.css spaces .fbox-2 only on fb-1, fb-2 and fb-3, because
	   the template assumed four boxes with the fourth one last. There are
	   five here, so Contract Management and Ask Louis were left flush
	   against what followed while the first three had 35px. Space them
	   all the same and drop it from whichever is genuinely last. */
	#benefits .fbox-2 {
		margin-bottom: 35px;
	}

	#benefits .col:last-child .fbox-2 {
		margin-bottom: 0;
	}
}


/* ---------------------------------------------------------------
   DRAWER TYPE
   The drawer follows the same scale as the rest of the phone layout
   (see CLAUDE.md): titles at weight 500, descriptions at 300, with
   1.15 / 1.25 / 1.5 line heights. Colour is the one thing that does
   not carry over - this panel is black, so the type is white rather
   than the #111 used on the page.
   ------------------------------------------------------------- */

@media (max-width: 991.98px) {

	/* Top-level items: title weight and line height. The theme built the
	   row height out of a 46px line, so with a 1.25 line the padding has
	   to carry it instead - otherwise the rows collapse to about 33px and
	   stop being comfortable to tap. */
	#header .wsmenu > .wsmenu-list > li > a.h-link {
		font-weight: 500;
		line-height: 1.25;
		padding-top: 17px;
		padding-bottom: 17px;
	}

	/* Column titles inside the Platform panel */
	#header .wsmegamenu h6.title,
	#header .wsmegamenu p.title {
		font-weight: 500;
		line-height: 1.25;
	}

	/* Module and dropdown links */
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu ul.link-list > li > a,
	#header .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a,
	#header .wsmegamenu .mm-foot a {
		font-weight: 500;
		line-height: 1.25;
	}

	/* The line under each module name is description copy */
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu .mm-desc {
		font-weight: 300;
		line-height: 1.5;
	}

	/* "Contact Info" and "Follow Us" are section headings */
	.drawer-foot-title {
		font-weight: 500;
		line-height: 1.15;
	}

	/* The labels and the addresses under them are description copy */
	.drawer-foot-label,
	.drawer-foot-value {
		font-weight: 300;
		line-height: 1.5;
	}
}


/* ---------------------------------------------------------------
   DRAWER: THE PLATFORM PANEL
   Each group gets a label with a short rule under it, and the modules
   below are separated by hairlines, so the panel reads as two labelled
   groups rather than one long list.
   ------------------------------------------------------------- */

@media (max-width: 991.98px) {

	/* Group label: small, muted, with the accent rule beneath it. */
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu h6.title,
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu p.title {
		position: relative;
		margin: 0 0 22px 10px !important;
		padding-bottom: 12px;
		font-size: 0.9375rem !important;
		letter-spacing: 0.01em;
	}

	#header .wsmenu > .wsmenu-list > li > .wsmegamenu h6.title::after,
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu p.title::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 26px;
		height: 2px;
		background-color: rgba(255, 255, 255, 0.45);
	}

	/* The second group needs air above it, so the two read apart. */
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu .col-lg-6 + .col-lg-6 h6.title,
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu .col-lg-6 + .col-lg-6 p.title {
		margin-top: 30px !important;
	}

	/* A hairline between modules, none under the last of a group. */
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu ul.link-list > li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	#header .wsmenu > .wsmenu-list > li > .wsmegamenu ul.link-list > li:last-child {
		border-bottom: none;
	}

	/* Module name over its description, with room to breathe. */
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu ul.link-list > li > a {
		padding: 16px 20px 16px 10px !important;
	}

	/* home.css hides the descriptor under 991px, on the assumption the
	   accordion has no room for it. The drawer is a full-height panel now,
	   so the line comes back: it is what makes each module readable. */
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu .mm-desc {
		display: block;
		margin-top: 6px;
		font-size: 0.8125rem;
	}

	/* The bottom strip sits on the same left edge as everything else.
	   It lives outside the Bootstrap row, so it never gets the row's
	   negative gutter that pulls the two columns left; -12px hands it
	   the same start, and the 10px matches the links' padding. */
	#header .wsmenu > .wsmenu-list > li > .wsmegamenu .mm-foot {
		margin: 14px 20px 0 -2px;
	}
}


/* ---------------------------------------------------------------
   MODULE SECTIONS
   The five alternating text/image blocks - Drafting, Contract
   Analysis, Improvement, Contract Management and Louis AI. They all
   share one markup shape, so they all read on the same phone scale
   as section 2: headings 500/1.15, sub-titles 500/1.25, copy
   300/1.5, everything #111.
   ------------------------------------------------------------- */

@media (max-width: 767.98px) {

	/* Section heading */
	.content-section .txt-block h2 {
		font-weight: 500;
		line-height: 1.15;
	}

	/* The sub-title above each list of points (.fs-24), and the title
	   on each Louis content box (.fs-22) - both are item titles. */
	.content-section .txt-block h5 {
		font-weight: 500;
		line-height: 1.25;
	}

	/* Intro copy and every point below it */
	.content-section .txt-block p {
		font-weight: 300;
		line-height: 1.5;
	}

	/* The lead-in on each point is an item title, not bold body copy,
	   so it takes the same 500 as the headings above it. */
	.content-section .txt-block p strong {
		font-weight: 500;
	}

	/* The paragraph straight under the heading is a section intro, so
	   it takes the 18px section 2 gives its own intro. The points keep
	   the 17px body size the theme already hands them. */
	.content-section .txt-block > p {
		font-size: 18px;
	}

	/* Black, in place of the theme's grey body copy and the deep purple
	   it paints headings. The eyebrow is deliberately not in this list -
	   it stays grey, see below. */
	.content-section .txt-block h2,
	.content-section .txt-block h5,
	.content-section .txt-block p,
	.content-section .txt-block p strong {
		color: #111;
	}

	/* The eyebrow is the one exception to the no-caps rule: uppercase at
	   weight 600, tracked, and grey rather than black, so it reads as a
	   label above the heading instead of as another line of it. */
	.content-section .txt-block .module-subtitle {
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.75px;
		color: #6c757d;
	}
}