/* PicToClips site styles.
   Layout: a clean product site with a dark film-strip motif; one hot accent (tomato) and a teal for "good" signals. */
:root{
  --bg:#F5F6F8; --surface:#FFFFFF; --sunken:#ECEEF2; --ink:#0F1218; --muted:#5A6170; --line:#DCE0E7;
  --accent:#C93316; --accent-ink:#FFFFFF; --accent-soft:#FFE6DF; --teal:#0B7A6B; --bad:#C9352B; --good:#178A57;
  --shadow:0 24px 50px -24px rgba(15,18,24,.35);
  --f-display:"Syne","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D0F13; --surface:#161920; --sunken:#0F1116; --ink:#EEF0F4; --muted:#9AA1AE; --line:#272B34;
  --accent:#FF6A4D; --accent-ink:#10131A; --accent-soft:#3A1E18; --teal:#3CC9B4; --bad:#FF7A70; --good:#4CC38A;
  --shadow:0 24px 50px -24px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D0F13; --surface:#161920; --sunken:#0F1116; --ink:#EEF0F4; --muted:#9AA1AE; --line:#272B34;
  --accent:#FF6A4D; --accent-ink:#10131A; --accent-soft:#3A1E18; --teal:#3CC9B4; --bad:#FF7A70; --good:#4CC38A;
  --shadow:0 24px 50px -24px rgba(0,0,0,.7); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--f-body);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1}
a{color:inherit;text-underline-offset:3px}
img,video,canvas{max-width:100%}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.025em;line-height:1.04;text-wrap:balance;margin:0}
h1{font-size:clamp(42px,7vw,80px);font-weight:800}
h2{font-size:clamp(28px,4vw,44px);font-weight:800}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:58ch}
.eyebrow{font:700 12px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.label{font:700 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.note{font-size:13px;color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
main:focus{outline:none}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 21px var(--f-display);letter-spacing:-.03em}
.logo b{color:var(--accent)}
.logo-img{width:32px;height:32px;border-radius:8px;flex:none;box-shadow:0 0 0 1px var(--line);background:#fff;display:block}
.logo picture{display:block;flex:none}
@media (prefers-color-scheme: dark){.logo-img{background:#0F1218;box-shadow:none}}
.logo-mark{width:30px;height:30px;border-radius:8px;background:var(--ink);position:relative;overflow:hidden;flex:none}
.logo-mark::before{content:"";position:absolute;inset:7px 9px 7px 7px;background:var(--bg);border-radius:3px}
.logo-mark::after{content:"";position:absolute;right:5px;top:50%;transform:translateY(-50%);border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}
.nav-links{display:flex;gap:4px;margin-left:6px}
.nav-links a{text-decoration:none;font-weight:600;font-size:14px;color:var(--muted);padding:8px 12px;border-radius:9px}
.nav-links a:hover,.nav-links a[aria-current]{background:var(--sunken);color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.credit-pill{display:inline-flex;align-items:center;gap:7px;font:600 13px var(--f-mono);padding:6px 12px;border-radius:999px;background:var(--sunken);border:1px solid var(--line);text-decoration:none;white-space:nowrap}
.credit-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 14.5px var(--f-body);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;padding:10px 18px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .15s,transform .15s}
.btn:hover{border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06);border-color:var(--accent)}
.btn.big{padding:14px 24px;font-size:16px;border-radius:13px}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:9px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,var(--ink));outline-offset:2px}
.chip{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--f-body);padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);white-space:nowrap;width:max-content}
.chip.hot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.pad{padding:22px}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-weight:700;font-size:14px}
input[type=text],input[type=email],input[type=url],input[type=number],textarea,select{font:500 15px var(--f-body);width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--ink);outline:none}
textarea{resize:vertical;min-height:90px}
.check{display:block;position:relative;padding-left:28px;font-size:14px;line-height:1.45;cursor:pointer}
.check input{position:absolute;left:0;top:1px;width:18px;height:18px;margin:0;accent-color:var(--accent)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--sunken);border:1px solid var(--line);border-radius:11px}
.seg button{border:0;background:transparent;font:700 14px var(--f-body);color:var(--muted);padding:9px 10px;border-radius:8px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.alert{padding:12px 14px;border-radius:11px;font-size:14.5px;border:1px solid var(--line);background:var(--sunken)}
.alert.err{background:color-mix(in srgb,var(--bad) 12%,var(--surface));border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.alert.ok{background:color-mix(in srgb,var(--good) 12%,var(--surface));border-color:color-mix(in srgb,var(--good) 35%,transparent)}

/* decorative film strip divider */
.filmstrip{height:34px;background:var(--ink);background-image:repeating-linear-gradient(90deg,transparent 0 14px,var(--bg) 14px 30px,transparent 30px 44px);background-size:44px 12px;background-repeat:repeat-x;background-position:0 50%;opacity:.95}

/* legal / text pages */
.doc{max-width:780px;padding-top:48px;padding-bottom:24px}
.doc h1{font-size:clamp(34px,5vw,52px);margin-bottom:10px}
.doc h2{font-size:22px;margin:32px 0 10px}
.doc p,.doc li{max-width:70ch}
.doc p+p{margin-top:10px}
.doc ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}

/* footer */
footer.foot{border-top:1px solid var(--line);margin-top:56px;padding-top:32px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--muted)}
footer.foot .wrap{display:flex;gap:20px 32px;flex-wrap:wrap;justify-content:space-between}
footer.foot strong{color:var(--ink)}
footer.foot nav{display:flex;gap:16px;flex-wrap:wrap}
footer.foot a{text-decoration:none}footer.foot a:hover{text-decoration:underline}

@media (max-width:760px){
  header.nav .wrap{gap:10px;padding-top:8px;padding-bottom:8px}
  .nav-links{order:3;width:100%;margin:0;overflow-x:auto}
  .pad{padding:18px}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}