/* Fonts are served from /fonts (not from Google), trimmed to Latin and to the weights the site uses. See site/fonts/README.txt. */ @font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolage-latin-v1.woff2') format('woff2'); font-weight: 500 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolage-rupee-v1.woff2') format('woff2'); font-weight: 500 800; font-style: normal; font-display: swap; unicode-range: U+20B9; } @font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-v1.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+00B7, U+2190, U+2192, U+2212; } @font-face { font-family: 'Figtree'; src: url('/fonts/figtree-rupee-v1.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+20B9; } @font-face { font-family: 'Caveat'; src: url('/fonts/caveat-latin-v1.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Layout concept: flat colour bands, cream cards with thick forest outlines, a logo badge hanging from the top edge, step cards that stack as you scroll, offer cards that swipe sideways. */ --mint: #D3F5DB; --leaf: #B7EAC4; --green: #3DBE72; --yellow: #FFD84A; --cream: #FFF9E8; --ink: #10261A; --forest: #0F3D2A; --mute: #4F6B5A; --font-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --line: 3px solid var(--ink); --r-lg: 36px; --r-md: 22px; --gap: clamp(16px, 2.4vw, 28px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--mint); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; } img, svg { max-width: 100%; } a { color: inherit; } h1, h2, h3, p, ul { margin: 0; } ul { padding: 0; list-style: none; } /* type */ h1, h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.02; text-wrap: balance; } h1 { font-size: clamp(44px, 8.6vw, 104px); } h2 { font-size: clamp(36px, 6vw, 68px); } h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.05; letter-spacing: 0.01em; text-wrap: balance; } em { font-style: italic; } .eyebrow { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; } .lede { font-size: clamp(18px, 2.2vw, 21px); max-width: 60ch; text-wrap: pretty; } .small { font-size: 14px; color: var(--mute); } /* placeholder and review markers */ .pt { color: var(--mute); font-style: italic; border-bottom: 2px dashed var(--mute); } .rv { display: inline-flex; align-items: center; gap: 6px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; font: 700 12px/1.5 var(--font-body); text-transform: none; letter-spacing: 0; vertical-align: middle; white-space: nowrap; } .rv::before { content: '\25B2'; font-size: 9px; } /* layout */ .band { width: 100%; padding-block: clamp(48px, 8vw, 96px); } .wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .stack { display: flex; flex-direction: column; gap: var(--gap); } .center { text-align: center; align-items: center; } .center .lede { margin-inline: auto; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .grid2 > *, .grid3 > * { min-width: 0; } @media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: 1fr; } } .bg-mint { background: var(--mint); } .bg-leaf { background: var(--leaf); } .bg-yellow { background: var(--yellow); } .bg-green { background: var(--green); } .bg-forest { background: var(--forest); color: var(--cream); } /* cards, buttons, chips */ .card { background: var(--cream); border: var(--line); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 44px); } .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 10px 28px; border-radius: 999px; border: var(--line); font: 700 17px/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .btn:hover { transform: translateY(-2px); } .btn-dark { background: var(--ink); color: var(--cream); } .btn-light { background: var(--cream); color: var(--ink); box-shadow: 0 5px 0 var(--ink); } .btn-yellow { background: var(--yellow); color: var(--ink); box-shadow: 0 5px 0 var(--ink); } .btn-sm { min-height: 40px; padding: 6px 18px; font-size: 14px; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px 16px; } .center .btn-row { justify-content: center; } .chip { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 999px; padding: 7px 16px; background: var(--cream); font-weight: 700; font-size: 14px; } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .center .chips { justify-content: center; } .ph { border-style: dashed; background: transparent; color: var(--mute); font-weight: 500; font-style: italic; } .tag { display: inline-block; background: var(--ink); color: var(--cream); border-radius: 8px; padding: 3px 10px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .bg-forest :focus-visible, .foot :focus-visible { outline-color: var(--yellow); } /* photo / video placeholders */ .photo { display: grid; place-items: center; text-align: center; padding: 16px; background: repeating-linear-gradient(135deg, var(--leaf) 0 14px, var(--mint) 14px 28px); color: var(--ink); font-weight: 700; font-size: 14px; } .photo span { background: var(--cream); border: 2px dashed var(--ink); border-radius: 999px; padding: 6px 14px; } /* announcement bar */ .bar { background: var(--yellow); border-bottom: var(--line); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; } .bar .deco { width: 30px; height: 30px; } @media (max-width: 700px) { .bar .deco { display: none; } } /* header */ .head { position: relative; background: var(--mint); } .head-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; max-width: 1180px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .head nav { display: flex; gap: 22px; align-items: center; font-weight: 700; font-size: 16px; } .head nav.right { justify-content: flex-end; } .head nav a { text-decoration: none; padding: 8px 0; } .head nav a.btn { padding: 6px 18px; } .head nav a:hover { text-decoration: underline; text-underline-offset: 5px; } .badge { width: clamp(190px, 24vw, 240px); height: 82px; margin-top: -2px; grid-column: 2; background: var(--yellow); border: var(--line); border-top: none; border-radius: 0 0 120px 120px; display: grid; place-items: center; padding-top: 4px; text-decoration: none; } .menu-btn { display: none; justify-self: end; grid-column: 3; } .menu-panel { display: none; } @media (max-width: 860px) { .head nav { display: none; } .menu-btn { display: inline-flex; } .menu-panel.open { display: flex; flex-direction: column; gap: 4px; background: var(--cream); border-bottom: var(--line); padding: 12px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px)); } .menu-panel a { padding: 12px 4px; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--leaf); } } /* hero */ .hero { position: relative; text-align: center; overflow: hidden; } .hero .wrap { position: relative; z-index: 1; } .hero h1 { margin-block: 14px 22px; } .hero .deco-l, .hero .deco-r { position: absolute; width: 120px; height: 120px; z-index: 0; } .hero .deco-l { left: 4%; top: 22%; transform: rotate(-10deg); } .hero .deco-r { right: 4%; top: 18%; transform: rotate(12deg); } @media (max-width: 1080px) { .hero .deco-l, .hero .deco-r { display: none; } } .proof-strip { margin-top: 34px; } /* insight */ .callout { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .note { border-left: 5px solid var(--ink); padding: 4px 0 4px 16px; font-size: 15px; max-width: 70ch; } /* guide */ .guide-photo { border: var(--line); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; max-height: 560px; } .guide-photo .photo { height: 100%; } /* venn */ .venn-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gap); align-items: center; } .venn-card > * { min-width: 0; } @media (max-width: 860px) { .venn-card { grid-template-columns: 1fr; } } .venn { width: 100%; height: auto; display: block; } .venn .vt { font-family: var(--font-display); font-size: 21px; letter-spacing: 0.02em; text-transform: uppercase; fill: var(--ink); text-anchor: middle; } .venn .vc { font-family: var(--font-display); font-size: 40px; fill: var(--ink); text-anchor: middle; } /* steps */ .steps { display: flex; flex-direction: column; gap: 28px; } .step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(22px, 4vw, 48px); } .step > * { min-width: 0; } @media (min-width: 900px) { .step { position: sticky; top: calc(20px + var(--i) * 22px); } } @media (max-width: 860px) { .step { grid-template-columns: 1fr; } } .step h3 { font-size: clamp(34px, 5vw, 56px); margin-block: 6px 16px; } .lead-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; } .lead-list li { padding-left: 22px; position: relative; } .lead-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); } .media { display: flex; flex-direction: column; } .vid { position: relative; aspect-ratio: 16 / 10; border: var(--line); border-radius: var(--r-md); overflow: hidden; background: repeating-linear-gradient(135deg, var(--leaf) 0 14px, var(--mint) 14px 28px); display: grid; place-items: center; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .play { width: 74px; height: 74px; border-radius: 50%; background: var(--yellow); border: var(--line); cursor: pointer; display: grid; place-items: center; box-shadow: 0 5px 0 var(--ink); } .play svg { width: 28px; height: 28px; margin-left: 4px; } .vid .cap { position: absolute; left: 12px; top: 12px; } .takeaway { position: relative; border: var(--line); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); background: var(--cream); padding: 26px 18px 16px; font-size: 15px; } .takeaway .tag { position: absolute; left: 14px; top: -14px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); font-size: 14px; letter-spacing: 0.02em; text-transform: none; border-radius: 999px; padding: 3px 14px; } /* comparison */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; } .compare > * { min-width: 0; } .others { display: flex; flex-direction: column; gap: 16px; } .other { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-md); } .us-card { background: var(--yellow); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .us-card h3 { font-size: clamp(34px, 4.4vw, 52px); } @media (min-width: 861px) { .us-card { position: sticky; top: 24px; } } @media (max-width: 860px) { .compare { grid-template-columns: 1fr; } .us-card { order: -1; } } /* problem: the two paths */ .flows { align-items: stretch; } .flow { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .flow ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 30px; width: 100%; } .flow li { position: relative; border: 2px solid var(--ink); border-radius: 16px; padding: 14px 18px; background: var(--cream); font-weight: 700; font-size: 18px; } .flow li:not(:last-child)::after { content: '\2193'; position: absolute; left: 50%; bottom: -29px; transform: translateX(-50%); font-family: var(--font-display); font-size: 24px; line-height: 1; } .flow .return { font-weight: 700; display: inline-flex; gap: 8px; align-items: center; border: 2px dashed var(--ink); border-radius: 999px; padding: 5px 14px; font-size: 15px; } .flow.loop { background: var(--cream); } .flow.path { background: var(--yellow); } .flow.loop li { background: transparent; border-style: dashed; } /* comparison chart */ .chart-card { padding: clamp(14px, 2.4vw, 28px); } .chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); } .chart { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 780px; } .chart th, .chart td { padding: 14px 10px; text-align: center; border-bottom: 2px solid var(--ink); background: var(--cream); } .chart thead th { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 19px; line-height: 1.1; letter-spacing: 0.02em; vertical-align: bottom; } .chart tbody th { text-align: left; font-weight: 700; position: sticky; left: 0; z-index: 1; min-width: 200px; border-right: 2px solid var(--ink); } .chart thead th:first-child { position: sticky; left: 0; z-index: 1; border-right: 2px solid var(--ink); } .chart .us { background: var(--yellow); border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); } .chart thead .us { border-top: 3px solid var(--ink); border-radius: 18px 18px 0 0; } .chart tbody tr:last-child td, .chart tbody tr:last-child th { border-bottom: none; } .chart tbody tr:last-child .us { border-bottom: 3px solid var(--ink); border-radius: 0 0 18px 18px; } .m { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); font-weight: 700; font-size: 18px; line-height: 1; } .m.yes { background: var(--green); } .m.no { background: var(--cream); } .m.q { border-style: dashed; color: var(--mute); background: transparent; font-style: italic; font-weight: 500; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .chart-key { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 16px; font-size: 14px; } .chart-key span.k { display: inline-flex; gap: 8px; align-items: center; } .chart-key .m { width: 26px; height: 26px; font-size: 14px; } @media (max-width: 900px) { .chart { min-width: 640px; } .chart tbody th { min-width: 128px; font-size: 14px; padding: 12px 8px; } .chart th, .chart td { padding: 12px 6px; } .chart thead th { font-size: 16px; } .m { width: 32px; height: 32px; } } .chart-hint { display: none; margin-top: 10px; } @media (max-width: 900px) { .chart-hint { display: block; } } /* visual library */ .garland { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 clamp(18px, 3vw, 30px); } .garland svg { width: clamp(34px, 5.4vw, 60px); height: clamp(34px, 5.4vw, 60px); transform: rotate(var(--r)); flex: none; } @media (max-width: 640px) { .garland svg:nth-child(even) { display: none; } .garland { justify-content: space-around; } } .step-top { display: flex; align-items: center; gap: 12px; } .step-top .ico { width: 52px; height: 52px; } .flow li .ico-s { width: 34px; height: 34px; vertical-align: middle; margin-right: 8px; flex: none; } .flow.path li { display: flex; align-items: center; } .manual .num svg { width: 26px; height: 26px; } /* offers */ .rail-wrap { position: relative; } .rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 26px; -webkit-overflow-scrolling: touch; } .offer { flex: 0 0 min(310px, 80vw); scroll-snap-align: start; display: flex; flex-direction: column; border: var(--line); border-radius: var(--r-lg); background: var(--cream); overflow: hidden; } .offer .art { position: relative; height: 150px; border-bottom: var(--line); display: grid; place-items: center; } .offer .art .tag { position: absolute; left: 14px; top: 14px; } .offer .art svg { width: 76px; height: 76px; } .offer .art.a1 { background: var(--yellow); } .offer .art.a2 { background: var(--leaf); } .offer .art.a3 { background: var(--mint); } .offer .body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; align-items: flex-start; } .offer .price { font-family: var(--font-display); font-size: 40px; line-height: 1; margin-top: auto; padding-top: 6px; } .offer .price small { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--mute); margin-left: 6px; } .offer .quote { font-size: 14px; border-top: 2px dashed var(--ink); padding-top: 10px; color: var(--mute); width: 100%; } .rail-btns { display: none; gap: 10px; justify-content: flex-end; margin-bottom: 14px; } @media (min-width: 900px) { .rail-btns { display: flex; } } .round { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; font-size: 20px; } /* manual */ .outcomes { display: flex; flex-direction: column; gap: 16px; } .outcomes li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; } .outcomes .dot { width: 52px; height: 52px; border-radius: 50%; border: var(--line); background: var(--yellow); display: grid; place-items: center; font-family: var(--font-display); font-size: 24px; } .outcomes p { font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; } .manual { display: flex; flex-direction: column; gap: 14px; background: var(--cream); } .manual-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .asmt { display: grid; grid-template-columns: 40px 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 16px; } .asmt .num { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-size: 20px; background: var(--leaf); } .asmt.locked { background: transparent; border-style: dashed; color: var(--mute); } .asmt.locked .num { background: transparent; } .asmt .name { font-weight: 700; } .asmt .status { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .asmt .bar-track { grid-column: 2 / 4; height: 10px; border-radius: 999px; border: 2px solid var(--ink); background: var(--cream); overflow: hidden; } .asmt .bar-fill { display: block; height: 100%; background: var(--green); } .asmt.locked .bar-track { border-style: dashed; } /* proof */ .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; } .proof-grid > * { min-width: 0; } @media (max-width: 960px) { .proof-grid { grid-template-columns: 1fr; } } .chat { background: var(--cream); display: flex; flex-direction: column; gap: 10px; padding: 18px; } .chat-head { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--leaf); border: 2px solid var(--ink); flex: none; } .blur { filter: blur(5px); user-select: none; font-weight: 700; } .bubble { max-width: 88%; padding: 9px 13px; border-radius: 16px; border: 2px dashed var(--ink); font-size: 15px; color: var(--mute); font-style: italic; } .bubble.in { background: var(--cream); border-top-left-radius: 4px; } .bubble.out { background: var(--leaf); align-self: flex-end; border-top-right-radius: 4px; } .quote-card { display: flex; flex-direction: column; gap: 12px; } .quote-card p.q { font-size: 18px; } /* free panels */ .split { display: grid; grid-template-columns: 1fr 1fr; border: var(--line); border-radius: var(--r-lg); overflow: hidden; } .split > * { min-width: 0; padding: clamp(26px, 4vw, 52px); display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; } .split .l { background: var(--leaf); } .split .r { background: var(--yellow); border-left: var(--line); } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split .r { border-left: none; border-top: var(--line); } } .email { display: flex; width: 100%; max-width: 440px; background: var(--cream); border: var(--line); border-radius: 999px; padding: 5px; box-shadow: 0 5px 0 var(--ink); } .email input { flex: 1; min-width: 0; border: none; background: transparent; font: 500 16px var(--font-body); color: var(--ink); padding: 0 16px; } .email input:focus-visible { outline: none; } .email:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; } .email .btn { min-height: 46px; padding: 6px 20px; } .form-msg { font-size: 14px; min-height: 22px; font-weight: 700; } /* faq */ details { background: var(--cream); border: var(--line); border-radius: var(--r-md); padding: 4px 22px; } details + details { margin-top: 12px; } summary { cursor: pointer; font-weight: 700; font-size: 18px; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; } summary::-webkit-details-marker { display: none; } summary::after { content: '+'; font-family: var(--font-display); font-size: 28px; line-height: 1; } details[open] summary::after { content: '\2212'; } details p { padding-bottom: 18px; max-width: 65ch; } .faq { max-width: 820px; margin-inline: auto; } /* final + footer */ .final h2 { color: var(--cream); } .final h2 em { color: var(--yellow); } .foot { background: var(--ink); color: var(--cream); padding-block: 44px 96px; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; } .foot-grid > * { min-width: 0; } @media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr; } } .foot ul { display: flex; flex-wrap: wrap; gap: 10px 22px; } .foot a { text-decoration: none; font-weight: 700; } .foot a:hover { text-decoration: underline; text-underline-offset: 4px; } .foot .small { color: #BCD6C5; } .foot .pt { color: #BCD6C5; border-color: #BCD6C5; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } } /* ===================== v2 skin, soft version: pastel greens and yellows, calm and light ===================== */ :root, html[data-palette="mid"] { --cream: #FDF9EC; --card: #FFFEF9; --sun: #FADB6E; --butter: #FDE487; --leaf: #C7EACC; --green: #65C289; --lime: #E4F1B0; --forest: #2E7252; --deep: #2E7252; --ink: #193324; --edge: #223F32; --mint: #DDF4E2; --sand: #F3E7CF; --bloom: #FAB2B4; --mute: #536C5E; --yellow: var(--sun); --line: 2.5px solid var(--edge); --sh: var(--sh); --sh-lg: var(--sh-lg); --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif; --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-hand: 'Caveat', 'Comic Sans MS', cursive; --r-lg: 30px; --r-md: 20px; } html[data-palette="green"] { --cream: #C9F7D1; --card: #FFFEF7; --sun: #FFD84A; --butter: #FFE45C; --leaf: #B4EEC3; --green: #3DBE72; --lime: #DDF58E; --forest: #1F7A4D; --deep: #14301F; --ink: #10261A; --edge: #10261A; --mint: #DDFBE3; --sand: #F5E6C6; --bloom: #FFA9B8; --mute: #3F5C4B; --line: 3px solid var(--edge); --sh: var(--sh-lg); --sh-lg: 7px 7px 0 var(--edge); } body { margin: 0; background: var(--cream); font-family: var(--font-body); color: var(--ink); } .bg-cream { background: var(--cream); } .bg-mint { background: var(--mint); } .bg-yellow { background: var(--butter); } .bg-leaf { background: var(--lime); } .bg-green { background: var(--leaf); } h1, h2, h3 { text-transform: none; letter-spacing: -0.025em; font-weight: 800; line-height: 1.04; } h1 { font-size: clamp(38px, 5vw, 66px); } h2 { font-size: clamp(32px, 4.6vw, 54px); } h3 { font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -0.015em; } .eyebrow { color: var(--deep); letter-spacing: .12em; } .hand { font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--deep); display: inline-block; transform: rotate(-2deg); } .hl { background: linear-gradient(transparent 58%, var(--sun) 58% 92%, transparent 92%); padding: 0 .08em; border-radius: 4px; } .card { background: var(--card); } .btn { border-width: 2.5px; border-color: var(--edge); box-shadow: var(--sh); transition: transform .12s ease, box-shadow .12s ease; } .btn:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-lg); } .btn-dark { background: var(--deep); color: #FFFEF9; border-color: var(--edge); } .btn-light { background: var(--card); color: var(--ink); box-shadow: var(--sh); } .btn-yellow { background: var(--sun); color: var(--ink); box-shadow: var(--sh); } .btn-arrow::after { content: '\2192'; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--butter); color: var(--ink); font-size: 16px; } .btn-arrow { gap: 14px; padding-right: 16px; } .chip { background: var(--card); border-color: var(--edge); } .chip.ph, .ph { border-color: var(--mute); } .tag { background: var(--deep); color: #FFFEF9; } .small { color: var(--mute); } /* header */ .head2 { position: relative; z-index: 5; padding-top: 18px; background: var(--cream); } .head2-in { max-width: 1180px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .jarlabel { position: relative; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: var(--card); border: var(--line); border-radius: 16px; padding: 7px 14px; margin-top: 12px; box-shadow: var(--sh); color: var(--ink); } .jarlabel::before { content: ''; position: absolute; left: 50%; top: -13px; width: 38px; height: 13px; transform: translateX(-50%); background: var(--sun); border: var(--line); border-bottom: none; border-radius: 9px 9px 0 0; } .jl-logo { display: block; height: 52px; width: auto; } /* the logo (assets/logo-wide.svg) in the hanging label */ .foot-brand { display: inline-flex; align-self: flex-start; background: var(--cream); border-radius: 16px; padding: 8px 14px; } .foot-brand .jl-logo { height: 46px; } .pillnav { display: flex; align-items: center; gap: 4px; background: var(--card); border: var(--line); border-radius: 999px; padding: 6px 8px 6px 14px; box-shadow: var(--sh); } .pillnav a { font-weight: 700; text-decoration: none; padding: 7px 12px; border-radius: 999px; font-size: 15px; white-space: nowrap; color: var(--ink); } .pillnav a:hover { background: var(--mint); } .pillnav a.btn { box-shadow: none; padding: 6px 18px; color: #FFFEF9; background: var(--deep); } .pillnav a.btn:hover { transform: none; background: var(--deep); } .menu-btn { grid-column: auto; margin-top: 12px; } @media (max-width: 1020px) { .pillnav a:not(.btn):nth-child(n+4) { display: none; } } @media (max-width: 860px) { .pillnav { display: none; } .menu-btn { display: inline-flex; } } /* hero: a light still life */ .hero2 { position: relative; overflow: hidden; padding-block: clamp(28px, 4vw, 56px) clamp(56px, 8vw, 100px); text-align: left; } .hero2-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; } .hero2-grid > * { min-width: 0; } .hero2-copy { align-items: flex-start; } .hero2-copy h1 { margin-block: 4px 6px; text-wrap: balance; } .hero2-art { position: relative; max-width: 480px; margin-inline: auto; width: 100%; } .still { width: 100%; height: auto; display: block; overflow: visible; } .still .blob { stroke: var(--edge); stroke-width: 2; } .still .rise, .scene .rise { fill: var(--card); stroke: var(--edge); stroke-width: 2; animation: rise2 3.6s ease-in infinite; transform-box: fill-box; } .still .rise.r2, .scene .rise.r2 { animation-delay: 1.2s; } .still .rise.r3, .scene .rise.r3 { animation-delay: 2.4s; } .still .rise.r4 { animation-delay: .6s; } @keyframes rise2 { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } } @media (max-width: 860px) { .hero2-grid { grid-template-columns: 1fr; } .hero2-art { max-width: 380px; } } /* later section: symptoms and root causes */ .roots-art { position: relative; width: 100%; max-width: 640px; margin-inline: auto; } .roots-art::before { content: ''; position: absolute; inset: 4% -4% 6% 2%; background: var(--butter); border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%; z-index: 0; opacity: .8; } .scene { position: relative; z-index: 1; width: 100%; height: auto; display: block; overflow: visible; } .scene .lab rect { fill: var(--card); stroke: var(--edge); stroke-width: 2; } .scene .lab text { font-family: var(--font-hand); font-weight: 700; font-size: 24px; fill: var(--ink); } .scene .lab.cause rect { fill: var(--sun); } .scene .lead { stroke: var(--edge); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; fill: none; } .scene .hand-cap { font-family: var(--font-hand); font-weight: 700; font-size: 32px; fill: var(--deep); } .scene .arrow { fill: none; stroke: var(--deep); stroke-width: 2.5; stroke-linecap: round; } @media (max-width: 860px) { .scene .lab text { font-size: 26px; } } /* brine-line dividers */ .brine { position: relative; height: clamp(34px, 4.4vw, 60px); background: var(--to); margin-top: -1px; } .brine svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .brine .bf { fill: var(--from); } .brine .bl { fill: none; stroke: var(--edge); stroke-width: 2; vector-effect: non-scaling-stroke; } .brine .bu { position: absolute; bottom: 22%; width: 12px; height: 12px; border: 2px solid var(--edge); border-radius: 50%; background: var(--card); opacity: 0; animation: bub 5s ease-in infinite; } .brine .u1 { left: 12%; animation-delay: .2s; } .brine .u2 { left: 38%; width: 9px; height: 9px; animation-delay: 1.6s; } .brine .u3 { left: 63%; animation-delay: 3s; } .brine .u4 { left: 86%; width: 10px; height: 10px; animation-delay: 2.2s; } @keyframes bub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } } .flow li { border-color: var(--edge); } .flow.path { background: var(--butter); } .flow.loop { background: var(--card); } .rv { background: var(--butter); border-color: var(--edge); } /* comparison chart */ .chart thead th { font-family: var(--font-display); font-weight: 800; text-transform: none; font-size: 17px; letter-spacing: -0.01em; } .chart .us { background: var(--butter); border-color: var(--edge); } .chart th, .chart td { border-color: var(--edge); } .m { border-color: var(--edge); } .m.yes { background: var(--green); } /* introduction */ .guide-photo { border-radius: 999px 999px 36px 36px; aspect-ratio: 4 / 5; max-height: 600px; border-color: var(--edge); } /* method: three jars */ .venn .vt { text-transform: none; font-weight: 800; font-size: 15px; letter-spacing: -0.01em; } .venn .vc { font-weight: 800; } .jars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: stretch; } .jars > * { min-width: 0; } @media (max-width: 960px) { .jars { grid-template-columns: 1fr; } } .jar-card { background: var(--card); border: var(--line); border-radius: 32px; padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; box-shadow: var(--sh); } .jar-card .lead-list { margin-bottom: 4px; } .lead-list li::before { background: var(--deep); } .jv { position: relative; align-self: center; width: 132px; margin-bottom: 2px; } .jv-lid { display: block; width: 76px; height: 16px; margin: 0 auto -2px; background: var(--sun); border: var(--line); border-radius: 10px 10px 4px 4px; position: relative; z-index: 2; } .jv-body { display: block; position: relative; height: 150px; border: var(--line); border-radius: 22px 22px 36px 36px; background: var(--card); overflow: hidden; } .jv-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: var(--lvl); background: var(--green); border-top: var(--line); transition: height .8s ease; } .jv-b { position: absolute; width: 14px; height: 14px; border: 2px solid var(--edge); border-radius: 50%; background: var(--card); bottom: 14px; animation: jb 3.6s ease-in infinite; } .jv-b.b1 { left: 20%; } .jv-b.b2 { left: 56%; width: 10px; height: 10px; animation-delay: .8s; } .jv-b.b3 { left: 38%; width: 11px; height: 11px; animation-delay: 1.6s; } .jv-b.b4 { left: 72%; animation-delay: 2.2s; } .jv-b.b5 { left: 12%; width: 9px; height: 9px; animation-delay: 2.8s; } .jv-b.b6 { left: 48%; animation-delay: 3.2s; } @keyframes jb { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-86px); opacity: 0; } } .knote { border-top: 2px dashed var(--edge); padding-top: 12px; width: 100%; margin-top: auto; } .knote .hand { font-size: 1.5rem; } .knote p { font-weight: 700; font-size: 18px; } /* testimonials: jar labels */ .proof-grid .card { position: relative; margin-top: 12px; border-radius: 26px; box-shadow: var(--sh); } .proof-grid .card::before { content: ''; position: absolute; left: 50%; top: -13px; width: 54px; height: 13px; transform: translateX(-50%); background: var(--sun); border: var(--line); border-bottom: none; border-radius: 9px 9px 0 0; } /* offers, manual, free, final */ .offer { border-radius: 30px; box-shadow: var(--sh); border-color: var(--edge); } .offer .art { border-color: var(--edge); } .offer .art.a1 { background: var(--butter); } .offer .art.a2 { background: var(--leaf); } .offer .art.a3 { background: var(--bloom); } .offer .price, .price { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; } .outcomes .dot { background: var(--butter); font-family: var(--font-display); font-weight: 800; border-color: var(--edge); } .asmt { border-color: var(--edge); } .asmt .num { font-family: var(--font-display); font-weight: 800; border-color: var(--edge); } .split { border-color: var(--edge); } .split .l { background: var(--leaf); } .split .r { background: var(--butter); border-color: var(--edge); } .email { border-color: var(--edge); box-shadow: var(--sh); } details { border-color: var(--edge); } .bg-forest { background: var(--forest); color: #FFFEF9; } .final h2 { color: #FFFEF9; } .final h2 em { color: var(--sun); font-style: normal; background: none; } .final .btn-yellow { background: var(--butter); } .foot { background: var(--ink); } /* ---- Under the hero: the proof band. The cards themselves come from proof/proof.css ---- */ .hero2 { padding-bottom: clamp(24px, 3.4vw, 44px); } .cases { padding-block: 0 clamp(36px, 6vw, 72px); } /* ---- All offerings page ---- */ .ofr-hero { padding-bottom: clamp(24px, 4vw, 48px); } .ofr-icons { display: flex; gap: 10px; flex-wrap: wrap; } .ofr-icons svg { width: clamp(38px, 6vw, 56px); height: clamp(38px, 6vw, 56px); } .start-card { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; border-radius: 32px; box-shadow: var(--sh-lg); } .start-card > * { min-width: 0; } .start-card .stack { align-items: flex-start; gap: 14px; } .start-card .buy { background: var(--butter); border: var(--line); border-radius: 26px; padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .start-card .price { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(54px, 8vw, 84px); line-height: .95; } .start-card .price small { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--mute); margin-left: 8px; letter-spacing: 0; } @media (max-width: 860px) { .start-card { grid-template-columns: 1fr; } } .ofr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); align-items: stretch; } .ofr-grid > .offer { min-width: 0; flex: initial; width: auto; scroll-margin-top: 20px; } .ofr-grid .offer .lead-list { margin-bottom: 8px; gap: 8px; font-size: 15px; } @media (max-width: 1060px) { .ofr-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .ofr-grid { grid-template-columns: 1fr; } } .ofr-sub { font-size: 14px; color: var(--mute); } .ofr-note { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; text-align: center; } /* On phones the proof cards come straight after the buttons, so the shelf picture is hidden there. */ @media (max-width: 560px) { .hero2-art { display: none; } .hero2 { padding-bottom: 8px; } } /* ---- Karishma's story in the introduction ---- */ .bio { gap: 14px; align-items: flex-start; } .bio p { max-width: 62ch; text-wrap: pretty; } .bio-lead { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.08; } .bio b { background: linear-gradient(transparent 58%, var(--sun) 58% 92%, transparent 92%); padding: 0 .08em; border-radius: 4px; } .bio .rv { white-space: normal; } /* ---- Problem: "have you tried...?" ---- */ .nod { align-items: stretch; } .tried { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; border-radius: 28px; box-shadow: var(--sh); } .tried-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; letter-spacing: -0.025em; padding: 0 4px; } .tried-sub { padding: 0 4px; color: var(--mute); } .tried-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; } .tr { position: relative; display: grid; grid-template-columns: 52px 1fr 30px; gap: 12px; align-items: center; min-height: 64px; padding: 6px 14px 6px 8px; border: var(--line); border-radius: 20px; background: var(--card); cursor: pointer; font-weight: 700; font-size: clamp(17px, 2vw, 19px); line-height: 1.2; transition: background .15s ease, transform .15s ease; } .tr:hover { background: var(--butter); } .tr:active { transform: scale(.98); } .tr input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tr-ico { width: 48px; height: 48px; display: grid; place-items: center; } .tr-ico svg { width: 44px; height: 44px; } .tr-box { width: 28px; height: 28px; border: var(--line); border-radius: 9px; background: var(--card); display: grid; place-items: center; transition: background .12s ease; } .tr input:checked ~ .tr-box { background: var(--green); } .tr input:checked ~ .tr-box::after { content: ''; width: 12px; height: 7px; border-left: 3px solid var(--edge); border-bottom: 3px solid var(--edge); transform: translateY(-2px) rotate(-45deg); } .tr:has(input:checked) { background: var(--butter); } .tr:has(input:focus-visible) { outline: 3px solid var(--edge); outline-offset: 3px; } /* the pile: whatever you tick lands here, and the gut-healed meter never moves */ .pilecard { display: flex; flex-direction: column; gap: 16px; justify-content: center; border-radius: 28px; box-shadow: var(--sh); background: var(--card); min-width: 0; } .pile-cap { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.015em; text-align: center; } .pile { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 8px 4px; min-height: 190px; padding: 14px 10px; border: 2px dashed var(--edge); border-radius: 22px; background: var(--butter); } .slot { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--edge) 30%, transparent); transform: rotate(var(--r, 0deg)); transition: border-color .3s ease; } .slot:nth-child(1) { --r: -8deg; } .slot:nth-child(2) { --r: 6deg; } .slot:nth-child(3) { --r: -4deg; } .slot:nth-child(4) { --r: 9deg; } .slot:nth-child(5) { --r: -6deg; } .slot svg { width: 72px; height: 72px; opacity: 0; transform: translateY(-40px) scale(.55) rotate(-24deg); transition: opacity .25s ease, transform .55s cubic-bezier(.3, 1.5, .5, 1); } .slot.on { border-color: transparent; } .slot.on svg { opacity: 1; transform: none; } .meters { display: flex; flex-direction: column; gap: 10px; } .meter { display: grid; grid-template-columns: 104px 1fr 76px; gap: 10px; align-items: center; font-weight: 700; font-size: 15px; } .m-bar { height: 18px; border: 2px solid var(--edge); border-radius: 999px; background: var(--card); overflow: hidden; } .m-bar i { display: block; height: 100%; width: 0; background: var(--sun); transition: width .5s ease; } .meter.heal .m-bar { background: repeating-linear-gradient(135deg, var(--card) 0 8px, var(--butter) 8px 16px); } .m-v { text-align: right; font-size: 14px; white-space: nowrap; } .tick-out { padding: 10px 14px; background: var(--butter); border: 2px dashed var(--edge); border-radius: 14px; font-weight: 700; min-height: 3.2em; text-align: center; display: grid; place-items: center; } @media (max-width: 860px) { /* on a phone you choose first. The pile is hidden until something is picked, then it sits at the bottom of the screen showing only what was picked */ .nod .pilecard { order: 2; display: none; position: sticky; bottom: 8px; top: auto; z-index: 3; gap: 8px; padding: 10px 12px; border-radius: 22px; box-shadow: var(--sh-lg, var(--sh)); } .nod .pilecard:not([data-n="0"]) { display: flex; } .pilecard .pile-cap { display: none; } .pile { min-height: 0; flex-wrap: nowrap; gap: 4px; padding: 6px 4px; justify-content: center; border-radius: 16px; } .slot:not(.on) { display: none; } .slot { flex: 0 1 64px; min-width: 0; width: auto; height: auto; aspect-ratio: 1; border: 0; } .slot svg { width: 100%; height: 100%; } .meters { gap: 6px; } .meter { grid-template-columns: 86px 1fr 62px; font-size: 13px; gap: 8px; } .m-bar { height: 12px; } .m-v { font-size: 12.5px; } .pilecard .tick-out { min-height: 0; padding: 6px 10px; font-size: 14px; line-height: 1.3; } } @media (prefers-reduced-motion: reduce) { .slot svg, .m-bar i, .tr { transition: none !important; } } /* ---- Method: cards that stack as you scroll ---- */ .sc { --top: 16px; display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; } .sc-card { position: sticky; top: calc(var(--top) + var(--i) * 18px); display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(18px, 4vw, 44px); align-items: center; border-radius: 32px; box-shadow: var(--sh-lg); padding: clamp(20px, 3.6vw, 40px); } .sc-card > * { min-width: 0; } .sc-card h3 { font-size: clamp(26px, 3.6vw, 40px); } .sc-line { font-size: clamp(17px, 2vw, 20px); font-weight: 700; } .sc-card .lead-list { margin-bottom: 6px; gap: 10px; } .sc-art { display: grid; place-items: center; background: var(--mint); border: var(--line); border-radius: 28px; padding: 24px; align-self: stretch; min-height: 180px; } .sc-art > svg { width: clamp(90px, 14vw, 150px); height: clamp(90px, 14vw, 150px); } .sc-art.venn-wrap { background: var(--butter); padding: 12px; } .sc-art .venn { width: 100%; max-width: 360px; height: auto; } .sc-card:nth-child(3) .sc-art { background: var(--lime); } .sc-card:nth-child(4) .sc-art { background: var(--bloom); } @media (max-width: 760px) { .sc { --top: 10px; gap: 16px; } .sc-card { top: calc(var(--top) + var(--i) * 12px); grid-template-columns: 1fr; border-radius: 26px; padding: 18px 16px; gap: 14px; } .sc-art { order: -1; min-height: 0; padding: 14px; } .sc-art > svg { width: 72px; height: 72px; } .sc-art.venn-wrap .venn { max-width: 240px; } .sc-card .btn { width: 100%; } } /* ---- Comparison: "partly" mark ---- */ .m.part { background: linear-gradient(90deg, var(--green) 50%, var(--card) 50%); } .nod .loop { justify-content: center; } @media (max-width: 760px) { .sc-card:not(.sc-intro) .sc-art { display: none; } } /* ---- Policy pages and the footer cookie link ---- */ .linkbtn { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-decoration: none; min-height: 24px; } .linkbtn:hover { text-decoration: underline; text-underline-offset: 4px; } .foot ul li { display: inline-flex; align-items: center; } .foot a, .foot .linkbtn { padding-block: 6px; } .legal { padding-block: clamp(28px, 5vw, 64px); } .lg { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: 18px; } .lg h1 { font-size: clamp(34px, 5vw, 54px); } .lg-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .lg-toc { background: var(--card); border: var(--line); border-radius: 22px; padding: 16px 20px; box-shadow: var(--sh); display: flex; flex-direction: column; gap: 8px; } .lg-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 2px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-toc a { display: inline-block; padding: 4px 0; font-weight: 500; } @media (max-width: 560px) { .lg-toc ol { grid-template-columns: 1fr; } } .lg-sec { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; padding-top: 10px; } .lg-sec h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.15; } .lg-sec p, .lg-sec li { max-width: 68ch; text-wrap: pretty; } .lg-sec ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .lg a { text-underline-offset: 3px; } .lg-foot { border-top: 2px dashed var(--edge); padding-top: 14px; } /* ---- Karishma's photo and certificates (files go in site/assets/) ---- */ .photo { position: relative; overflow: hidden; } .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 30%; z-index: 1; } .photo img ~ span { display: none; } .chip.cert { gap: 10px; padding: 5px 16px 5px 8px; } .chip.cert img { height: 48px; width: 48px; flex: none; object-fit: contain; mix-blend-mode: multiply; } /* ---- Touch comfort: tap targets of at least 44px, no text under 12px ---- */ .foot ul { gap: 0 22px; } .foot a, .foot .linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; } .lg-toc a { padding-block: 10px; } @media (pointer: coarse) { .pillnav a { padding-block: 11px; } .pillnav { padding-block: 4px; } .btn-sm { min-height: 44px; } .menu-panel a { min-height: 48px; display: flex; align-items: center; } } /* ---- Case study pages ---- */ .cp-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; } .cp-back:hover { text-decoration: underline; text-underline-offset: 4px; } .cp-page { padding-top: clamp(16px, 3vw, 36px); } /* ---- Hero: words only, centred ---- */ .hero2-grid { grid-template-columns: minmax(0, 1fr); } .hero2-copy.center { align-items: center; text-align: center; max-width: 880px; margin-inline: auto; } .hero2-copy h1 { font-size: clamp(38px, 6.2vw, 78px); } .hero2-copy .lede { margin-inline: auto; } .hero2-copy .btn-row { justify-content: center; } @media (max-width: 560px) { .hero2 { padding-bottom: 8px; } } /* ---- Header tools and the colour theme switch ---- */ .head2-tools { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .head2-tools .menu-btn, .head2-tools .pillnav { margin-top: 0; } .theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: var(--line); border-radius: 999px; background: var(--card); } .theme-switch button { position: relative; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: transparent; cursor: pointer; display: grid; place-items: center; } .theme-switch button::after { content: ''; position: absolute; inset: -9px -2px; } .theme-switch i { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--edge); } .theme-switch [data-p="mid"] i { background: linear-gradient(135deg, #DDF4E2 50%, #FADB6E 50%); } .theme-switch [data-p="green"] i { background: linear-gradient(135deg, #C9F7D1 50%, #3DBE72 50%); } html[data-palette="mid"] .theme-switch [data-p="mid"], html[data-palette="green"] .theme-switch [data-p="green"] { border-color: var(--edge); background: var(--butter); } .theme-switch button:focus-visible { outline: 3px solid var(--edge); outline-offset: 2px; } @media (max-width: 480px) { .head2-in { gap: 8px; } .head2-tools { gap: 8px; } .jarlabel { padding: 6px 10px; } .jl-logo { height: 40px; } .theme-switch button { width: 22px; height: 22px; } .theme-switch i { width: 14px; height: 14px; } .head2-tools .menu-btn { padding-inline: 12px; } } /* ---- Method: full slides that stack as you scroll ---- */ .sc { --top: 16px; gap: 26px; } .sc-card { min-height: min(72vh, 600px); min-height: min(72svh, 600px); top: calc(var(--top) + var(--i) * 10px); align-content: center; } @media (max-width: 760px) { .sc { --top: 10px; gap: 18px; } .sc-card { min-height: min(70svh, 560px); top: calc(var(--top) + var(--i) * 8px); } } @media (max-height: 520px) { .sc-card { position: relative; top: auto; min-height: 0; } } @media (max-width: 340px) { .jl-logo { height: 32px; } .jarlabel { padding: 6px 8px; } .head2-tools { gap: 6px; } .head2-tools .menu-btn { padding-inline: 9px; } } @media (max-width: 480px) { .theme-switch button { width: 24px; height: 24px; } .jarlabel { min-height: 44px; align-items: center; margin-top: 8px; } } /* ---- Hero: more air, with our visuals faintly in the background ---- */ .hero2 { position: relative; overflow: hidden; padding-block: clamp(72px, 11vw, 150px) clamp(64px, 9vw, 120px); } .hero2 > .wrap { position: relative; z-index: 1; } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hb { position: absolute; width: clamp(84px, 12vw, 190px); height: clamp(84px, 12vw, 190px); opacity: .2; animation: hbfloat 9s ease-in-out infinite; } .hb1 { left: 3%; top: 10%; transform: rotate(-12deg); } .hb2 { left: 13%; bottom: 8%; transform: rotate(8deg); animation-delay: -2s; } .hb3 { right: 4%; top: 8%; transform: rotate(9deg); animation-delay: -4s; } .hb4 { right: 12%; bottom: 10%; transform: rotate(-7deg); animation-delay: -1s; } .hb5 { left: 30%; top: 4%; width: clamp(60px, 8vw, 120px); height: clamp(60px, 8vw, 120px); transform: rotate(-20deg); animation-delay: -6s; } .hb6 { right: 28%; bottom: 4%; width: clamp(60px, 8vw, 110px); height: clamp(60px, 8vw, 110px); animation-delay: -3s; } .hb7 { right: 1%; top: 46%; width: clamp(60px, 8vw, 120px); height: clamp(60px, 8vw, 120px); transform: rotate(10deg); animation-delay: -5s; } .hb8 { left: 1%; top: 48%; width: clamp(56px, 7vw, 110px); height: clamp(56px, 7vw, 110px); transform: rotate(-8deg); animation-delay: -7s; } .hb9 { left: 42%; bottom: 2%; width: clamp(48px, 6vw, 90px); height: clamp(48px, 6vw, 90px); transform: rotate(20deg); animation-delay: -8s; } @keyframes hbfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } @media (max-width: 760px) { .hb { opacity: .14; } .hb5, .hb6, .hb9, .hb7, .hb8 { display: none; } .hb1 { left: -2%; top: 3%; } .hb3 { right: -2%; top: 2%; } .hb2 { left: -2%; bottom: 2%; } .hb4 { right: -2%; bottom: 2%; } } @media (prefers-reduced-motion: reduce) { .hb { animation: none; } } /* ---- Under the hero ---- */ .cases-title { text-align: center; font-size: clamp(26px, 3.6vw, 40px); max-width: 24ch; margin-inline: auto; } /* ---- Method: the scenes ---- */ .sc-art > svg { width: min(100%, 300px); height: auto; aspect-ratio: 260 / 200; } .sc-art.venn-wrap > svg { width: 100%; max-width: 360px; aspect-ratio: auto; } @media (max-width: 760px) { .sc-card:not(.sc-intro) .sc-art { display: grid; padding: 8px; } .sc-card:not(.sc-intro) .sc-art > svg { width: min(100%, 210px); } } /* ---- Testimonials: all of them; a lone last tile sits in the middle ---- */ #proof .pf-grid > :last-child:nth-child(3n+1) { grid-column: 2; } @media (max-width: 900px) { #proof .pf-grid > :last-child:nth-child(3n+1) { grid-column: auto; } } /* ---- Offerings: one at a time ---- */ .ofr-stack { display: flex; flex-direction: column; gap: clamp(20px, 3.4vw, 36px); } .ofr-row .buy { background: var(--leaf); } .ofr-row.r2 .buy { background: var(--lime); } .ofr-row.r3 .buy { background: var(--bloom); } .ofr-row.r4 .buy { background: var(--butter); } .ofr-row { scroll-margin-top: 20px; } .sc.flat .sc-card { position: relative; top: auto; min-height: 0; } @media (max-width: 760px) { .sc-card:not(.sc-intro) .sc-art { padding: 6px; border-radius: 20px; } .sc-card:not(.sc-intro) .sc-art > svg { width: min(100%, 150px); } .sc-card .lead-list { gap: 6px; font-size: 15px; } .sc-card .sc-line { font-size: 16px; } } /* ---- Root cause: the line that opens the story ---- */ .rc { align-items: center; gap: clamp(24px, 5vw, 64px); } .rc-text { display: flex; flex-direction: column; gap: clamp(14px, 2.2vw, 22px); align-items: flex-start; } .rc-lead { font-size: clamp(28px, 4vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -0.028em; text-wrap: balance; max-width: 20ch; } .rc-hand { font-family: var(--font-hand); font-weight: 700; font-size: clamp(46px, 6.4vw, 72px); line-height: .95; color: var(--deep); transform: rotate(-2deg); margin: 4px 0 2px; } .rc-p { font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; line-height: 1.35; max-width: 28ch; } .rc-end { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; max-width: 24ch; } .rc-end .hl { font-weight: 800; } .rc .roots-art { max-width: 520px; } @media (max-width: 860px) { .rc .roots-art { order: 2; } } #root-cause { overflow-x: clip; } .rc .roots-art::before { inset: 4% -2% 6% 2%; } /* ---- Manual: what the test gives you ---- */ .outcomes p b { display: block; font-weight: 800; letter-spacing: -0.01em; } .outcomes p span { display: block; margin-top: 2px; font-size: .82em; font-weight: 500; line-height: 1.4; } /* ---- Testimonials: before and after, then their own words ---- */ .proof-sub { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -0.02em; margin-top: 8px; } /* the account link, once someone is signed in ("Hi, Name") */ .pillnav .btn[data-signed-in] { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Hero headline: "Fixing your gut is possible, without [medication | supplements | restrictive diets]" ---- */ .hero2-copy h1.rot-h { font-size: clamp(34px, 6vw, 74px); line-height: 1.08; text-wrap: balance; } .rot-l1 { display: block; } .rot-l2 { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: .2em; max-width: 100%; } .rot-wo { line-height: 1.22; } .rot-w { background: linear-gradient(transparent 58%, var(--sun) 58% 92%, transparent 92%); padding: 0 .08em; border-radius: 4px; } /* the rotation: a one-line window onto a column of words that rolls up one line at a time (a reel). The window is as wide as the word showing. */ /* the window is there from the first paint, showing the first word, so nothing changes size when the script starts (without the script, a