/* Home of try2catch.me, from the approved «Rivisitata» design. The CSP drops inline style, so every rule lives here. */
/* Barlow from the app (SIL OFL, fonts/OFL.txt), served by try2catch.me itself: no third-party requests. */
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/barlow_regular.ttf) format("truetype")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fonts/barlow_medium.ttf) format("truetype")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(fonts/barlow_semibold.ttf) format("truetype")}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(fonts/barlow_bold.ttf) format("truetype")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow_condensed_bold.ttf) format("truetype")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(fonts/barlow_condensed_extrabold.ttf) format("truetype")}

body{margin:0;padding:0 clamp(20px,6.5vw,96px);background:#F4F1E8;color:#18211F;font-family:Barlow,sans-serif}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:#18211F}
a:hover{color:#4A5450}
:focus-visible{outline:3px solid #18211F;outline-offset:3px}
h1,h2,h3,.cond{font-family:"Barlow Condensed",sans-serif;font-weight:800}
h2{font-size:clamp(44px,6vw,80px);line-height:.95}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:3px;color:#4A5450}
.head{display:flex;flex-direction:column;gap:16px}
.panel{border-radius:32px;padding:clamp(48px,7vw,96px) clamp(24px,5vw,64px)}
.dark{background:#18211F;color:#F4F1E8}
.dark .eyebrow{color:#D8FF3E}
.dark :focus-visible{outline-color:#D8FF3E}
/* min() keeps every grid inside 360 px screens. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:32px 64px;align-items:center}

.top{padding:22px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.brand,.brand:hover{color:#18211F}
.brand span{font-size:26px}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;font-size:15px;font-weight:600}
nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none}
nav .lang{padding:0 12px;border:1.5px solid #18211F;border-radius:22px}

.hero{padding:clamp(24px,4vw,56px) 0 clamp(48px,6vw,88px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:clamp(32px,5vw,64px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px}
h1{font-size:clamp(60px,8vw,116px);line-height:1.02}
.mark{background:linear-gradient(transparent 52%,#D8FF3E 52%,#D8FF3E 90%,transparent 90%);padding:0 6px}
.lead{max-width:520px;font-size:clamp(18px,1.8vw,21px);line-height:1.5;color:#4A5450}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.soon{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:24px;background:#18211F;color:#F4F1E8;font-size:15px;font-weight:600}
.more{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;font-size:16px;font-weight:700}

.run{background:#18211F;color:#F4F1E8;border-radius:28px;padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:18px}
.run-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;letter-spacing:1px}
.live{display:inline-flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:5px;background:#D8FF3E}
.chip{padding:5px 12px;border-radius:14px;background:#26302D;color:#C9D3CC}
.ahead{display:flex;flex-direction:column;gap:2px}
.ahead span:first-child{font-size:13px;font-weight:700;letter-spacing:2px;color:#C9D3CC}
.ahead .cond{font-size:clamp(96px,11vw,150px);line-height:.9;color:#D8FF3E}
.voice{display:flex;align-items:center;gap:12px;background:#26302D;border-radius:16px;padding:14px 16px;font-size:18px;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1.5px solid #3A4642;padding-top:14px}
.stats div{display:flex;flex-direction:column;gap:2px}
.stats span:first-child{font-size:12px;color:#C9D3CC}
.stats .cond{font-size:clamp(22px,2.6vw,30px)}

.photo{position:relative;border-radius:32px;overflow:hidden}
.photo img{display:block;width:100%;height:clamp(260px,36vw,520px);object-fit:cover}
.motto{position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(16px,3vw,32px);max-width:calc(100% - 32px);background:#18211F;color:#D8FF3E;font-size:clamp(24px,3.4vw,44px);line-height:1.05;padding:14px 20px;border-radius:14px}

.ghost{padding:clamp(56px,8vw,112px) 0 clamp(40px,6vw,80px);display:flex;flex-direction:column;gap:40px}
.ghost .grid{gap:24px 64px;align-items:end}
.ghost .grid>p{font-size:19px;line-height:1.55;color:#4A5450}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.mode{background:#FBFAF5;border:1.5px solid #E2DDCF;border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:12px}
.mode-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:#4A5450}
.mode h3{font-size:34px}
.mode p{font-size:16px;line-height:1.5;color:#4A5450}
.mode.ink{background:#18211F;border:0;color:#F4F1E8}
.mode.ink .mode-top,.mode.ink p{color:#C9D3CC}
.mode.ink h3{color:#D8FF3E}
.mode.ink .quote{margin-top:auto;padding-top:10px;font-size:17px;font-weight:700;line-height:1.35;color:#F4F1E8}

.news{display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.feature{display:flex;flex-direction:column;gap:14px}
.badge{align-self:flex-start;background:#D8FF3E;color:#18211F;font-size:12px;font-weight:700;letter-spacing:1px;padding:4px 10px;border-radius:6px}
.feature h3{font-size:clamp(36px,4vw,48px)}
.feature p{font-size:18px;line-height:1.5;color:#C9D3CC}
.feature ul{display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.45}
.feature li span{color:#D8FF3E}
.bubbles{display:flex;flex-direction:column;gap:14px}
.bubble{align-self:flex-start;max-width:420px;background:#D8FF3E;color:#18211F;border-radius:22px 22px 22px 6px;padding:18px 22px;display:flex;flex-direction:column;gap:4px;font-size:22px;font-weight:700}
.bubble span:first-child{font-size:12px;letter-spacing:2px}
.bubble.alt{align-self:flex-end;background:#26302D;color:#F4F1E8;border-radius:22px 22px 6px 22px}
.bubble.alt span:first-child{color:#C9D3CC}
.invite{background:#F4F1E8;color:#18211F;border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:14px}
.invite>.cond{font-size:26px;line-height:1.05}
.invite-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.invite-row .cond{font-size:28px}
.code{background:#18211F;color:#D8FF3E;font-size:14px;font-weight:700;letter-spacing:1px;padding:6px 12px;border-radius:10px}
.private{display:flex;align-items:center;gap:8px;font-size:14px;color:#4A5450}

.steps{padding:clamp(56px,8vw,112px) 0;display:flex;flex-direction:column;gap:40px}
.steps ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px}
.steps li{border-top:6px solid #D8FF3E;padding-top:20px;display:flex;flex-direction:column;gap:10px}
.steps li .cond{font-size:56px;line-height:1}
.steps h3{font-family:Barlow,sans-serif;font-size:24px;font-weight:700}
.steps li p{font-size:17px;line-height:1.5;color:#4A5450}

.relay{background:#A3B6AA;color:#18211F}
.relay .eyebrow{font-weight:700;color:inherit}
.relay-text{max-width:520px;font-size:19px;line-height:1.5}
.button{align-self:flex-start;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:24px;background:#18211F;font-size:16px;font-weight:700;text-decoration:none}
.button,.button:hover{color:#F4F1E8}
.legs{display:flex;flex-direction:column;gap:20px}
.km{font-size:clamp(56px,8vw,104px);line-height:1}
.km span{font-size:.4em}
.legs-note{font-size:16px;font-weight:600}

.contact{margin-top:clamp(24px,4vw,40px);display:flex;flex-wrap:wrap;gap:48px}
.contact .head{flex:1 1 320px}
.contact-text{font-size:18px;line-height:1.5;color:#C9D3CC}
.stores{margin-top:8px;font-size:17px;font-weight:700;color:#D8FF3E}
form{flex:2 1 440px;display:flex;flex-direction:column;gap:16px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}
input,textarea{border:0;border-radius:12px;background:#F4F1E8;color:#18211F;padding:0 14px;font:inherit;font-weight:400}
input{height:50px}
textarea{padding:12px 14px;resize:vertical}
.trap{display:none}
.note{font-size:14px;line-height:1.5;color:#C9D3CC}
/* Vertical padding on the inline link gives it a 44 px target without moving the text. */
.note a{padding:14px 0}
.note a,.note a:hover{color:#F4F1E8}
button{align-self:flex-start;min-height:52px;padding:0 34px;border:0;border-radius:26px;background:#D8FF3E;color:#18211F;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.result{font-size:16px;font-weight:600}

footer{padding:28px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;font-size:14px}
.sign{display:flex;align-items:center;gap:10px;color:#4A5450}
.links{display:flex;flex-wrap:wrap;gap:0 20px}
.links a{display:inline-flex;align-items:center;min-height:44px}