/* AMAROK for Men — landing page styles (scoped under .amarok-landing / .amarok-legal) */

.amarok-landing{
  --background:#080a0c;--foreground:#f4f6f7;--card:#0d1217;--card-foreground:#fff;
  --popover:#101820;--popover-foreground:#fff;--primary:#d76f4e;--primary-foreground:#fff;
  --secondary:#142330;--secondary-foreground:#fff;--muted:#1b232b;--muted-foreground:#aab7c2;
  --accent:#1288bf;--accent-foreground:#fff;--destructive:#ff8070;--border:#32404b;
  --input:#617583;--ring:#1288bf;
  background:var(--background);color:var(--foreground);font-family:'Montserrat',Arial,sans-serif;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  overflow-x:hidden;
}
.amarok-landing *{box-sizing:border-box}
.amarok-landing a{color:inherit;text-decoration:none}
.amarok-landing a:focus-visible,.amarok-landing button:focus-visible{outline:2px solid #68c9f2;outline-offset:5px}
.amarok-landing .header{height:105px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#000;border-bottom:1px solid #26303a}
.amarok-landing .logo{display:flex;flex-direction:column;align-items:center;width:205px}
.amarok-landing .logo img{width:100%;height:auto;display:block}
.amarok-landing .logo>span{font-size:.75rem;letter-spacing:.4em;margin-top:6px;color:#f4f6f7}
.amarok-landing nav{display:flex;gap:42px;align-items:center;font-size:.875rem}
.amarok-landing nav>a:first-child{color:#b7c1c9}
.amarok-landing .nav-cta{border-bottom:1px solid #d76f4e;padding:12px 0;color:#f4f6f7}
.amarok-landing .nav-cta span{margin-left:30px}
.amarok-landing .hero{position:relative;min-height:770px;background:#080a0c;overflow:hidden;isolation:isolate}
.amarok-landing .campaign{position:absolute;right:0;top:0;width:100%;height:100%;object-fit:contain;object-position:right center;z-index:-3}
.amarok-landing .hero-wash{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#080a0c 0%,rgba(8,10,12,.92) 21%,rgba(8,10,12,.42) 40%,transparent 57%),linear-gradient(0deg,#080a0c,transparent 14%)}
.amarok-landing .hero-copy{padding:94px 0 110px 5%;width:46%;max-width:800px}
.amarok-landing .eyebrow{font-size:.75rem;letter-spacing:.15em;font-weight:600;margin:0 0 27px;line-height:1.8}
.amarok-landing .hero .eyebrow{color:#87c4dd;display:flex;align-items:center;gap:10px}
.amarok-landing .hero .eyebrow>span{width:23px;height:2px;background:#d76f4e;flex-shrink:0}
.amarok-landing h1{font-size:clamp(3.4rem,4.7vw,5.7rem);line-height:1.03;font-weight:800;letter-spacing:-.055em;margin:0 0 25px;color:var(--foreground)}
.amarok-landing h1 em{font-style:normal;color:#fff}
.amarok-landing h1 em:after{content:'';display:block;width:75px;height:4px;background:linear-gradient(90deg,#1288bf 50%,#d76f4e 50%);margin-top:24px}
.amarok-landing .intro{color:#b6c2cb;font-size:1rem;line-height:1.85;margin:0 0 30px;max-width:420px}
.amarok-landing .formula-note{display:flex;flex-direction:column;gap:5px;border-left:2px solid #d76f4e;padding:3px 0 3px 15px;margin:-8px 0 26px;max-width:440px}
.amarok-landing .formula-note strong{font-size:.875rem;line-height:1.5;letter-spacing:.08em;font-weight:700;color:#ed9a7e}
.amarok-landing .formula-note span{font-size:.875rem;line-height:1.6;color:#bdc8cf}
.amarok-landing .signup{max-width:460px}
.amarok-landing .signup-title{font-size:1rem;line-height:1.5;margin:0 0 8px;font-weight:600;color:#fff}
.amarok-landing .signup-description{font-size:.875rem;line-height:1.7;color:#bdc7ce;margin:0 0 18px}
.amarok-landing .email-row{display:flex;border:1px solid #53606a;background:#070e14c9;padding:5px;min-height:62px}
.amarok-landing .email-input{flex:1;min-width:0;border:0;border-radius:0;box-shadow:none;color:#fff;background:transparent;font-size:1rem;height:50px;padding:0 14px;font-family:inherit}
.amarok-landing .email-input::placeholder{color:#8a99a3}
.amarok-landing .email-row button{background:#d76f4e;color:#fff;border:0;padding:0 24px;font:600 .875rem 'Montserrat',Arial,sans-serif;white-space:nowrap;cursor:pointer}
.amarok-landing .email-row button span{font-size:1.25rem;margin-left:14px}
.amarok-landing .email-row button:hover{background:#c35d3d}
.amarok-landing .email-row button:disabled{opacity:.6}
.amarok-landing .consent{display:flex;gap:10px;margin-top:16px;align-items:flex-start}
.amarok-landing .consent label{font-size:.8125rem;line-height:1.6;color:#bdc7ce;cursor:pointer}
.amarok-landing .consent input[type=checkbox]{margin-top:3px;min-width:18px;min-height:18px;width:18px;height:18px;border-color:#8b9da9}
.amarok-landing .privacy-link{font-size:.75rem;color:#9faeb8;text-decoration:underline;text-underline-offset:4px;display:inline-block;margin-top:14px}
.amarok-landing .form-status{font-size:.875rem;line-height:1.6;color:#ffc1ae;margin:8px 0}
.amarok-landing .form-status:empty{display:none}
.amarok-landing .success{color:#79d6f9;background:#0f2935;padding:20px;border:1px solid #255970}
.amarok-landing .trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.amarok-landing .hero-base{position:absolute;bottom:22px;left:5%;right:5%;display:flex;justify-content:space-between;color:#a8b6c0;letter-spacing:.12em;font-size:.75rem}
.amarok-landing .ribbon{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid #24313c;border-bottom:1px solid #24313c;padding:25px 5%;font-size:clamp(1rem,2vw,1.8rem);font-weight:800;letter-spacing:-.04em;background:#0c1218}
.amarok-landing .ribbon-end{color:#1288bf}
.amarok-landing .collection{padding:80px 5% 85px}
.amarok-landing .collection-title{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.amarok-landing .collection-title .eyebrow{color:#6fbbdb;margin-bottom:18px}
.amarok-landing h2{font-size:clamp(2.2rem,3.6vw,4rem);letter-spacing:-.06em;line-height:1.12;font-weight:800;margin:0;color:var(--foreground)}
.amarok-landing .collection-title h2 span{color:#8c9da9}
.amarok-landing .collection-title>p{color:#a9b8c3;font-size:1rem;line-height:1.8;margin-bottom:4px}
.amarok-landing .lineup{display:grid;grid-template-columns:repeat(3,1fr);margin-top:42px;border-left:1px solid #27353e;border-top:1px solid #27353e;list-style:none;padding:0}
.amarok-landing .lineup article{position:relative;padding:25px 28px 30px;border-right:1px solid #27353e;border-bottom:1px solid #27353e;min-height:180px;transition:background .2s}
.amarok-landing .lineup article:hover{background:#111b23}
.amarok-landing .product-top{display:flex;justify-content:space-between;font-size:.75rem;color:#859ba9}
.amarok-landing .lineup h3{font-size:1.25rem;letter-spacing:-.035em;font-weight:600;margin:25px 0 10px;color:var(--foreground)}
.amarok-landing .lineup p{font-size:.8125rem;color:#aab8c1;line-height:1.5;margin:0}
.amarok-landing .lineup article:before{position:absolute;content:'';height:3px;width:45px;top:-1px;left:28px;background:#c5d2db}
.amarok-landing .lineup article.copper:before{background:#d76f4e}
.amarok-landing .lineup article.blue:before{background:#1288bf}
.amarok-landing .lineup article.green:before{background:#309244}
.amarok-landing .closing{text-align:center;padding:70px 5%;background:radial-gradient(ellipse at 50% 100%,#103444,transparent 65%),#080d12;border-top:1px solid #263743;border-bottom:1px solid #263743}
.amarok-landing .closing .eyebrow{color:#8da5b7;justify-content:center}
.amarok-landing .closing h2{font-size:clamp(2.8rem,5vw,5rem)}
.amarok-landing .closing h2 span{color:#b2c8d7}
.amarok-landing .closing-offer{font-size:1rem;line-height:1.8;color:#bdc7ce;margin:22px 0 0}
.amarok-landing .button{display:inline-block;margin-top:27px;background:#d76f4e;color:#fff;padding:19px 28px;font-size:.875rem;font-weight:600}
.amarok-landing .button:hover{background:#c35d3d}
.amarok-landing footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:35px 5%;background:#000}
.amarok-landing footer .logo{width:160px}
.amarok-landing footer p,.amarok-landing footer>a:last-child{font-size:.75rem;color:#a1aeb7;margin:0}
.amarok-landing .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}

@media(min-width:1700px){.amarok-landing .hero{min-height:870px}.amarok-landing .hero-copy{padding-top:115px}}
@media(max-width:1050px) and (min-width:901px){.amarok-landing .hero-copy{width:54%}.amarok-landing .hero .eyebrow{max-width:340px}.amarok-landing h1{font-size:3.6rem}.amarok-landing .campaign{width:116%;max-width:none;right:-9%;object-position:right center}.amarok-landing .hero-wash{background:linear-gradient(90deg,#080a0c 0%,rgba(8,10,12,.95) 24%,rgba(8,10,12,.65) 41%,transparent 70%)}}
@media(max-width:900px){.amarok-landing .hero-copy{width:61%}.amarok-landing .lineup{grid-template-columns:repeat(2,1fr)}.amarok-landing .collection-title{display:block}.amarok-landing .collection-title>p{margin-top:25px}}
@media(max-width:600px){
  .amarok-landing .header{height:84px;padding:0 6%}
  .amarok-landing .logo{width:150px}
  .amarok-landing nav>a:first-child{display:none}
  .amarok-landing .nav-cta{font-size:.75rem}
  .amarok-landing .nav-cta span{margin-left:10px}
  .amarok-landing .hero{min-height:0;padding-top:clamp(285px,86vw,520px)}
  .amarok-landing .campaign{width:175%;max-width:none;height:auto;left:-75%;right:auto;top:0;object-fit:contain}
  .amarok-landing .hero-wash{height:clamp(295px,88vw,530px);background:linear-gradient(0deg,#080a0c 0%,transparent 27%)}
  .amarok-landing .hero-copy{width:100%;padding:0 6% 85px;max-width:none}
  .amarok-landing .hero .eyebrow{font-size:.6875rem;letter-spacing:.11em;margin-bottom:20px}
  .amarok-landing h1{font-size:clamp(2.8rem,10.3vw,4rem);letter-spacing:-.065em;line-height:1.05}
  .amarok-landing .intro{font-size:.9375rem;max-width:none}
  .amarok-landing .signup{max-width:none}
  .amarok-landing .email-row button{padding:0 15px}
  .amarok-landing .email-row button span{margin-left:7px}
  .amarok-landing .consent label{font-size:.8125rem}
  .amarok-landing .hero-base{font-size:.625rem;gap:20px;left:6%;right:6%;line-height:1.7}
  .amarok-landing .hero-base>span{max-width:160px}
  .amarok-landing .hero-base>a{text-align:right}
  .amarok-landing .ribbon{gap:12px;padding:22px 6%;font-size:.8125rem;flex-wrap:wrap}
  .amarok-landing .collection{padding:50px 6%}
  .amarok-landing .collection-title .eyebrow{font-size:.6875rem}
  .amarok-landing .lineup article{padding:22px 16px;min-height:190px}
  .amarok-landing .lineup article:before{left:16px}
  .amarok-landing .lineup h3{font-size:1.0625rem}
  .amarok-landing .lineup p{font-size:.8125rem}
  .amarok-landing footer{flex-wrap:wrap;padding:30px 6%}
  .amarok-landing footer p{order:3;width:100%;margin:0}
  .amarok-landing .closing{padding:55px 6%}
  .amarok-landing .closing .eyebrow{font-size:.6875rem}
}
@media(max-width:380px){.amarok-landing .email-row{flex-wrap:wrap;gap:5px}.amarok-landing .email-row .email-input{flex-basis:100%}.amarok-landing .email-row button{width:100%;min-height:48px}}
@media(prefers-reduced-motion:reduce){.amarok-landing *{transition:none!important}}

/* AMAROK legal / privacy page */
.amarok-legal{background:#080a0c;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow-x:hidden}
.amarok-legal .legal-inner{max-width:800px;padding:70px 24px;margin:auto;font-family:'Montserrat',Arial,sans-serif}
.amarok-legal a{color:#79c9ec}
.amarok-legal h1{font-size:3rem;line-height:1.15;margin:36px 0 20px;color:#fff}
.amarok-legal h2{font-size:1.5rem;margin:35px 0 15px;color:#fff}
.amarok-legal p{font-size:1rem;line-height:1.8;color:#bac8d2}
.amarok-legal p a{text-decoration:underline}
