:root{color-scheme:dark;--ink:#f7f5ed;--gold:#e8c547;--surface:#0c0c0a;--muted:#c9c6bb;--line:#45453a;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html{scrollbar-color:#756431 var(--surface);scroll-padding-top:24px}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
main{flex:1 0 auto}
::selection{background:var(--gold);color:var(--surface)}
a{color:inherit;text-underline-offset:5px}
button{font:inherit;color:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,.compare-wrap:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-80px;left:20px;z-index:30;background:var(--gold);color:var(--surface);padding:14px}
.skip:focus{top:16px}
.shell{width:min(1440px,92%);margin:auto}
.mobile-menu{display:none}
.masthead{display:flex;justify-content:space-between;align-items:center;padding:25px 0 16px;position:relative;z-index:4;gap:30px}
.brand{display:block;width:128px;flex:none;line-height:0}
.brand img{display:block;width:100%;height:auto}
.masthead nav{display:flex;gap:30px;font-size:14px;align-items:center}
.masthead nav a{text-decoration:none;padding:12px 0;white-space:nowrap}
.masthead nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:8px}
.masthead nav a:hover{color:var(--gold)}
.opening{position:relative;isolation:isolate;overflow:hidden}
.opening::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#0c0c0af5 3%,#0c0c0ad9 30%,#0c0c0a33 77%),linear-gradient(0deg,#0c0c0a 1%,#0c0c0a55 35%,#0c0c0a77)} /* taste-skill-ignore: neutral scrim over a photo */
.package-hero{display:grid;grid-template-columns:minmax(310px,.78fr) minmax(0,1.65fr);gap:12px;align-items:center;padding:55px 0 52px;min-height:760px}
.offer{position:relative;z-index:3;max-width:445px}
.offer h1{font-weight:800;font-stretch:112%;font-size:clamp(40px,3.9vw,60px);line-height:1.02;letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
.offer h1 span{color:var(--gold);display:block}
.intro{color:var(--muted);font-size:16px;line-height:1.65;max-width:32ch;margin:0 0 34px}
.package-nav{display:flex;gap:30px;max-width:360px;margin-bottom:24px}
.package-nav a{padding:0 0 13px;text-decoration:none;font-size:15px;position:relative;color:var(--muted)}
.package-nav a[aria-current],.package-nav a.is-shown{color:var(--gold)}
.package-nav a[aria-current]::after,.package-nav a.is-shown::after{content:"";height:2px;background:var(--gold);position:absolute;bottom:-1px;left:0;right:0}
.package-nav a:hover{color:var(--ink)}
.package-title{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.package-title h2{display:flex;align-items:center;gap:14px;margin:0;font-size:22px;font-weight:400}
/* Pro's Recommended pill sits beside the package name, as on the homepage cards (owner, 28 Oct) */
.package-title .rec{font-size:12px;font-weight:700;padding:6px 11px;border-radius:99px;background:var(--gold);color:#15150f;line-height:1}
.compare-line{margin:-8px 0 20px}
.price-line{display:flex;align-items:baseline;gap:14px}
.price-line strong{font-size:48px;letter-spacing:-.035em;font-weight:400;font-variant-numeric:tabular-nums}
.price-line span{font-size:13px;color:var(--muted)}
.price-line strong .cents{font-size:.5em;vertical-align:.72em;margin-left:2px;letter-spacing:0;color:inherit}
.offer-note{font-size:13px;line-height:1.6;margin:7px 0 16px;color:var(--muted)}
.recurring{font-size:15px;line-height:1.6;margin:10px 0 17px}
.recurring strong{font-size:23px;font-weight:400}
.offer-scope{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 23px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:17px 23px;min-height:52px;border-radius:99px;background:var(--gold);color:#15150f;text-decoration:none;font-size:16px;font-weight:700;font-stretch:110%;transition:background .18s,transform .16s cubic-bezier(.23,1,.32,1)}
.cta:hover{background:#f3d363}
.cta:active{transform:scale(.97)}
.under-cta{font-size:13px;color:var(--muted);margin:12px 0 0}
.visual{min-width:0;position:relative;align-self:center;margin:0 -3.5% 0 -1%}
.visual-note{display:flex;align-items:center;justify-content:center;text-align:center;gap:18px;margin:.6em 6% 0 7%;font-size:13px;color:var(--muted);line-height:1.5}
.motion-button{display:inline-flex;align-items:center;gap:9px;flex:none;background:transparent;border:0;text-decoration:underline;text-decoration-color:#a09a7f;text-underline-offset:6px;min-height:44px;padding:10px 0;font-size:13px}
.motion-button:hover{color:var(--gold)}
/* Pause/Replay sit with the caption under the devices, not floating at the top of the scene (owner, 28 Oct) */
.visual .motion-controls{position:relative;z-index:4;display:flex;gap:16px;flex:none}
.motion-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-rule{display:flex;align-items:flex-start;justify-content:space-between;gap:35px;padding:25px 0 30px;color:var(--muted);font-size:16px;line-height:1.6}
.hero-rule p{max-width:74ch;margin:0}
.related-links{display:flex;flex-direction:column;gap:12px;flex:none}
.text-link{display:inline-flex;align-items:center;gap:14px;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px;color:var(--ink);font-size:14px;line-height:1.5}
.text-link:hover{color:var(--gold)}
.content-page{padding:0 0 48px}
.page-photo{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center 47%}
.page-opening{position:relative;isolation:isolate;overflow:hidden;padding:clamp(96px,15vh,170px) 0 clamp(80px,12vh,130px);margin-bottom:44px}
.page-opening::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#0c0c0aeb 3%,#0c0c0abf 40%,#0c0c0a33 82%),linear-gradient(0deg,#0c0c0a 2%,#0c0c0a00 46%,#0c0c0a73)} /* taste-skill-ignore: neutral scrim over a photo */
.page-intro{margin-bottom:0}
.page-intro h1{font-size:clamp(40px,5.4vw,82px);line-height:1.02;letter-spacing:-.025em;font-stretch:125%;font-weight:800;margin:0 0 22px;text-wrap:balance}
.page-intro h1 span{color:var(--gold)}
.page-intro>p{font-size:16px;line-height:1.7;color:var(--muted);max-width:65ch;margin:0}
.compare-wrap{overflow-x:auto}
.compare{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;font-variant-numeric:tabular-nums}
.compare th,.compare td{padding:17px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.6;font-weight:400}
.compare th:first-child,.compare td:first-child{padding-left:0;width:28%}
.compare thead th{font-size:20px}
.compare thead th:first-child{line-height:44px}
.compare tbody th{color:var(--muted)}
@media(max-width:760px){.compare tbody th,.compare thead th:first-child{position:sticky;left:0;z-index:1;background:var(--surface,#0c0c0a)}}
.compare small{display:block;font-size:13px;color:var(--muted)}
.compare .selected-col{background:#e8c54708}
.compare a{color:var(--gold);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.compare a:hover{text-decoration:underline}
.setup-price{white-space:nowrap}
.table-hint{display:none}
.comparison-note{font-size:16px;line-height:1.7;color:var(--muted);max-width:95ch;margin:21px 0 26px}
.essentials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;margin:0}
.essentials dt{font-size:17px;margin-bottom:10px}
.essentials dd{margin:0;font-size:16px;line-height:1.75;color:var(--muted);text-wrap:pretty}
.page-links{display:flex;flex-wrap:wrap;gap:20px 38px;margin-top:36px;padding-top:25px}
.process-page .shell{max-width:1160px}
.journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;list-style:none;padding:0 0 10px;margin:0}
.ridge{height:clamp(64px,8vw,112px);margin:10px 0 28px}
.ridge svg{display:block;width:100%;height:100%;overflow:visible}
.ridge path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:0}
.ridge .core{stroke:var(--gold);stroke-width:2.2}
.ridge .arm{stroke:rgba(232,197,71,.45);stroke-width:1}
.ridge .twig{stroke:rgba(247,245,237,.16);stroke-width:1}
/* the lightning strikes once, by itself, as it comes into view: packages.js arms it (.is-armed hides the lines), then
   adds .is-struck: the bolt drops, then the branches spread from it. Without scripts, if the script fails, or with
   reduced motion, it is simply drawn. */
@media (prefers-reduced-motion: no-preference){.ridge.is-armed path{stroke-dashoffset:1}
.ridge.is-struck .core{animation:ridge-draw .5s cubic-bezier(.2,.8,.3,1) both,ridge-flash .9s linear .5s both}
.ridge.is-struck .arm{animation:ridge-draw 1.4s cubic-bezier(.16,1,.3,1) .35s both}
.ridge.is-struck .twig{animation:ridge-draw .8s cubic-bezier(.16,1,.3,1) 1.1s both}}
@keyframes ridge-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ridge-flash{0%,30%,100%{opacity:1}15%{opacity:.35}45%{opacity:.6}}
.journey h2{font-size:23px;line-height:1.2;font-weight:400;letter-spacing:-.02em;margin:0 0 12px}
.journey p{font-size:16px;line-height:1.7;color:var(--muted);margin:0;max-width:36ch}
.questions{max-width:920px}
.questions details{background:#ffffff08;border-radius:16px;padding:0 22px;margin-bottom:10px}
.questions details[open]{padding-bottom:20px}
.questions summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:17px;cursor:pointer;line-height:1.45;padding:20px 0;min-height:44px}
.questions summary::-webkit-details-marker{display:none}
.questions summary svg{flex:none;transition:transform .2s}
.questions details[open] summary svg{transform:rotate(45deg)}
.questions details p,.questions details li{font-size:16px;line-height:1.8;color:var(--muted)}
.questions details p{margin:18px 0 0;max-width:80ch}
.change-prices{list-style:none;padding:0;margin:22px 0 0;max-width:740px}
.change-prices li{display:flex;justify-content:space-between;gap:30px;padding:13px 16px;background:#ffffff08;border-radius:12px;margin-top:6px}
.change-prices strong{font-weight:400;color:var(--ink);white-space:nowrap}
.change-prices small{display:block;font-size:13px;color:var(--muted);max-width:65ch}
.contact-scene{position:relative;isolation:isolate;overflow:hidden}
.contact-scene::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0c0c0af5 3%,#0c0c0ade 30%,#0c0c0a35 74%),linear-gradient(0deg,#0c0c0a 1%,transparent 40%,#0c0c0a50)} /* taste-skill-ignore: neutral scrim over a photo */
.contact-composition{display:flex;align-items:center;min-height:660px;padding:65px 0 75px}
.contact-copy{max-width:620px}
.contact-copy h1{font-size:clamp(42px,3.9vw,56px);line-height:1.02;letter-spacing:-.025em;font-stretch:112%;font-weight:800;margin:0 0 28px}
.contact-copy h1 span{color:var(--gold)}
.contact-copy>p:not(.under-cta){max-width:45ch;font-size:17px;line-height:1.8;color:var(--muted);margin:0 0 28px}
.contact-guidance{margin-top:40px;max-width:44ch}
.contact-guidance h2{font-size:16px;line-height:1.5;font-weight:400;margin:0 0 8px}
.contact-guidance p{font-size:16px;line-height:1.7;color:var(--muted);margin:0}
.contact-links{display:flex;flex-wrap:wrap;gap:15px 30px;margin-top:30px}
.footer{padding:27px 0 33px;display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:13px}
.footer p{margin:0;line-height:1.8}
.footer-nav{display:flex;flex-wrap:wrap;gap:0 22px}
.footer-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--ink);text-decoration:none}
.footer-nav a:hover{color:var(--gold)}
.footer small{font-size:13px;color:var(--muted)}
.credit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;font-size:.8125rem}
.credit img{width:120px;height:auto;max-width:100%}
.credit-logo{display:inline-flex;max-width:100%;line-height:0}
@media(min-width:1800px){.package-hero{min-height:850px}
.visual{margin-right:-5%}}
@media(max-width:1100px){.package-hero{grid-template-columns:minmax(290px,.85fr) minmax(0,1.3fr);gap:0;padding-top:36px;min-height:740px}
.offer h1{font-size:46px}
.visual{margin-left:-8%;margin-right:-4%}
.visual-note>span:first-child{max-width:27ch}
.journey{gap:28px}
.essentials{gap:26px}}
@media(max-width:760px){.shell{width:90%}.footer-nav{column-gap:18px}
.masthead{padding:14px 0;flex-wrap:nowrap;gap:12px}
.brand{width:108px}
.masthead>.primary-nav{display:none}
.mobile-menu{display:block;position:relative;font-size:13px}
.mobile-menu summary{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:72px;min-height:44px;list-style:none;cursor:pointer}
.mobile-menu summary::-webkit-details-marker{display:none}
.masthead .mobile-menu nav{position:absolute;right:0;top:52px;display:grid;min-width:208px;gap:0;padding:8px 14px;background:#171913;border:1px solid #494936}
.masthead .mobile-menu nav a{display:flex;align-items:center;min-height:44px;padding:10px 8px;font-size:14px}
.package-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:22px 0 20px}
.offer{display:contents}
.offer h1{font-size:clamp(32px,8.5vw,38px);max-width:none;margin-bottom:16px;order:0}
.intro{display:none}
.package-nav{order:1;max-width:none;margin:0 0 18px;gap:10px;justify-content:space-between}
.package-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 6px;flex:1;font-size:15px}
.package-title{order:2;margin-bottom:6px}
.package-title h2{font-size:21px}
.price-line{order:3;gap:12px}
.price-line strong{font-size:42px}
.price-line span{font-size:13px}
.offer-note{order:4;margin:6px 0 8px}
.recurring{order:5;margin:7px 0 12px;font-size:14px}
.recurring strong{font-size:21px}
.offer-scope{order:6;font-size:14px;line-height:1.6;margin-bottom:16px}
.offer>.cta{order:7;align-self:stretch;min-height:48px;padding:14px 20px}
.under-cta{order:8;margin-top:8px;line-height:1.5}
.visual{order:9;width:108%;margin:50px -4% 6px}
.visual-note{margin:0 5%}
.visual-note>span:first-child{display:none}
.visual .motion-controls{position:absolute;top:-44px;right:7%;gap:8px}
.compare-line{order:5;margin:0 0 12px}
.visual .motion-button{padding:10px 12px;border-radius:999px;background:rgba(12,12,10,.62);text-decoration:none}
.hero-rule{flex-direction:column;padding-top:22px;gap:20px;font-size:16px}
.related-links{flex-direction:row;flex-wrap:wrap;gap:16px 25px}
.text-link{font-size:13px;min-height:44px}
.opening::before{background:linear-gradient(180deg,#0c0c0ad9,#0c0c0a55 25%,#0c0c0a 63%)} /* taste-skill-ignore: neutral scrim over a photo */
.opening .page-photo{height:740px;object-position:center top}
.page-opening{padding:72px 0 64px;margin-bottom:30px}
.page-intro h1{font-size:38px;max-width:18ch;font-stretch:112%}
.page-intro>p{font-size:16px}
.compare{font-size:13px}
.compare th,.compare td{padding:15px 8px}
.compare thead th{font-size:16px}
.compare small{font-size:13px}
.comparison-note{font-size:15px;margin:20px 0 28px}
.essentials{grid-template-columns:1fr;gap:24px}
.essentials dt{font-size:17px;margin-bottom:7px}
.essentials dd{font-size:15px}
.page-links{gap:17px 24px;margin-top:28px;padding-top:23px}
.journey{grid-template-columns:1fr;gap:23px;padding-bottom:28px;margin-bottom:6px}
.journey h2{font-size:23px;margin-bottom:8px}
.journey p{max-width:48ch}
.questions details{padding:0 18px}
.questions summary{font-size:16px}
.questions details p,.questions details li{font-size:16px}
.change-prices li{gap:20px}
.contact-composition{min-height:0;padding:42px 0 66px}
.contact-copy{max-width:100%}
.contact-copy h1{font-size:clamp(38px,10vw,60px)}
.contact-copy>p:not(.under-cta){font-size:16px;max-width:36ch}
.contact-scene::before{background:linear-gradient(90deg,#0c0c0ac9,#0c0c0a86),linear-gradient(0deg,#0c0c0a,transparent 45%)} /* taste-skill-ignore: neutral scrim over a photo */
.contact-scene .page-photo{object-position:63% 50%}
.contact-guidance{margin-top:32px;max-width:38ch}
.contact-links{gap:18px}
.footer{align-items:flex-start;flex-direction:column;gap:14px;padding:20px 0}
.credit img{width:120px}}
@media(max-width:520px){.compare{min-width:520px}
.table-hint{display:block;color:var(--muted);font-size:13px;margin:0 0 10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}
.motion-button svg,.questions summary svg{transition:none}}
@media(min-width:761px) and (max-width:960px){.visual{margin-left:0}.offer h1{font-size:34px}.contact-copy{max-width:100%}.intro{max-width:24ch}}

/* entrances: the first screen rises in on load; later parts rise as they reach the screen (packages.js adds .reveal) */
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion: no-preference){
.page-intro>*,.contact-copy>*,.request-intro>*,.offer>*,.request-form{animation:rise .8s cubic-bezier(.16,1,.3,1) both}
:is(.page-intro,.contact-copy,.request-intro,.offer)>:nth-child(2){animation-delay:.07s}
:is(.page-intro,.contact-copy,.request-intro,.offer)>:nth-child(3){animation-delay:.14s}
:is(.page-intro,.contact-copy,.request-intro,.offer)>:nth-child(4){animation-delay:.21s}
:is(.page-intro,.contact-copy,.request-intro,.offer)>:nth-child(5){animation-delay:.28s}
:is(.page-intro,.contact-copy,.request-intro,.offer)>:nth-child(6){animation-delay:.35s}
:is(.page-intro,.contact-copy,.request-intro,.offer)>:nth-child(n+7){animation-delay:.42s}
.request-form{animation-delay:.2s}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.16,1,.3,1) var(--d,0ms),transform .75s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){.not-found-page .page-links a{animation:rise .8s cubic-bezier(.16,1,.3,1) .35s both}.not-found-page .page-links a+a{animation-delay:.45s}.not-found-page .page-links a+a+a{animation-delay:.55s}}
@media(min-width:761px) and (max-width:1100px){.footer{flex-wrap:wrap;row-gap:4px}.footer-nav{order:3;flex-basis:100%}}
/* the main action at the end of the compare and how-it-works pages */
.page-action{margin-top:44px}
/* Page improvements chosen by Orhan, 28 Oct 2026 */
/* less space between the opening photograph and the page's content */
.page-opening{padding-bottom:clamp(48px,7vh,84px);margin-bottom:20px}
@media(max-width:760px){.page-opening{padding-bottom:40px;margin-bottom:12px}}
/* compare: the Recommended pill as on the package pages, and a row of choose buttons under the table */
.compare thead .rec{display:inline-block;margin-left:10px;vertical-align:middle;font-size:12px;font-weight:700;padding:6px 11px;border-radius:99px;background:var(--gold);color:#15150f;line-height:1}
.compare tfoot th,.compare tfoot td{border-bottom:0;padding-top:24px;vertical-align:middle}
.compare tfoot th{color:var(--muted)}
.compare .choose-btn{justify-content:center;text-align:center;padding:10px 18px;border:1px solid var(--gold);border-radius:99px;color:var(--gold);font-weight:700;font-size:14px;line-height:1.25;transition:background .18s,color .18s,transform .16s cubic-bezier(.23,1,.32,1)}
.compare .choose-btn.is-pro{background:var(--gold);color:#15150f}
@media(hover:hover){.compare .choose-btn:hover{text-decoration:none;background:#f3d363;border-color:#f3d363;color:#15150f}}
.compare .choose-btn:active{transform:scale(.97)}
@media(max-width:760px){.compare thead .rec{display:block;width:max-content;margin:0 0 6px;font-size:11px;padding:5px 8px}.compare tfoot th{position:sticky;left:0;z-index:1;background:var(--surface)}.compare .choose-btn{padding:9px 10px;font-size:13px}}
/* how it works: a gold line joins the three steps, as on the homepage; it draws once when it comes into view */
.journey{position:relative;padding-top:34px}
.journey::before,.journey::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px}
.journey::before{background:#f7f5ed1f}
.journey::after{background:var(--gold);transform-origin:left center}
.journey li{position:relative}
.journey li::before{content:"";position:absolute;left:0;top:-34px;width:14px;height:14px;border-radius:50%;box-sizing:border-box;border:2px solid var(--gold);background:var(--gold);transition:background .3s ease var(--dot,0s)}
.journey li:nth-child(2){--dot:.5s}.journey li:nth-child(3){--dot:1s}
.journey.is-armed::after{transform:scaleX(0)}
.journey.is-armed li::before{background:var(--surface)}
.journey.is-lit::after{transform:none;transition:transform 1.2s linear}
.journey.is-lit li::before{background:var(--gold)}
@media(max-width:760px){.journey{padding:0 0 28px 34px}.journey::before,.journey::after{left:6px;right:auto;top:0;bottom:28px;width:2px;height:auto}.journey::after{transform-origin:center top}.journey.is-armed::after{transform:scaleY(0)}.journey.is-lit::after{transform:none}.journey li::before{left:-34px;top:4px}}
/* enquiry and contact: what happens after someone gets in touch */
.next-steps{margin-top:30px}
.next-steps h2{font-size:16px;line-height:1.5;font-weight:400;margin:0 0 14px}
.next-steps ol{list-style:none;margin:0;padding:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative}
.next-steps ol::before{content:"";position:absolute;left:5px;right:0;top:4.5px;height:2px;background:var(--gold)}
.next-steps li{position:relative;font-size:15px;line-height:1.5;max-width:16ch}
.next-steps li::before{content:"";position:absolute;left:0;top:-24px;width:11px;height:11px;border-radius:50%;background:var(--gold)}
@media(max-width:760px){.next-steps{margin-top:24px}.next-steps ol{grid-template-columns:1fr;gap:10px;padding:0 0 0 26px}.next-steps ol::before{left:4.5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}.next-steps li{max-width:none}.next-steps li::before{left:-26px;top:6px}}
/* privacy: the date of this notice, and two columns of shorter lines */
.page-intro .updated{margin-top:18px;font-size:14px;color:var(--muted)}
.essentials.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px;max-width:1180px}
@media(max-width:760px){.essentials.two{grid-template-columns:1fr;gap:24px}}
/* who each package is for, tight under its name as on the homepage cards; titles big enough to read as the card's
   heading, so the small lines below it group with the name and not with the price */
.package-title h2{font-size:clamp(26px,1.95vw,30px)}
.offer .for{margin:-4px 0 14px;color:var(--muted);font-size:15px;line-height:1.4}
@media(max-width:760px){.package-title h2{font-size:24px}.offer .for{order:2;margin:-2px 0 10px}}
/* 44 px touch targets at every width, touch tablets included, and no text under 13 px (critique, 28 Oct 2026) */
.masthead>.primary-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0}
.package-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
@media(min-width:761px){.package-nav a{padding-bottom:0}}
.text-link{min-height:44px}
.compare thead th:not(:first-child) a{min-width:44px}
.package-title .rec,.compare thead .rec{font-size:13px}
@media(max-width:760px){.compare thead .rec{font-size:13px;padding:5px 8px}}
/* "USD · one-time setup" never breaks at the hyphen; when the row is too narrow (enlarged text, small phones) the note
   moves under the price instead of pushing past the screen edge (critique and review, 28 Oct 2026) */
.price-line{flex-wrap:wrap;row-gap:2px}
.price-line>span{white-space:nowrap}
/* WhatsApp is the side option beside the main button, so its link sits quietly in the note under it (Orhan, 28 Oct 2026) */
.under-cta a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(232,197,71,.6)}
@media(hover:hover){.under-cta a:hover{color:var(--gold)}}

/* a package switch changes only the words that differ: after the first switch nothing rises in again, and the
   changed words fade in where they stand (packages.js) */
@keyframes swap-in{from{opacity:0}}
@media (prefers-reduced-motion: no-preference){.package-hero.is-switched .offer>*{animation:none}.package-hero.is-switched :is(.swap-in,swap-word){animation:swap-in .22s ease-out}}
swap-word,swap-text{display:inline}
.offer .intro{text-wrap:pretty}
/* between 761 and 860px the setup note fits beside some prices and not others; it sits under every price there, so
   switching packages never moves the devices (audit 6, 28 Oct 2026) */
@media(min-width:761px) and (max-width:860px){.price-line>span{flex-basis:100%}}
/* contact page: WhatsApp first, the enquiry form beside it (Orhan, 28 Oct 2026) */
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.contact-actions .cta{gap:12px}
.contact-or{margin:0;font-size:15px;color:var(--muted)}
.contact-or a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(232,197,71,.6);text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}
@media(hover:hover){.contact-or a:hover{color:var(--gold)}}