/*
Theme Name: PicturePerfect
Theme URI: https://pictureperfect.click/
Author: GreaterLink for Matthew Bone
Description: Rustic sales-funnel theme for the PicturePerfect.click tools.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: pictureperfect
*/
:root{--espresso:#1D1611;--walnut:#2B2019;--bark:#47352A;--paper:#FBF7F0;--parch:#F3EADB;--kraft:#E4D4B7;--line:#E1D4BF;--ink:#231B15;--muted:#6E6155;--brass:#B8863B;--brass-d:#8C6322;--brass-l:#E9C98E;--ocr:#B8863B;--ren:#4E6B4A;--pdf:#A4502F;--shadow:0 22px 50px rgba(35,27,21,.16);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0 0.14 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper) var(--grain);color:var(--ink);font:17.5px/1.7 "Source Sans 3",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--ink);font-variation-settings:"SOFT" 50,"opsz" 96}
em.acc{font-style:italic;font-weight:500;color:var(--brass-d)}
.wrap{max-width:1220px;margin:0 auto;padding:0 28px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:700 12.5px/1 "Source Sans 3";letter-spacing:.22em;text-transform:uppercase;color:var(--brass-d)}
.eyebrow:before{content:"";width:26px;height:2px;background:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:6px;font:700 15px/1 "Source Sans 3";letter-spacing:.04em;border:2px solid var(--ink);color:var(--ink);transition:.2s;white-space:nowrap;cursor:pointer;background:none}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--brass);border-color:var(--brass);color:#1d1611;box-shadow:0 10px 24px rgba(184,134,59,.28)}.btn.solid:hover{background:var(--brass-d);border-color:var(--brass-d);color:#fff}
.btn.light{border-color:rgba(255,255,255,.7);color:#fff}.btn.light:hover{background:#fff;color:var(--ink)}
.btn svg{width:18px;height:18px}
/* header */
.top{background:rgba(251,247,240,.94);backdrop-filter:blur(8px);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:30px;height:84px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Fraunces",serif;font-weight:600;font-size:25px;color:var(--ink);white-space:nowrap}
.logo svg{width:34px;height:34px;color:var(--brass)}
.logo span b{font-weight:500;font-style:italic;color:var(--brass-d)}
.nav{margin-left:auto;display:flex;gap:28px;font:600 15px/1 "Source Sans 3"}
.nav a{padding:6px 0;border-bottom:2px solid transparent}.nav a:hover,.nav a.on{border-color:var(--brass);color:var(--brass-d)}
.top .btn{padding:12px 20px}
.menu-btn{display:none;margin-left:auto;background:none;border:2px solid var(--ink);border-radius:6px;padding:6px 12px;font-size:20px}
/* hero */
.hero{position:relative;background:var(--espresso);color:#EFE5D6;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(29,22,17,.97) 0%,rgba(29,22,17,.88) 42%,rgba(29,22,17,.35) 75%,rgba(29,22,17,.15)),var(--bg) center/cover}
.hero .wrap{position:relative;padding-top:110px;padding-bottom:120px;max-width:1220px}
.hero .in{max-width:640px}
.hero h1{color:#FBF4E8;font-size:70px;margin:22px 0 22px}.hero h1 em{font-style:italic;font-weight:500;color:var(--brass-l)}
.hero .eyebrow{color:var(--brass-l)}
.hero p.lead{font-size:20px;color:#DCCDB8;max-width:560px}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero .pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.hero .pills span{border:1px solid rgba(233,201,142,.35);border-radius:999px;padding:7px 14px;font-size:14px;color:#E8D9C1;background:rgba(0,0,0,.2)}
.filmedge{height:26px;background:var(--espresso) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='26'%3E%3Crect x='10' y='7' width='16' height='12' rx='2' fill='%23F3EADB' opacity='.9'/%3E%3C/svg%3E") repeat-x center}
section{padding:100px 0}
.sec-h{max-width:760px;margin-bottom:48px}.sec-h.center{margin-left:auto;margin-right:auto;text-align:center}.sec-h.center .eyebrow{justify-content:center}
.sec-h h2{font-size:50px;margin:14px 0 14px}.sec-h p{color:var(--muted);font-size:18.5px}
/* chooser */
.choose{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:.25s;border-top:5px solid var(--acc)}
.pcard:hover{transform:translateY(-6px)}
.pcard .ph{aspect-ratio:16/10;background:center/cover;filter:sepia(.15) saturate(.95)}
.pcard .bd{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.pcard .if{font:700 13px/1.3 "Source Sans 3";letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.pcard h3{font-size:30px;margin:10px 0 10px}
.pcard p{color:var(--muted);font-size:16.5px}
.pcard ul{list-style:none;margin:18px 0 22px;display:grid;gap:8px;font-size:16px}
.pcard li{display:flex;gap:10px}.pcard li:before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}
.pcard .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px dashed var(--line);padding-top:18px}
.pcard .from{font-size:14px;color:var(--muted)}.pcard .from b{display:block;font-family:"Fraunces",serif;font-size:26px;color:var(--ink)}
.pcard .go{color:var(--acc);font-weight:700;letter-spacing:.04em}
/* steps band */
.band{background:var(--walnut) var(--grain);color:#E9DDCB}
.band h2{color:#FBF4E8}.band .eyebrow{color:var(--brass-l)}.band .sec-h p{color:#CDBBA3}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{position:relative;border:1px solid rgba(233,201,142,.22);border-radius:12px;padding:34px 30px 30px;background:rgba(255,255,255,.03)}
.step:before{counter-increment:s;content:counter(s);position:absolute;top:-22px;left:28px;width:44px;height:44px;border-radius:50%;background:var(--brass);color:#1d1611;display:grid;place-items:center;font:700 20px/1 "Fraunces",serif}
.step h3{color:#FBF4E8;font-size:25px;margin:8px 0 8px}.step p{color:#CDBBA3;font-size:16.5px}
/* why */
.why{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.why .ph{aspect-ratio:4/5;border-radius:12px;background:center/cover;box-shadow:var(--shadow);position:relative}
.why .ph:after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.5);border-radius:6px}
.feat{display:grid;gap:22px;margin-top:26px}
.feat div{display:grid;grid-template-columns:52px 1fr;gap:16px}
.feat .i{width:52px;height:52px;border-radius:10px;background:var(--parch);border:1px solid var(--line);display:grid;place-items:center;color:var(--brass-d)}
.feat .i svg{width:24px;height:24px}
.feat b{display:block;font-family:"Fraunces",serif;font-size:21px;font-weight:600}.feat span{color:var(--muted);font-size:16.5px}
/* pricing */
.ptable{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px;box-shadow:var(--shadow);border-top:5px solid var(--acc)}
.pt h3{font-size:25px;margin-bottom:14px}
.pt .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.pt .row span{color:var(--muted);font-size:16px}.pt .row b{font-family:"Fraunces",serif;font-size:24px}
.pt .row b small{font:500 14px "Source Sans 3";color:var(--muted)}
.pt .btn{width:100%;margin-top:20px}
/* faq */
.faq{max-width:860px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:12px}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font:600 19px/1.35 "Fraunces",serif;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:26px;line-height:1;color:var(--brass-d)}.faq details[open] summary:after{content:"–"}
.faq details p{padding:0 24px 22px;color:var(--muted)}
/* final cta */
.cta{padding:0 0 100px}
.cta .box{position:relative;border-radius:14px;overflow:hidden;padding:80px 60px;text-align:center;background:linear-gradient(rgba(29,22,17,.78),rgba(29,22,17,.86)),url(img/darkroom.webp) center 30%/cover;color:#EFE5D6}
.cta h2{color:#FBF4E8;font-size:52px;margin:14px 0 12px}.cta p{color:#DCCDB8;max-width:620px;margin:0 auto}
.cta .eyebrow{color:var(--brass-l)}.cta .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
/* product pages */
.phero{--bg:none}
.prob{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.prob .card{border-radius:12px;padding:34px;border:1px solid var(--line)}
.prob .before{background:var(--parch)}.prob .after{background:#fff;border-top:5px solid var(--acc);box-shadow:var(--shadow)}
.prob h3{font-size:26px;margin:10px 0 10px}.prob p{color:var(--muted)}
.prob .tag{font:700 12.5px/1 "Source Sans 3";letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.prob .after .tag{color:var(--acc)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fgrid .f{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px}
.fgrid .f .i{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 12%,#fff);color:var(--acc);margin-bottom:16px}
.fgrid .f .i svg{width:24px;height:24px}
.fgrid h3{font-size:22px;margin-bottom:8px}.fgrid p{color:var(--muted);font-size:16.5px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:900px;margin:0 auto}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:38px 34px;box-shadow:var(--shadow)}
.plan.best{border:2px solid var(--acc)}
.plan .badge{position:absolute;top:-14px;left:34px;background:var(--acc);color:#fff;font:700 12px/1 "Source Sans 3";letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:999px}
.plan h3{font-size:26px}.plan .price{font-family:"Fraunces",serif;font-size:54px;font-weight:600;margin:14px 0 4px;line-height:1}
.plan .price small{font:500 16px "Source Sans 3";color:var(--muted)}
.plan .desc{color:var(--muted);font-size:16px;margin-bottom:18px}
.plan ul{list-style:none;display:grid;gap:10px;margin-bottom:26px}
.plan li{display:flex;gap:10px;font-size:16.5px}.plan li:before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}
.plan .btn{width:100%}
.plan.best .btn{background:var(--acc);border-color:var(--acc);color:#fff}
.note{max-width:900px;margin:22px auto 0;text-align:center;color:var(--muted);font-size:15px}
/* renamer demo */
.demo{background:var(--espresso);border-radius:14px;padding:30px;color:#E9DDCB;box-shadow:var(--shadow);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.demo .lbl{font:700 12px/1 "Source Sans 3";letter-spacing:.18em;text-transform:uppercase;color:var(--brass-l);margin-bottom:12px}
.demo .tok{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.demo .tok button{font:600 14px/1 "Source Sans 3";padding:9px 14px;border-radius:999px;border:1px solid rgba(233,201,142,.4);background:rgba(255,255,255,.04);color:#F3EADB;cursor:pointer}
.demo .tok button.on{background:var(--ren);border-color:var(--ren);color:#fff}
.demo .files{display:grid;gap:8px;font-size:14.5px}
.demo .files div{display:grid;grid-template-columns:1fr 24px 1.4fr;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.04)}
.demo .files .old{color:#A89885;text-decoration:line-through}.demo .files .new{color:#CFE3C9}
.demo .files i{color:var(--brass-l);font-style:normal;text-align:center}
.demo .cap{font:500 13.5px/1.5 "Source Sans 3";color:#A89885;margin-top:14px}
/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.form{background:#fff;border:1px solid var(--line);border-top:5px solid var(--brass);border-radius:12px;padding:36px;box-shadow:var(--shadow);display:grid;gap:16px}
.form label{display:grid;gap:6px;font-weight:600;font-size:15px}
.form input,.form select,.form textarea{font:17px/1.4 "Source Sans 3";padding:13px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--brass);border-color:var(--brass)}
.form textarea{min-height:140px}.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cinfo .ln{display:flex;gap:14px;margin:18px 0;align-items:flex-start}.cinfo .ln svg{width:22px;height:22px;color:var(--brass-d);flex:none;margin-top:4px}
.cinfo .ln b{display:block}
.order-steps{margin-top:30px;background:var(--parch);border:1px solid var(--line);border-radius:12px;padding:26px}
.order-steps ol{margin:12px 0 0 20px;display:grid;gap:8px;color:var(--muted)}
/* footer */
footer{background:var(--espresso) var(--grain);color:#BCAC97;padding:70px 0 28px;font-size:15.5px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
footer .logo{color:#FBF4E8}footer .logo span b{color:var(--brass-l)}
footer h4{font:700 12.5px/1 "Source Sans 3";letter-spacing:.2em;text-transform:uppercase;color:#FBF4E8;margin-bottom:14px}
footer li{list-style:none;margin:9px 0}footer a:hover{color:var(--brass-l)}
.legal{border-top:1px solid #3B2E25;margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#8E7F6D}
@media(max-width:1100px){.nav,.top .btn{display:none}.menu-btn{display:block}.choose,.ptable,.fgrid,.steps{grid-template-columns:1fr 1fr}.why,.contact,.prob{grid-template-columns:1fr;gap:40px}.why .ph{aspect-ratio:16/10}footer .cols{grid-template-columns:1fr 1fr}.hero h1{font-size:56px}}
@media(max-width:700px){.wrap{padding:0 20px}.top .wrap{height:72px}.logo{font-size:21px}.logo svg{width:28px;height:28px}.hero .wrap{padding-top:70px;padding-bottom:80px}.hero h1{font-size:42px}.hero:before{background:linear-gradient(rgba(29,22,17,.9),rgba(29,22,17,.92)),var(--bg) center/cover}.sec-h h2,.cta h2{font-size:36px}.choose,.ptable,.fgrid,.steps,.plans,.form .row2{grid-template-columns:1fr}.steps{gap:40px}section{padding:72px 0}.cta .box{padding:56px 22px}.demo{padding:20px}.demo .files div{grid-template-columns:1fr;gap:2px}.demo .files i{display:none}.form{padding:24px}footer .cols{grid-template-columns:1fr}.plan .price{font-size:44px}}

/* live additions */
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:100;background:var(--brass);color:#1d1611;padding:10px 16px;border-radius:6px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.mnav{display:none}
@media(max-width:1100px){body.nav-open .mnav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:3px solid var(--brass);box-shadow:var(--shadow)}
.mnav a{display:block;padding:16px 28px;border-top:1px solid var(--line);font:600 17px "Source Sans 3"}.mnav a.on{color:var(--brass-d)}.mnav a.cta{color:var(--brass-d)}}
.hp{position:absolute;left:-9999px}
.notice{padding:14px 16px;border:1px solid var(--brass);border-radius:8px;background:#FBF1DE;font-size:16px}
.notice.err{border-color:#B5452C;background:#F8E3DC}
.prose{max-width:800px}.prose h2{font-size:36px;margin:32px 0 12px}.prose p,.prose ul,.prose ol{margin:0 0 16px}.prose ul,.prose ol{padding-left:22px}.prose a{color:var(--brass-d);text-decoration:underline}
.e404{text-align:center;padding:130px 0}.e404 h1{font-size:58px;margin:16px 0}.e404 p{color:var(--muted);max-width:540px;margin:0 auto 28px}.e404 .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}