/*
Site is framed by a muted green background. The navigation bar is on the same color. Main content is black on white.
The company name is above the navigation bar on a darker green background.
   Colors and sizes live in :root so you can re-theme the whole site by changing one line here instead of hunting everywhere.
*/
/* :root targets the <html> element; it's the conventional place to store CSS variables. */
:root {
 /* Variable: near-black ink color used for most body text. */
 --ink: #1a1a2e;
 /* Variable: medium gray for de-emphasized text like the footer. */
 --muted: #555;
 /* Variable: brand purple, used for headings, links, hover states, and the submit button. */
 --accent: #6d4aff;
 /* Variable: darker purple for the button's hover state. */
 --accent-dark: #5936d6;
 /* Variable: white content surface. */
 --bg: #fdfdfd;
 /* Variable: muted green used around the content and in the header. */
 --green: #52705e;
 /* Variable: light gray for borders. */
 --border: #e2e2e8;
 /* Variable: gray footer background. */
 --footer-bg: #ededed;
}

/* Universal selector: applies to every element on the page. */
* {
 /* Makes "width: 100%" include padding and border, so boxes never overflow their container. */
 box-sizing: border-box;
 /* Removes the browser's default margins so spacing is decided only by our own rules. */
 margin: 0;
}

/* Styles the entire page. */
body {
 /* Uses the visitor's system font (clean and native-feeling), falling back to any sans-serif. */
 font-family: system-ui, sans-serif;
 /* Sets text color to our ink variable. */
 color: var(--ink);
 /* Paints the page background green so the color appears beside the centered content on wide screens. */
 background: var(--green);
 /* 1.6x line spacing makes paragraphs noticeably easier to read. */
 line-height: 2.0;
}
/*Set up the company name on its own background*/
.name-banner {
 /* Darker green distinguishes the business name from the navigation below it. */
 background: #3f5d4b;
 /* Centers the business name over the main content column.
Commented out because we're testing the background across the whole page. Text should be centered, the dark green should cover the whole viewport.
max-width: 52rem;
 margin: 0 auto;*/
 /* Gives the name room to breathe without making the banner oversized. */
 padding: 1.25rem 1.5rem;
 /* Centers the business name horizontally. */
 text-align: center;
}
.name-banner h1 {
 /* Makes the business name substantially more prominent than navigation text. */
 font-size: 3rem;
color: #ffffff;
 /* Bold weight gives the name a strong visual presence. */
 font-weight: 700;
}

/* Set up the nav bar at the top of every page. */
.nav-banner {
 /* Uses the same muted green as the page surroundings. */
 background: var(--green);
 /* Space inside the banner: 1 unit top/bottom, 2 units left/right. */
 padding: 1rem 2rem;
 /* Centers text inside the banner. */
 text-align: center;
}

/*Style the nav section with links individually, so other content can fit into the banner without taking on thee same alignment characteristics*/
.nav-banner nav {
 /* Enables flexbox layout, which arranges children in a row equidistant from each other. */
 display: flex;
 /* Lets flex items wrap onto a second row on narrow screens instead of squishing. */
 flex-wrap: wrap;
 /* Centers children vertically within the banner. */
 align-items: center;
 /* Sets a gap between items. Adjust this to move nav items closer together or further apart.*/
 gap: 4.5rem;
 /* Centers the banner contents over the page. */
 justify-content: center;
}

/* All links inside the banner (wordmark and nav links). */
.nav-banner a {
 /* White provides strong contrast against the green banner. */
 color: #fff;
/*Removes the default underline for a cleaner look.
 text-decoration: none;
No, now it just doesn't look like links at all*/
}

/* Nav links when hovered, or when marked as the current page. */
.nav-banner nav a:hover,
.nav-banner nav a[aria-current] {
 /* Slightly softened white keeps the banner visually distinct while preserving contrast. */
 color: #e8f0ea;
}

/* Draws a pipe separator after every nav link except the last, so links stay readable without cluttering the markup. */
.nav-banner nav a:not(:last-of-type)::after {
/* ASCII pipe character with spaces, rendered after each link. */
 content: " | ";
/*Skip this: we have a gap built in already with the spacing.*/
}
/*redundant: links should be underlined per above
Current page marker gains an underline so it does not rely on color alone.
.nav-banner nav a[aria-current] {
Underlines the current page's nav link.
 text-decoration: underline;
}*/

