/*
Theme Name: Twig
Theme URI: https://twig.io/
Author: Joe Bunting
Description: twig.io, moved from Webflow and kept as it was: the live site's design rebuilt in plain CSS (from clients/twig/mockups/twig.css), self-hosted DM Sans, forms through Joe's Site Basics.
Version: 0.1.9
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twig
*/

/* ==========================================================================
   1. Tokens and base
   From clients/twig/mockups/twig.css. The root font size scales with the
   viewport, as on Webflow: that rule is in the head code (inc/site-code.php),
   verbatim, so every rem here follows it.
   ========================================================================== */

:root {
	--text: #282828;
	--text-2: #666;
	--line: #eee;
	--panel: #444;
	--glass: #1f1f1f80;
	--glass-dark: #1f1f1f66;
	--yellow: #ffc910;
	--blue: #3892bf;
	--light-blue: #61aed4;
	--white: #fff;
	--radius: 1.5rem;
	--wide: 80rem;
}

/* Webflow's own scaling (its global styles embed, which comes after the head
   code there and wins): 16px from 1440 up, easing to 14px at 1280, 12px at
   960 and on phones back up toward 16px at 479. Copied as it is. */
:root { --font-from: 16; --font-to: 16; --vw-from: calc(1440 / 100); --vw-to: calc(1600 / 100); --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from))); --base: calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16); }
html { font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw); }
@media screen and (max-width: 1440px) { :root { --font-from: 14; --font-to: 16; --vw-from: calc(1280 / 100); --vw-to: calc(1440 / 100); } }
@media screen and (max-width: 1280px) { :root { --font-from: 12; --font-to: 14; --vw-from: calc(960 / 100); --vw-to: calc(1280 / 100); } }
@media screen and (max-width: 960px) { :root { --font-from: 12; --font-to: 14; --vw-from: calc(479 / 100); --vw-to: calc(960 / 100); } }
@media screen and (max-width: 479px) { :root { --font-from: 12; --font-to: 16; --vw-from: calc(1 / 100); --vw-to: calc(479 / 100); } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); background: var(--white); font-family: "DM Sans", sans-serif; font-size: 1rem; line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
h1 { font-size: 3.5rem; line-height: 1.2; letter-spacing: -0.08rem; font-weight: 700; }
h2 { font-size: 3rem; line-height: 1.2; letter-spacing: -0.06rem; font-weight: 700; }
h3 { font-weight: 700; }
button { font: inherit; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed !important; top: 1rem; left: 1rem; z-index: 100; width: auto; height: auto; clip: auto; padding: 0.75rem 1rem; background: #fff; border-radius: 0.5rem; }

.wrap { width: 100%; max-width: calc(var(--wide) + 10%); margin: 0 auto; padding: 0 5%; }
.wrap.narrow { max-width: 48rem; }
.section { padding: 7rem 0; }
.center { text-align: center; }
.eyebrow { font-weight: 600; font-size: 1rem; margin-bottom: 1rem; }
.muted { color: var(--text-2); }
.lead { font-size: 1.125rem; }

/* Webflow's type scale, for the pages copied from it */
.h1 { font-size: 3.5rem; font-weight: 700; line-height: 1.2; }
.h2 { font-size: 3rem; font-weight: 700; line-height: 1.2; }
.h3 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.h4 { font-size: 2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.04rem; }
.h5 { font-size: 1.5rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.03rem; }
.h6 { font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.size-large { font-size: 1.25rem; }
.size-medium { font-size: 1.125rem; }
.size-small { font-size: 0.875rem; }
.size-tiny { font-size: 0.75rem; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }
.secondary-text { color: var(--text-2); }
.blue { color: var(--blue); }
.yellow { color: var(--yellow); }
.link-para { color: var(--text); text-decoration: underline; }
.link-para:hover, .text-style-link:hover { text-decoration: none; }
.text-style-link { text-decoration: underline; }

/* Headings with the photo texture showing through the letters */
.textured { background: var(--text) url(assets/img/texture-h1.png) 50% / cover repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.textured-2 { background: var(--text) url(assets/img/texture-h2.png) 50% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ==========================================================================
   2. Buttons: a gray gradient pill inside a gray gradient ring, yellow on hover
   ========================================================================== */

.button { display: inline-flex; padding: 0.25rem; border-radius: 2.75rem; background: linear-gradient(#f2f2f2, #afafaf); color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.5; transition: background 0.4s cubic-bezier(.23,1,.32,1); }
.button > span { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; border-radius: 2.5rem; background: #fff linear-gradient(#efefef66, #a7a7a766); transition: background 0.4s cubic-bezier(.23,1,.32,1); }
.button:hover { background: linear-gradient(#ffde43, #998528 75%); }
.button:hover > span { background: var(--yellow) linear-gradient(#efefef33, #b3b3b333); }
.button svg { width: 1.5rem; height: 1.5rem; flex: none; }
.button.has-icon > span { padding-right: 0.75rem; }
.button.secondary { background: none; }
.button.secondary > span { background: #fff; border: 1px solid var(--line); padding: 0.8125rem 1.5625rem; }
.button.secondary:hover > span { background: #fff; }
/* A thinner outline (Webflow's is-secondary on About and in the blog) */
.button.outline { padding: 0.45rem 1rem; border: 2px solid var(--line); background: none; color: #000; }
.button.outline > span { padding: 0; background: none; }
.button.outline:hover { background: linear-gradient(#f2f2f240, #afafaf40); }
.button.outline:hover > span { background: none; }
.buttons { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.buttons.center { justify-content: center; }

/* A submit button with the same ring, in one element: the pill paints the
   padding box, the ring the border box. */
.joes-form button[type="submit"] { display: inline-flex; align-items: center; border: 0.25rem solid transparent; border-radius: 2.75rem; padding: 0.75rem 1.5rem; font: inherit; font-weight: 600; line-height: 1.5; color: var(--text); cursor: pointer; background: linear-gradient(#efefef66, #a7a7a766) padding-box, linear-gradient(#fff, #fff) padding-box, linear-gradient(#f2f2f2, #afafaf) border-box; transition: background 0.4s cubic-bezier(.23,1,.32,1); }
.joes-form button[type="submit"]:hover { background: linear-gradient(#efefef33, #b3b3b333) padding-box, linear-gradient(var(--yellow), var(--yellow)) padding-box, linear-gradient(#ffde43, #998528 75%) border-box; }
.joes-form button[type="submit"][disabled] { opacity: 0.6; cursor: wait; }

/* ==========================================================================
   3. Floating glass nav
   ========================================================================== */

.nav { position: fixed; top: 1rem; left: 0; right: 0; z-index: 10; display: flex; justify-content: center; padding: 0 1rem; pointer-events: none; }
.admin-bar .nav { top: calc(1rem + 32px); }
.nav-bar { pointer-events: auto; display: flex; align-items: center; gap: 3.5rem; min-height: 4.5rem; padding: 0 0.75rem 0 2rem; border-radius: var(--radius); background: var(--glass); -webkit-backdrop-filter: blur(0.6rem); backdrop-filter: blur(0.6rem); box-shadow: 1.5rem 1.5rem 3rem #0003, 0.25rem 0.25rem 1rem #0003; }
.nav-logo img { height: 2rem; width: auto; }
.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-links a { color: #fff; text-decoration: none; font-weight: 400; font-size: 1rem; padding: 0.5rem 0.5rem; border-bottom: 2px solid transparent; }
.nav-links a:hover { border-bottom-color: #fff; }
.nav-links a.button { color: var(--text); padding: 0.25rem; border: 0; margin-left: 0.5rem; font-size: 1rem; font-weight: 600; }
/* Room for the nav above pages that don't start with a hero */
.nav-spacer { height: 6rem; }

/* ==========================================================================
   4. Home
   ========================================================================== */

.hero { position: relative; overflow: hidden; padding: 10rem 0 5rem; }
.hero-text { position: relative; z-index: 1; max-width: 56rem; margin: 0 auto; text-align: center; }
.hero .eyebrow { margin-bottom: 0.5rem; }
.hero h1 { font-size: 3rem; margin-bottom: 2rem; }
.hero-text > p:not(.eyebrow) { color: var(--text-2); }
.hero-lines { position: absolute; top: 15.5625rem; right: 0; width: 14.375rem; -webkit-mask-image: linear-gradient(90deg, #000, #0006 45%, #0004 75%, #0000); mask-image: linear-gradient(90deg, #000, #0006 45%, #0004 75%, #0000); }
.hero-lines.flip { right: auto; left: 0; transform: scaleX(-1); }
.features { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; max-width: 56rem; margin: 0.5rem auto 0; padding: 0.5rem 0; text-align: center; font-weight: 700; font-size: 1.1rem; line-height: 1.4; }
.features img { width: 3rem; height: 3rem; margin: 0 auto 1rem; object-fit: contain; }
.hero .buttons { margin: 5rem 0 0; }

/* Image and text */
.split { display: grid; grid-template-columns: 2fr 3fr; gap: 5rem; align-items: center; }
.split .eyebrow { font-weight: 400; margin-bottom: 0; }
.split .muted { font-size: 1rem; }
.split-img { position: relative; border-radius: var(--radius); overflow: hidden; }
.split-img img { width: 100%; }
.split-img .hover { position: absolute; inset: 0; transition: opacity 0.4s; }
.split-img:hover .hover { opacity: 0; }
.split h2 { margin-bottom: 1.5rem; }
.only-phone { display: none; }

/* Two plans side by side */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 64rem; margin: 0 auto; }
.plan { border-radius: var(--radius); padding: 2rem; }
.plan.plain { border: 1px solid var(--line); }
.plan.dark { background: var(--panel); color: #fff; box-shadow: 0.75rem 0.75rem 1.5rem #0006; }
.plan h3 { font-size: 1.1rem; line-height: 1.4; text-align: center; margin-bottom: 2rem; }
.plan ul { list-style: none; margin: 0; padding: 0.5rem 0; display: grid; gap: 1rem; color: var(--text-2); }
.plan.dark ul { color: #fff; }
.plan li { display: flex; gap: 1rem; }
.plan li svg { flex: none; width: 1.5rem; height: 1.5rem; }
.plan.plain li svg { color: #bbb; }
.plan.dark li svg { color: var(--yellow); }
.plan b { color: inherit; }
.plan.plain b { color: var(--text); }
.compare-note { max-width: 51.875rem; margin: 2.5rem auto 0; text-align: center; font-size: 1.125rem; color: var(--text-2); }
.compare-note + .buttons { margin-top: 0.5rem; }

/* FAQ */
.faq h2 { text-align: center; margin-bottom: 5rem; }
.faq-list { max-width: 56rem; margin: 0 auto; display: grid; gap: 1rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; font-weight: 700; font-size: 1.125rem; line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 2rem; height: 2rem; text-align: center; font-weight: 200; font-size: 2rem; line-height: 2rem; color: #ddd; }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 1.5rem 1.5rem; color: var(--text-2); }
.faq .answer p + p { margin-top: 1rem; }
.faq .answer a { color: var(--yellow); }

/* ==========================================================================
   5. Photo panel with a glass card ("Be part of what's next" and kin)
   ========================================================================== */

.photo-cta { position: relative; border-radius: 2.5rem; padding: 1.5rem; overflow: hidden; color: #fff; }
.photo-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.photo-cta::before { content: ""; position: absolute; inset: 0; background: #00000080; }
.photo-cta::after { content: ""; position: absolute; inset: 0; mix-blend-mode: color; background: radial-gradient(circle at 80% -40%, #efaf03 18%, #efaf0300 60%), linear-gradient(#61aed400, #61aed4); }
.photo-cta .glass { position: relative; z-index: 1; max-width: 40.5rem; padding: 3rem; border-radius: 2rem; background: var(--glass-dark); -webkit-backdrop-filter: blur(3.75rem); backdrop-filter: blur(3.75rem); box-shadow: 0 0 2rem #0003; font-size: 1.125rem; } /* the frosted blur is Webflow's .shadow */
.photo-cta h2 { font-size: 3.5rem; margin-bottom: 1.5rem; }
.photo-cta p + p { margin-top: 1.5rem; }
.photo-cta.no-photo-filter > img { filter: none; }
/* Contact and Showcase: gray until the pointer is on it, as on Webflow */
.photo-cta--hover-color .photo-cta::after { opacity: 0; transition: opacity 0.6s; }
.photo-cta--hover-color .photo-cta:hover::after { opacity: 1; }
.photo-cta .points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; font-size: 1.125rem; font-weight: 600; }
.photo-cta .points li { display: flex; align-items: center; gap: 1rem; }
.photo-cta .points .dot { flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--yellow); }
.photo-cta .points img { flex: none; width: 1.5rem; height: 1.5rem; }
.photo-cta .buttons { margin-top: 3rem; }

/* The signup inside it */
.twig-signup--glass .joes-form { margin-top: 2rem; display: grid; gap: 1rem; justify-items: start; }
.twig-signup--glass .joes-form__field { margin: 0; width: 100%; }
.twig-signup--glass .joes-form__field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.twig-signup--glass .joes-form { font-size: 1rem; }
.twig-signup--glass input[type="email"] { width: 100%; max-width: none; padding: 0.8125rem 0.75rem; border-radius: 0.5rem; border: 1px solid #ffffff33; background: #1f1f1f99; color: #fff; font: inherit; font-size: 1rem; line-height: 1.5; }
.twig-signup--glass input::placeholder { color: #ffffffb3; }
.twig-signup--glass .joes-form__actions { margin: 0; }
.twig-signup--glass .joes-form__status { font-weight: 600; }
.twig-signup--glass .joes-form__check { margin: 0; }

/* ==========================================================================
   6. Footer
   ========================================================================== */

.footer { padding: 5rem 0; }
.footer-panel { display: flex; justify-content: space-between; align-items: center; gap: 4vw; padding: 3rem; border-radius: var(--radius); background: var(--panel); color: #fff; border: 1px solid var(--line); }
.footer-panel img { width: 8rem; }
.footer-links { display: grid; gap: 0.5rem; justify-items: end; font-size: 0.875rem; font-weight: 600; }
.footer-links a { text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.3s; }
.footer-links a:hover { color: var(--yellow); }
.footer-base { display: flex; justify-content: space-between; gap: 1rem; padding-top: 2rem; font-size: 0.875rem; }
.footer-base nav { display: flex; gap: 1.5rem; }
.footer-base a { color: var(--yellow); }
.footer-base a:hover { text-decoration: none; }

/* ==========================================================================
   7. Shared pieces for the inner pages
   ========================================================================== */

.section-head { max-width: 56rem; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head .h2 { margin-bottom: 1.5rem; }

/* The animated lines either side of a section, fading toward the edges */
.side-lines { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; z-index: 0; }
.side-lines__one { position: absolute; top: 0; right: 0; width: 14.375rem; }
.side-lines__one.is-flipped { right: auto; left: 0; transform: scaleX(-1); }
.side-lines__one img { width: 100%; -webkit-mask-image: linear-gradient(90deg, #000, #0006 45%, #0004 75%, #0000); mask-image: linear-gradient(90deg, #000, #0006 45%, #0004 75%, #0000); }

/* A dark box whose right edge melts away (Webflow's blur box) */
.blur-box { position: relative; padding: 2rem; color: #fff; }
.blur-box::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 1.5rem; background: linear-gradient(90deg, var(--panel) 40%, transparent); }
.blur-box::after { content: ""; position: absolute; top: 0; bottom: 0; left: 10%; width: 90%; z-index: 0; border-radius: 50% 1.5rem 1.5rem 50%; background: var(--panel); filter: blur(0.375rem); }
.blur-box > * { position: relative; z-index: 2; }

/* Big image beside text, the image swapping to its color version on hover */
.media-row { display: grid; grid-template-columns: 7fr 8fr; gap: 5rem; align-items: stretch; }
.media-row--text-first { grid-template-columns: 8fr 7fr; }
.media-row__img { position: relative; height: 40rem; border-radius: 2rem; overflow: hidden; }
.media-row__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.media-row__img--cover img { object-fit: cover; }
.hover-swap .hover-swap__top { transition: opacity 0.4s; }
.hover-swap:hover .hover-swap__top { opacity: 0; }
.media-row__text { display: flex; flex-direction: column; justify-content: center; }
.media-row__text .h3 { margin-bottom: 2rem; }
.media-row__text--plain p + p { margin-top: 2rem; }
.dot-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.5rem; font-size: 1.125rem; font-weight: 700; }
.dot-list li { position: relative; padding-left: 1.75rem; }
.dot-list li::before { content: ""; position: absolute; left: 0; top: 0.4rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--yellow); }
.media-row__text > .secondary-text { margin-bottom: 2rem; }
.get-list { display: grid; gap: 2rem; }
.get-list > div { display: flex; align-items: flex-start; gap: 1.5rem; }
.get-list img { flex: none; width: 3rem; height: 3rem; }
.get-list .h5 { margin-bottom: 1rem; }

/* A five-star quote */
.quote { position: relative; padding: 3.5rem 0; }
.quote__inner { position: relative; z-index: 1; max-width: 56rem; margin: 0 auto; text-align: center; }
.stars { display: flex; justify-content: center; align-items: center; gap: 0.25rem; height: 1.625rem; margin-bottom: 2rem; color: var(--blue); }
.stars svg { width: 1.25rem; height: 1.2rem; }
.quote__text, .quote__more { letter-spacing: -0.03rem; }
.quote__more { color: var(--text-2); font-weight: 700; }
.quote__more a { color: inherit; text-decoration: none; }
.quote__by { margin-top: 2rem; }
.quote--lines .side-lines { top: 0; }

/* Buttons on photos: a white outline */
.button.ghost { padding: 0.25rem; background: none; border: 0.125rem solid var(--line); color: #fff; }
.button.ghost > span { background: none; padding: 0.75rem 1.25rem; }
.button.ghost:hover { background: var(--glass-dark); box-shadow: 0 0.25rem 1rem -0.125rem #ffffff59; }
.button.ghost:hover > span { background: none; }
.button.outline.small { color: var(--text-2); }

/* ==========================================================================
   8. About
   ========================================================================== */

.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.intro .eyebrow { margin-bottom: 0; }
.intro-copy p + p { margin-top: 1.5em; }
.intro-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5rem; margin: 5rem 0; font-weight: 700; }
.intro-features > div { display: flex; align-items: center; gap: 1rem; }
.intro-features img { flex: none; width: 3rem; height: 3rem; }
.about-editor { padding: 7rem 0 5rem; }
.about-editor__head { max-width: 48rem; margin: 0 auto 4rem; }
.about-editor__head .h1 { margin-bottom: 1.5rem; }
.feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 5rem; }
.feature-card { border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; }
.feature-card img { width: 3rem; height: 3rem; margin-bottom: 1.5rem; }
.feature-card .h5 { margin-bottom: 1rem; }
.feature-cards__after { margin-top: 5rem; }
.feature-cards__after p { margin-bottom: 1rem; }
.founder { position: relative; }
.side-lines--founder { top: 25%; }
.founder__inner { position: relative; z-index: 1; max-width: 36.25rem; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }
.founder .blur-box .h3 { margin-bottom: 2rem; text-align: center; }
.founder .blur-box p { font-size: 1.125rem; }
.founder .blur-box p + p, .founder__signature { margin-top: 2rem; }
.founder__signature { width: 11.75rem; }
.team-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 5rem; }
.team-member { display: flex; align-items: center; gap: 2rem; }
.team-member__photo { flex: 0 0 40%; padding: 0.5rem; border-radius: 1rem; background: #1f1f1f66; filter: grayscale(1); transition: all 0.4s; }
.team-member__photo:hover { filter: none; background: #1f1f1fcc; }
.team-member__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.75rem; }
.team-member__bio { margin-top: 1rem; }
.social-link { display: inline-block; margin-top: 1.5rem; color: #000; transition: color 0.4s; }
.social-link:hover { color: var(--yellow); }
.social-link svg { display: block; width: 1.5rem; height: 1.5rem; }
.photo-cta--h1-small h2 { font-size: 3rem; }
.photo-cta--h1-small .points { margin: 3rem 0 0; }

/* ==========================================================================
   9. Contact
   ========================================================================== */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.contact__text .eyebrow { margin-bottom: 1rem; }
.contact__text .h2 { margin-bottom: 1.5rem; }
.contact__text p + p { margin-top: 1.5rem; }
.contact-form .joes-form { display: grid; gap: 1.5rem; }
.contact-form .joes-form__field { margin: 0; }
.contact-form .joes-form__field > label { display: block; font-weight: 400; margin-bottom: 0.5rem; }
.contact-form .joes-form__req { display: none; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; max-width: none; min-height: 3rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 0.25rem; font: inherit; color: var(--text); background: #fff; }
.contact-form textarea { min-height: 11.25rem; resize: vertical; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { margin-bottom: 10px; }
.contact-form textarea::placeholder { color: #999; font-size: 0.875rem; }
.contact-form .joes-form__field--checkbox label { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; margin: 0; padding-bottom: 1rem; }
.contact-form .joes-form__field--checkbox input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--panel); }
.contact-form .joes-form__actions { margin: 0; }
.quote--lines .side-lines__one { top: 0; width: 14.375rem; }

/* ==========================================================================
   10. Showcase
   ========================================================================== */

.showcase-hero__grid { display: grid; grid-template-columns: 3fr 2fr; gap: 5rem; align-items: center; }
.showcase-hero .h2 { margin: 1rem 0 1.5rem; }
.showcase-hero .buttons { margin-top: 2rem; }
.showcase-hero__note { margin-top: 2rem; }
.showcase-hero__img { border-radius: 2.5rem; overflow: hidden; }
.showcase-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.showcase-list-section { position: relative; }
.side-lines--showcase { top: 20%; filter: blur(3px); }
.showcase-list { position: relative; z-index: 1; display: flex; gap: 2rem; }
.showcase-item { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }
.showcase-item__by { margin: 0 0 1.5rem; }

/* ==========================================================================
   11. Dev Edit (the upload widget styles itself)
   ========================================================================== */

.dev-edit { padding: 10rem 0 5rem; }
.dev-edit__inner { max-width: 56rem; margin: 0 auto; }
.dev-edit h1 { font-size: 3rem; margin-bottom: 1.5rem; }
.dev-edit__widget { margin-top: 5rem; text-align: left; }

/* ==========================================================================
   12. Dev Edit Pricing
   ========================================================================== */

.pricing-hero__grid { display: grid; grid-template-columns: 3fr 2fr; gap: 5rem; align-items: center; }
.pricing-hero__text .h1 { margin-bottom: 1.5rem; }
.strike { text-decoration: line-through; }
.guarantee { display: grid; gap: 1rem; margin-top: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 2rem; }
.guarantee__head { display: flex; align-items: center; gap: 1rem; }
.guarantee__head svg { display: block; width: 2rem; height: 2rem; }
.pricing-widget-wrap { padding: 2rem; border-radius: 2rem; background: var(--glass-dark); }
.pricing-widget { display: flex; flex-direction: column; gap: 2rem; min-height: 37.1875rem; padding: 2rem; border-radius: 1rem; background: #1f1f1fcc; color: #fff; }
.pricing-widget__row { display: flex; justify-content: space-between; align-items: center; }
.pricing-widget__muted { color: #fffc; }
.pricing-widget__price, .pricing-widget__edits { display: grid; gap: 0.5rem; }
.selected-edit { padding: 1rem; border-radius: 0.75rem; background: var(--text-2); transition: all 0.3s; }
.selected-edit:hover { background: #3892bfcc; }
.selected-edit.active { background: var(--blue); }
.payment-select-wrapper { display: contents; }
.hide { display: none !important; }
.bonus { position: relative; }
.side-lines--bonus { top: 25%; }
.bonus__box { max-width: 44.75rem; margin: 0 auto; }
.bonus__box .h3 { text-align: center; margin: 0 0 1.5rem; }
.photo-cta--pricing h2 { margin-bottom: 1.5rem; }
.photo-cta--pricing .points { margin-top: 0; }

/* ==========================================================================
   13. The blog
   ========================================================================== */

.blog-section { padding: 10rem 0 0; }
.blog__head { max-width: 56rem; margin: 0 auto 5rem; }
.blog__head .eyebrow { margin-bottom: 1rem; }
.blog__head .h1 { margin-bottom: 1.5rem; }
.blog__grid { display: grid; grid-template-columns: 15rem 1fr; gap: 4rem; align-items: start; }
.blog__side { position: sticky; top: 7rem; display: grid; gap: 1.5rem; }
.blog-cats { display: flex; flex-direction: column; }
.blog-cats__title { font-size: 1.125rem; font-weight: 500; margin-bottom: 1.5rem; }
.blog-cats__link { padding: 0.75rem 1rem; text-decoration: none; transition: all 0.4s; }
.blog-cats__link.current { background: var(--line); font-weight: 600; }
.blog-cats__link:hover { background: var(--line); }
.blog-search { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; border-radius: 1rem; background: #f2f2f2; box-shadow: 0 0.25rem 1rem 0 #a7a7a766; }
.blog-search__input { width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #fff3; background: #1f1f1f66; color: #fff; font: inherit; }
.blog-search__input::placeholder { color: #ffffffa6; }
.blog-search__button { width: 100%; padding: 0.5rem; border: 0.25rem solid #f2f2f2; border-radius: 2.75rem; background: #fff; font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.4s; }
.blog-search__button:hover { background: var(--panel); color: #fff; }
.blog__featured { margin-bottom: 4rem; }
.blog__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 2rem; }
.blog__more { margin-top: 4rem; }
.blog__none { color: var(--text-2); }
.post-card__link { display: block; color: var(--text); text-decoration: none; }
.post-card__img { position: relative; overflow: hidden; border-radius: 1.5rem; background: #f5f5f5; margin-bottom: 1.5rem; }
.post-card--featured .post-card__img { border-radius: 2.25rem; }
.post-card__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1); }
/* Hover, as Webflow's blog-hover-in/out: the picture stays gray while the yellow and blue
   wash (mix-blend-mode: color) and Read More fade in over half a second, and back out. */
.post-card__img::after, .related-card__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color; background: linear-gradient(#ffffff0d, #ffffff0d), radial-gradient(circle at 80% -40%, #efaf03 18%, #efaf0300 60%), linear-gradient(#61aed400, #61aed4); opacity: 0; transition: opacity 0.5s cubic-bezier(0.86, 0, 0.07, 1); }
.post-card__more { position: absolute; z-index: 1; top: 40%; left: 35%; padding: 1rem 1.25rem; border-radius: 1.145rem; background: var(--glass-dark); color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1.3; opacity: 0; transition: opacity 0.5s cubic-bezier(0.86, 0, 0.07, 1); }
.post-card--featured .post-card__more { left: 38%; padding: 1.25rem 1.5rem; font-size: 2rem; }
.post-card__link:hover .post-card__img::after, .post-card__link:hover .post-card__more, .related-card:hover .related-card__img::after, .related-card:hover .post-card__more { opacity: 1; transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
.post-card__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.tag { display: inline-flex; padding: 0.25rem 0.5rem; background: var(--line); color: #000; font-size: 0.875rem; font-weight: 600; }
.post-card__title { margin-bottom: 0.5rem; }
.post-card--featured .post-card__title { margin-bottom: 1rem; }
.post-card__read { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; line-height: 1; }
.post-card__read svg { width: 1rem; height: 1rem; }
.post-card__link:hover .post-card__read { text-decoration: underline; }

/* Search page (/search/?query=) */
.search-page { padding: 10rem 0 0; }
.search-page__none { margin: 3rem 0; }
.search-page__list { margin: 3rem 0; }
.search-page__form { display: grid; gap: 0.625rem; }
.search-page__form .blog-search__button { border-color: #f2f2f2; }

/* ==========================================================================
   14. A post
   ========================================================================== */

.post-head { position: relative; padding: 10rem 0 0; overflow-x: clip; }
.side-lines--post { top: 9rem; left: auto; right: -2%; width: 14.375rem; }
.side-lines--post .side-lines__one.is-flipped { display: none; }
.post-head__text { position: relative; z-index: 1; max-width: 56rem; margin-bottom: 5rem; }
.breadcrumb { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 2rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb svg { width: 1rem; height: 1rem; }
.post-head .h2 { margin-bottom: 3rem; }
.post-head__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.byline { display: flex; align-items: center; gap: 1rem; }
.byline img { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.byline__date { margin-top: 0.25rem; }
.byline--small img { width: 3rem; height: 3rem; }
.share { display: flex; gap: 0.5rem; }
.share__link { position: relative; display: block; padding: 0.25rem; border: 0; border-radius: 50%; background: var(--line); color: var(--text); cursor: pointer; transition: background 0.4s; }
.share__link:hover { background: var(--yellow); }
.share__link svg { display: block; width: 1.5rem; height: 1.5rem; }
.share__copied { position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: var(--panel); color: #fff; font-size: 0.75rem; white-space: nowrap; }
.post-head__img { border-radius: 2.25rem; overflow: hidden; }
.post-head__img img { width: 100%; }
.post-body { padding: 7rem 0; }
.post-body__inner { max-width: 37.5rem; margin: 0 auto; }
.rich-text > :first-child { margin-top: 0; }
.rich-text p { margin: 1rem 0; }
.rich-text h2 { font-size: 3rem; margin: 0 0 1.5rem; }
.rich-text h3 { font-size: 2.5rem; line-height: 1.2; margin: 0 0 1.25rem; }
.rich-text h4 { font-size: 2rem; line-height: 1.3; margin: 0 0 1rem; }
.rich-text h5 { font-size: 1.5rem; margin: 0 0 1rem; }
.rich-text h6 { font-size: 1.25rem; margin: 0 0 1rem; }
.rich-text li { margin: 0.5rem 0; }
.rich-text img { border-radius: 1.5rem; }
.rich-text figure { margin: 2rem 0; }
.rich-text figcaption { padding-left: 0.625rem; font-size: 0.875rem; }
.rich-text blockquote { position: relative; margin: 0 0 1.25rem; padding: 1.2rem 1.55rem; border-radius: 1.5rem; background: var(--panel); color: #fff; font-size: 1.25rem; font-style: italic; line-height: 1.4; box-shadow: 4px 5px 13px 4px #00000040; }
.post .rich-text a { color: var(--blue); text-decoration: underline; }
.post-share { margin-top: 4rem; }
.post-share .share { margin-top: 1rem; }
.post-author { margin-top: 2.5rem; }
.post-author__bio { margin-top: 1.5rem; padding: 1.5rem; border-radius: 1.5rem; background: #f2f2f2; }
.post-signup { padding-top: 0; }
.post-signup .h2 { margin-bottom: 2rem; }
.twig-signup--blog { max-width: 30rem; margin: 0 auto; }
.twig-signup--blog .joes-form { display: flex; gap: 1rem; align-items: center; }
.twig-signup--blog .joes-form__field { flex: 1; margin: 0; padding: 0.125rem; border-radius: 0.625rem; background: var(--glass-dark); box-shadow: 1.25rem 1.25rem 1.75rem #00000017, 0.3125rem 0.3125rem 0.9375rem #0000001a; }
.twig-signup--blog .joes-form__field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.twig-signup--blog input[type="email"] { width: 100%; max-width: none; padding: 0.75rem; border: 0; border-radius: 0.5rem; background: #1f1f1f66; color: #fff; font: inherit; }
.twig-signup--blog input::placeholder { color: #ffffffbf; }
.twig-signup--blog .joes-form__actions { margin: 0; }
.twig-signup--blog .joes-form button[type="submit"] { min-width: 7.875rem; justify-content: center; padding: 0.6rem 1.5rem; color: #fff; background: linear-gradient(#61aed466, #152b3c66) padding-box, linear-gradient(var(--blue), var(--blue)) padding-box, linear-gradient(#96c8e3, #536e7d) border-box; }
.twig-signup--blog .joes-form button[type="submit"]:hover { color: #000; background: linear-gradient(#efefef66, #a7a7a766) padding-box, linear-gradient(#fff, #fff) padding-box, linear-gradient(#f2f2f2, #afafaf) border-box; }
.twig-signup--blog .joes-form__status, .twig-signup--blog .joes-form__check { flex-basis: 100%; }
.twig-signup--blog .joes-form { flex-wrap: wrap; }
.twig-signup__terms { margin-top: 1.5rem; font-size: 0.75rem; }
.latest__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; margin-bottom: 5rem; }
.latest__head .eyebrow { margin-bottom: 1rem; }
.latest__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 3rem; align-items: start; }
.post-card--square .post-card__img img { aspect-ratio: 1; }
.post-card--square .post-card__more { top: 40%; left: 15%; padding: 0.85rem 1rem; font-size: 1.5rem; }
.related__head { margin-bottom: 5rem; }
.related__head .eyebrow { margin-bottom: 1rem; }
.related__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem 2rem; margin-bottom: 4rem; }
.related-card { display: block; color: var(--text); text-decoration: none; }
.related-card__img { position: relative; margin-bottom: 1.5rem; border-radius: 1.5rem; overflow: hidden; background: #f5f5f5; }
.related-card__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); }
.related-card .post-card__more { top: 40%; left: 30%; }
.related-card .h5 { margin: 0.5rem 0; }
.related-card__excerpt { margin-bottom: 1.5rem; }

/* ==========================================================================
   15. Legal pages and anything else from the editor, and Not Found
   ========================================================================== */

.legal { padding: 10rem 0 0; }
.legal__inner { max-width: 58.75rem; margin: 0 auto; }
.legal .rich-text h2 { font-size: 3rem; margin: 0; background: var(--text) url(assets/img/texture-h2.png) 50% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.legal .rich-text p { margin: 0; }
.legal .rich-text ul, .legal .rich-text ol { margin: 0 0 0.625rem; padding-left: 2.5rem; }
.legal .rich-text li { margin: 0; }
.legal .rich-text a { color: var(--blue); }
.not-found { padding: 12rem 0 5rem; }
.not-found .h2 { margin-bottom: 1rem; }
.not-found .buttons { margin-top: 2rem; }

/* ==========================================================================
   99. Phone
   ========================================================================== */

@media (max-width: 767px) {
	h1 { font-size: 2.5rem; }
	.hero h1 { font-size: 3rem; }
	.size-medium, .compare-note, .photo-cta .glass, .faq summary { font-size: 1rem; }
	.faq summary { padding: 1rem 1.25rem; }
	.faq .answer { padding: 0 1.25rem 1.25rem; }
	h2 { font-size: 2.25rem; }
	.section { padding: 4rem 0; }
	.nav-bar { width: 100%; justify-content: space-between; padding-left: 1.25rem; gap: 1rem; }
	.nav-links .desktop { display: none; }
	.hero { padding-top: 8rem; }
	.hero-lines { display: none; }
	.features { grid-template-columns: 1fr; gap: 1.5rem; }
	.hero .buttons { margin-top: 2.5rem; }
	.split, .compare { grid-template-columns: 1fr; gap: 2rem; }
	.only-desktop { display: none; }
	.only-phone { display: block; }
	.photo-cta { padding: 0.75rem; border-radius: 1.75rem; }
	.photo-cta .glass { padding: 2rem 1.25rem; border-radius: 1.25rem; }
	.photo-cta h2 { font-size: 2.5rem; }
	.faq h2 { margin-bottom: 2.5rem; }
	.footer { padding-top: 4rem; }
	.footer-panel { padding: 1.5rem; }
	.footer-base { flex-direction: column; align-items: center; gap: 0.8rem; }
	.intro-grid, .contact-grid, .showcase-hero__grid, .pricing-hero__grid, .media-row, .media-row--text-first, .team-list, .blog__grid, .related__list, .blog__list { grid-template-columns: 1fr; gap: 3rem; }
	.media-row, .media-row--text-first { display: flex; flex-direction: column-reverse; }
	.media-row__img { height: 24rem; }
	.media-row { gap: 1.5rem; }
	.intro-features { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 3rem; }
	.feature-cards { grid-template-columns: 1fr; gap: 3rem; margin-top: 3rem; }
	.h1 { font-size: 2.5rem; }
	.h2, .rich-text h2, .legal .rich-text h2 { font-size: 2.25rem; }
	.h3, .rich-text h3 { font-size: 2rem; }
	.h4 { font-size: 1.5rem; line-height: 1.4; }
	.h5 { font-size: 1.25rem; }
	.team-member { flex-direction: column; align-items: stretch; gap: 1.5rem; }
	.team-member__photo { flex: none; }
	.showcase-list { flex-direction: column; gap: 3rem; }
	.blog-section, .search-page, .legal, .post-head, .dev-edit { padding-top: 7rem; }
	.blog__side { position: static; order: 2; } /* phones: categories and search under the posts */
	.post-head__meta { flex-direction: column; align-items: flex-start; }
	.post-body { padding: 2.5rem 0; }
	.side-lines { display: none; }
	.pricing-widget { min-height: 0; padding: 1.5rem 1rem; }
	.pricing-widget-wrap { padding: 1.5rem 1rem; }
	.photo-cta--h1-small h2 { font-size: 2.5rem; }
	.twig-signup--blog .joes-form { flex-direction: column; align-items: stretch; }
	.latest__list { grid-template-columns: 1fr; gap: 3rem; }
	.latest__head { flex-direction: column; align-items: flex-start; gap: 2rem; }
	.about-editor { padding: 2.5rem 0; }
}

@media (max-width: 782px) {
	.admin-bar .nav { top: calc(1rem + 46px); }
}