/* The content column that every page's text lives in. */
main {
 /* Caps the line length at 52rem so lines don't become exhausting to read. */
 max-width: 52rem;
 /* Left/right auto margins center the column in the viewport. */
 margin: 0 auto;
 /* Gives the content its own white surface. */
 background: #fff;
 /* Space inside: 2 units top, 1.5 sides, 3 bottom so content never touches the footer. */
 padding: 2rem 1.5rem 3rem;
}

/* Links inside the page content. */
main a {
 /* Uses the established cool purple accent. */
 color: var(--accent);
}

/* Keyboard focus: draws a strong outline so keyboard users can see where they are. */
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
 /* Solid 2px outline in the accent color, offset from the element for visibility. */
 outline: 2px solid var(--accent);
 /* Pushes the outline slightly away so it doesn't collide with borders. */
 outline-offset: 2px;
}

/* Fields when focused via keyboard or click. */
input:focus,
textarea:focus,
select:focus {
 /* Purple border gives clear feedback that a field is active. */
 border-color: var(--accent);
}

/* Removes the purple border on mouse-clicked fields (keyboard focus keeps it via :focus-visible). */
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
 /* Returns the field border to normal after a mouse click. */
 border-color: var(--border);
}

/* Section headings. */
h2 {
 /* Brand purple ties headings to the accent color used elsewhere. */
 color: var(--accent);
 /* Space above separates sections; smaller space below hugs the following text. */
 margin: 1.5rem 0 0.5rem;
}

/*same for h3*/
h3 {
 color: var(--accent);
 margin: 1.5rem 0 0.5rem;
}

/* Definition lists (used on the homepage). */
dl dt {
 /* Bold term names act as mini-headings for each description. */
 font-weight: 600;
 /* Space above separates each entry. */
 margin-top: 1rem;
}

/* Descriptions under dt terms. */
dd {
 /* Indents descriptions slightly under their terms. */
 margin-left: 1rem;
}

/* Bulleted and numbered lists inside content. */
ul, ol {
 /* Indents list items from the surrounding paragraph text. */
 padding-left: 1.5rem;
}

/* Data tables (pricing page only). */
table {
 /* Collapses the gap between cells so borders form a clean grid. */
 border-collapse: collapse;
 /* Space above the table separates it from preceding text. */
 margin: 1rem 0;
 /* Tables stretch to the full column width. */
 width: 100%;
}

/* Applies to both header and body cells of tables. */
th,
td {
 /* Thin gray border on every cell forms the grid. */
 border: 1px solid var(--border);
 /* Comfortable cell padding. */
 padding: 0.4rem 0.7rem;
 /* Left-aligns cell contents (browsers center th by default). */
 text-align: left;
}

/* Footer strip at the bottom of every page. */
footer {
 /* Gives the footer its own quiet gray region. */
 background: var(--footer-bg);
 /* Centers the footer text under the column. */
 text-align: center;
 /* Muted gray de-emphasizes it next to real content. */
 color: var(--muted);
 /* Slightly smaller text signals "fine print". */
 font-size: 0.85rem;
 /* Padding keeps it from sitting flush against the content above. */
 padding: 1rem;
}

/* Form labels. */
label {
 /* Each label starts on its own line. */
 display: block;
 /* Space above separates fields from each other. */
 margin-top: 1rem;
 /* Bold labels act as mini-headings for each field. */
 font-weight: 600;
}

/* Text inputs and the message textarea. */
input,
textarea {
 /* Full column width up to a readable maximum. */
 width: 100%;
 /* Caps width so fields stay reasonable on very wide screens. */
 max-width: 28rem;
 /* Inner padding makes the typing area feel roomy. */
 padding: 0.5rem;
 /* Gray border defines the field edge. */
 border: 1px solid var(--border);
 /* Small radius softens the controls without making them pill-shaped. */
 border-radius: 4px;
}

/* The submit button. */
button {
 /* Space above separates it from the last field. */
 margin-top: 1rem;
 /* Solid purple fill is the page's one strong call to action. */
 background: var(--accent);
 /* White text contrasts against the purple. */
 color: #fff;
 /* Removes the browser's default 3D border. */
 border: 0;
 /* Generous padding gives the button a comfortable click target. */
 padding: 0.6rem 1.5rem;
 /* Slightly larger text makes the button prominent. */
 font-size: 1rem;
 /* Pointer cursor signals clickability. */
 cursor: pointer;
 /* Small radius softens the button while preserving its rectangular character. */
 border-radius: 4px;
}

/* Button darkens on hover so it clearly responds. */
button:hover {
 /* Darker shade of the accent signals interactivity. */
 background: var(--accent-dark);
}