ClampType/index.html at main · elustra/ClampType · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>ClampType — Fluid Typography Scale Generator</title>
<meta name="description" content="Generate mathematically perfect fluid typography scales. CSS clamp(), Figma Variables, and frame output — all in one free Figma plugin. Use the web app or install on Figma."/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 74'%3E%3Crect width='78' height='74' rx='14' fill='%23D46026'/%3E%3Cpath d='M20.9233 6.75L20.9409 6.98047L21.2671 11.2109L21.2876 11.4795H21.0181C18.5728 11.4795 16.7978 12.0161 15.646 13.043L15.645 13.0439C14.5193 14.0435 13.7603 15.4242 13.3784 17.2041C13.0351 19.0063 12.8628 21.0491 12.8628 23.334V50.666C12.8628 52.9068 13.035 54.9497 13.3784 56.7959L13.4546 57.125C13.8568 58.7469 14.5897 60.019 15.645 60.9561L15.646 60.957C16.7978 61.9839 18.5728 62.5205 21.0181 62.5205H21.2876L21.2671 62.7891L20.9409 67.0195L20.9233 67.25H20.6919C17.2821 67.25 14.5835 66.7052 12.6196 65.5908V65.5898C10.691 64.5141 9.30913 62.7695 8.46729 60.3799C7.63076 58.0052 7.12892 54.8978 6.95459 51.0674C6.78062 47.2013 6.69385 42.512 6.69385 37C6.69385 31.4448 6.78062 26.7554 6.95459 22.9326C7.12892 19.1022 7.63076 15.9948 8.46729 13.6201C9.3094 11.2297 10.692 9.48382 12.6216 8.4082C14.5853 7.29455 17.2832 6.75002 20.6919 6.75H20.9233Z' fill='white'/%3E%3Cpath d='M57.1958 6.75C60.6014 6.75002 63.2774 7.29382 65.1987 8.40723C67.172 9.48219 68.5776 11.2279 69.4204 13.6201C70.2569 15.9948 70.7588 19.1022 70.9331 22.9326C71.1071 26.7554 71.1938 31.4448 71.1938 37C71.1938 42.512 71.1071 47.2013 70.9331 51.0674C70.7588 54.8978 70.2569 58.0052 69.4204 60.3799C68.5777 62.772 67.1728 64.5178 65.1997 65.5928L65.1987 65.5918C63.2774 66.7054 60.6017 67.25 57.1958 67.25H56.9644L56.9468 67.0195L56.6206 62.7891L56.6001 62.5205H56.8696C59.3609 62.5205 61.1325 61.983 62.2388 60.96L62.2427 60.9561C63.3668 59.958 64.1037 58.5795 64.4429 56.8018L64.4438 56.7969L64.5796 56.0957C64.876 54.4373 65.0249 52.6277 65.0249 50.666V23.334C65.0249 21.0484 64.8304 19.0055 64.4438 17.2041L64.4429 17.1982C64.1037 15.4205 63.3668 14.042 62.2427 13.0439L62.2388 13.04C61.1325 12.017 59.3609 11.4795 56.8696 11.4795H56.6001L56.6206 11.2109L56.9468 6.98047L56.9644 6.75H57.1958Z' fill='white'/%3E%3Cpath d='M51.5562 13.9082V18.9639H41.978V59.9619H35.8745V18.9639H26.2964V13.9082H51.5562Z' fill='white'/%3E%3C/svg%3E">
<link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 74'%3E%3Crect width='78' height='74' rx='14' fill='%23D46026'/%3E%3Cpath d='M20.9233 6.75L20.9409 6.98047L21.2671 11.2109L21.2876 11.4795H21.0181C18.5728 11.4795 16.7978 12.0161 15.646 13.043L15.645 13.0439C14.5193 14.0435 13.7603 15.4242 13.3784 17.2041C13.0351 19.0063 12.8628 21.0491 12.8628 23.334V50.666C12.8628 52.9068 13.035 54.9497 13.3784 56.7959L13.4546 57.125C13.8568 58.7469 14.5897 60.019 15.645 60.9561L15.646 60.957C16.7978 61.9839 18.5728 62.5205 21.0181 62.5205H21.2876L21.2671 62.7891L20.9409 67.0195L20.9233 67.25H20.6919C17.2821 67.25 14.5835 66.7052 12.6196 65.5908V65.5898C10.691 64.5141 9.30913 62.7695 8.46729 60.3799C7.63076 58.0052 7.12892 54.8978 6.95459 51.0674C6.78062 47.2013 6.69385 42.512 6.69385 37C6.69385 31.4448 6.78062 26.7554 6.95459 22.9326C7.12892 19.1022 7.63076 15.9948 8.46729 13.6201C9.3094 11.2297 10.692 9.48382 12.6216 8.4082C14.5853 7.29455 17.2832 6.75002 20.6919 6.75H20.9233Z' fill='white'/%3E%3Cpath d='M57.1958 6.75C60.6014 6.75002 63.2774 7.29382 65.1987 8.40723C67.172 9.48219 68.5776 11.2279 69.4204 13.6201C70.2569 15.9948 70.7588 19.1022 70.9331 22.9326C71.1071 26.7554 71.1938 31.4448 71.1938 37C71.1938 42.512 71.1071 47.2013 70.9331 51.0674C70.7588 54.8978 70.2569 58.0052 69.4204 60.3799C68.5777 62.772 67.1728 64.5178 65.1997 65.5928L65.1987 65.5918C63.2774 66.7054 60.6017 67.25 57.1958 67.25H56.9644L56.9468 67.0195L56.6206 62.7891L56.6001 62.5205H56.8696C59.3609 62.5205 61.1325 61.983 62.2388 60.96L62.2427 60.9561C63.3668 59.958 64.1037 58.5795 64.4429 56.8018L64.4438 56.7969L64.5796 56.0957C64.876 54.4373 65.0249 52.6277 65.0249 50.666V23.334C65.0249 21.0484 64.8304 19.0055 64.4438 17.2041L64.4429 17.1982C64.1037 15.4205 63.3668 14.042 62.2427 13.0439L62.2388 13.04C61.1325 12.017 59.3609 11.4795 56.8696 11.4795H56.6001L56.6206 11.2109L56.9468 6.98047L56.9644 6.75H57.1958Z' fill='white'/%3E%3Cpath d='M51.5562 13.9082V18.9639H41.978V59.9619H35.8745V18.9639H26.2964V13.9082H51.5562Z' fill='white'/%3E%3C/svg%3E">
<style>
:root{
  --orange:#D46026;
  --orange-dk:#B03A10;
  --orange-lt:#F26A2F;
  --amber:#FD9651;
  --surf:#FFFFFF;
  --bg:#FFF8F2;
  --bg2:#FFF2E8;
  --surf3:#FFEEDE;
  --hdr:#FBF5EE;
  --hero-bg:#1A0808;
  --bdr:rgba(212,96,38,.13);
  --bdr-dark:rgba(212,96,38,.24);
  --ink:#2D1208;
  --ink2:#7A3920;
  --ink3:#B07054;
  --font:'Golos Text',system-ui,sans-serif;
  --mono:'DM Mono','Courier New',monospace;
  --max:1160px;
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* ══════════ NAV ══════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:64px;
  background:var(--hdr);
  border-bottom:1.5px solid var(--bdr-dark);
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.nav-logo-icon{width:32px;height:30px;background:#D46026;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:5px;flex-shrink:0;}
.nav-logo-icon svg{width:22px;height:20px;display:block;}
.nav-name{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.25px;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-link{padding:7px 12px;font-size:13px;font-weight:600;color:var(--ink2);text-decoration:none;border-radius:8px;transition:color .14s,background .14s;white-space:nowrap;}
.nav-link:hover{color:var(--ink);background:rgba(212,96,38,.08);}
.nav-cta{background:#D46026;color:#fff!important;padding:8px 16px!important;border-radius:8px;box-shadow:0 3px 12px rgba(212,96,38,.36);transition:background .14s,transform .14s,box-shadow .14s;}
.nav-cta:hover{background:#B03A10;transform:translateY(-1px);box-shadow:0 5px 16px rgba(212,96,38,.44);}
.nav-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;}
.nav-ham span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s,opacity .28s;display:block;}
.nav-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-ham.open span:nth-child(2){opacity:0;}
.nav-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-drawer{display:none;position:fixed;top:64px;left:0;right:0;z-index:99;background:var(--hdr);border-bottom:1.5px solid var(--bdr-dark);flex-direction:column;padding:14px 20px 18px;gap:4px;}
.nav-drawer.open{display:flex;}
.nav-drawer .nav-link{padding:11px 14px;font-size:14px;border-radius:8px;}
.nav-drawer .nav-cta{margin-top:6px;text-align:center;padding:12px 14px!important;font-size:14px;border-radius:8px;}

/* ══════════ HERO ══════════ */
.hero{
  min-height:100vh;background:var(--hero-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden;
}
.presented-by{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:8px 20px 8px 14px;border-radius:100px;margin-bottom:28px;}
.presented-by-txt{font-size:11px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:.06em;}
.elustra-hero{height:22px;width:auto;display:block;flex-shrink:0;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.9);font-size:12px;font-weight:600;letter-spacing:.5px;padding:7px 18px;border-radius:100px;margin-bottom:32px;}
.dot{width:7px;height:7px;border-radius:50%;background:#4ADE80;animation:pulse 2s ease infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.38}}
.hero h1{font-size:clamp(34px,6.5vw,76px);font-weight:800;color:#fff;letter-spacing:-2px;line-height:1.06;max-width:860px;margin:0 auto 24px;position:relative;z-index:1;}
.hero h1 span{color:var(--amber);}
.hero-sub{font-size:clamp(15px,2vw,19px);font-weight:400;line-height:1.65;color:rgba(255,255,255,.6);max-width:580px;margin:0 auto 46px;position:relative;z-index:1;}
.hero-btns{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1;}
.btn-p{display:inline-flex;align-items:center;gap:9px;background:#D46026;color:#fff;font-family:var(--font);font-size:14.5px;font-weight:700;padding:13px 26px;border-radius:10px;text-decoration:none;border:none;cursor:pointer;box-shadow:0 6px 22px rgba(212,96,38,.48);transition:background .18s,transform .18s,box-shadow .18s;}
.btn-p:hover{background:#B03A10;transform:translateY(-2px);box-shadow:0 10px 28px rgba(212,96,38,.52);}
.btn-g{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.22);color:#fff;font-family:var(--font);font-size:14px;font-weight:600;padding:12px 22px;border-radius:10px;text-decoration:none;transition:background .18s,transform .18s;}
.btn-g:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}
.stats-strip{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:center;margin-top:64px;position:relative;z-index:1;}
.stat-h{text-align:center;}
.stat-n{font-size:30px;font-weight:800;color:#fff;line-height:1;}
.stat-l{font-size:10px;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.8px;text-transform:uppercase;margin-top:5px;}
.stat-d{width:1px;height:40px;background:rgba(255,255,255,.14);}

/* ══════════ SECTIONS SHARED ══════════ */
section{padding:88px 24px;}
.container{max-width:var(--max);margin:0 auto;}
.s-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#D46026;margin-bottom:14px;padding:5px 14px;background:#FFEEDE;border-radius:100px;}
.s-h{font-size:clamp(24px,3.8vw,44px);font-weight:800;letter-spacing:-1px;color:var(--ink);margin-bottom:16px;line-height:1.12;}
.s-h span{color:#D46026;}
.s-p{font-size:16.5px;color:var(--ink2);max-width:560px;line-height:1.65;}

/* ══════════ WEB TOOL SECTION ══════════ */
.tool-bg{background:var(--bg2);}
.tool-layout{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:28px;
  margin-top:52px;
  align-items:start;
}
.tool-panel{
  background:var(--surf);
  border:1.5px solid var(--bdr-dark);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(212,96,38,.08);
  position:sticky;
  top:84px;
}
.tool-panel-hdr{
  padding:18px 22px;
  background:var(--surf3);
  border-bottom:1.5px solid var(--bdr);
  display:flex;align-items:center;gap:12px;
}
.tool-panel-hdr-icon{
  width:34px;height:34px;background:#D46026;border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tool-panel-hdr-icon svg{width:20px;height:18px;display:block;}
.tph-name{font-size:15px;font-weight:700;color:var(--ink);}
.tph-sub{font-size:13px;color:var(--ink3);}

/* Input groups */
.tp-section{padding:18px 22px;border-bottom:1px solid var(--bdr);}
.tp-section:last-child{border-bottom:none;}
.tp-label{font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink3);margin-bottom:12px;}
.ratio-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.ratio-tile{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 4px;border-radius:9px;
  border:1.5px solid var(--bdr);background:var(--bg);
  cursor:pointer;transition:all .13s;
}
.ratio-tile:hover:not(.on){border-color:#D46026;background:var(--surf3);transform:translateY(-1px);}
.ratio-tile.on{background:#D46026;border-color:#D46026;}
.ratio-val{font-size:12px;font-weight:700;color:var(--ink);transition:color .13s;font-family:var(--mono);}
.ratio-name{font-size:10px;font-weight:600;letter-spacing:.1px;color:var(--ink3);transition:color .13s;text-align:center;}
.ratio-tile.on .ratio-val,.ratio-tile.on .ratio-name{color:#fff;}
.inp-row{display:flex;align-items:center;background:var(--bg);border:1.5px solid var(--bdr);border-radius:10px;overflow:hidden;margin-bottom:10px;transition:border-color .13s;}
.inp-row:focus-within{border-color:#D46026;box-shadow:0 0 0 3px rgba(212,96,38,.12);}
.inp-label{padding:0 13px;font-size:13px;font-weight:700;color:var(--ink3);white-space:nowrap;border-right:1px solid var(--bdr);height:44px;display:flex;align-items:center;min-width:70px;}
.inp-in{flex:1;border:none;outline:none;padding:10px 12px;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);background:transparent;min-width:0;}
.inp-unit{padding:0 12px 0 0;font-size:13px;font-weight:600;color:var(--ink3);flex-shrink:0;}
.sel-in{flex:1;border:none;outline:none;padding:10px 12px;font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink);background:transparent;cursor:pointer;}
.custom-text-input{
  width:100%;border:1.5px solid var(--bdr);border-radius:10px;
  padding:11px 14px;font-family:var(--font);font-size:14px;font-weight:500;
  color:var(--ink);background:var(--bg);outline:none;
  transition:border-color .13s;
}
.custom-text-input:focus{border-color:#D46026;box-shadow:0 0 0 3px rgba(212,96,38,.12);}
.custom-text-input::placeholder{color:var(--ink3);}
.inp-hint{font-size:12px;color:var(--ink3);margin-top:7px;line-height:1.5;}

/* Generate buttons */
.gen-btns{padding:18px 22px;display:flex;flex-direction:column;gap:10px;}
.gen-btn-web{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 20px;border-radius:10px;font-family:var(--font);font-size:15px;font-weight:700;
  cursor:pointer;border:none;transition:all .18s;
}
.gen-btn-dl{
  background:#D46026;color:#fff;
  box-shadow:0 4px 16px rgba(212,96,38,.36);
}
.gen-btn-dl:hover{background:#B03A10;transform:translateY(-2px);box-shadow:0 7px 22px rgba(212,96,38,.44);}
.gen-btn-copy{
  background:var(--bg);color:var(--ink);
  border:1.5px solid var(--bdr-dark)!important;
}
.gen-btn-copy:hover{background:var(--surf3);border-color:#D46026!important;transform:translateY(-1px);}
.gen-btn-copy.done{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.35)!important;color:#059669;}

/* ══════════ RESULTS PANEL ══════════ */
.tool-results{display:flex;flex-direction:column;gap:20px;}

/* Scale table card */
.result-card{
  background:var(--surf);border:1.5px solid var(--bdr);border-radius:16px;overflow:hidden;
}
.result-card-hdr{
  padding:15px 20px;background:var(--surf3);
  border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:6px;
}
.result-card-title{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.2px;}
.result-card-meta{font-size:12px;color:var(--ink3);font-family:var(--mono);}

/* Scale rows */
.scale-tbl-hdr{
  display:grid;grid-template-columns:60px 1fr 1fr 100px 1fr;
  gap:0;padding:9px 16px;
  background:var(--bg);border-bottom:1px solid var(--bdr);
}
.scale-tbl-hdr span{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3);}
.scale-row{
  display:grid;grid-template-columns:60px 1fr 1fr 100px 1fr;
  gap:0;padding:10px 16px;border-bottom:1px solid var(--bdr);
  align-items:center;transition:background .12s;
}
.scale-row:last-child{border-bottom:none;}
.scale-row:hover{background:var(--bg);}
.sc-tag{font-family:var(--mono);font-size:12px;font-weight:700;color:#D46026;background:#FFEEDE;padding:4px 8px;border-radius:5px;display:inline-block;}
.sc-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:700;line-height:1.1;}
.sc-range{font-family:var(--mono);font-size:12px;color:var(--ink3);white-space:nowrap;}
.sc-clamp{font-family:var(--mono);font-size:11px;color:var(--ink3);word-break:break-all;line-height:1.4;}

/* Fluid preview card */
.fluid-card-body{padding:20px;}
.fluid-lvls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.fl-btn{
  padding:7px 14px;border-radius:8px;font-size:13px;font-weight:700;
  font-family:var(--font);cursor:pointer;border:1.5px solid var(--bdr);
  background:var(--bg);color:var(--ink2);transition:all .12s;
}
.fl-btn.on{background:#D46026;color:#fff;border-color:#D46026;}
.fl-btn:hover:not(.on){border-color:#D46026;color:#D46026;}
.fluid-vp-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.fluid-vp-label{font-size:14px;font-weight:600;color:var(--ink2);white-space:nowrap;}
.fluid-vp-sel{flex:1;border:1.5px solid var(--bdr);border-radius:9px;padding:9px 12px;font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink);background:var(--bg);outline:none;cursor:pointer;}
.fluid-vp-sel:focus{border-color:#D46026;}
.fluid-sample-box{
  background:#1A0808;border-radius:12px;padding:22px 24px 18px;
  min-height:120px;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.fluid-sample-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(212,96,38,.12),transparent 70%);}
.fluid-sample-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;position:relative;}
.fluid-sample-tag{font-family:var(--mono);font-size:11px;font-weight:700;color:rgba(255,169,93,.8);background:rgba(212,96,38,.15);padding:3px 10px;border-radius:5px;}
.fluid-sample-sz{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.4);}
#fluid-sample{color:#fff;font-weight:700;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;position:relative;}
.fluid-clamp-str{margin-top:12px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.3);word-break:break-all;line-height:1.45;position:relative;}

/* Script stress card */
.scripts-card-body{padding:18px 20px;}
.sc-dd-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.sc-dd{flex:1;border:1.5px solid var(--bdr);border-radius:9px;padding:9px 12px;font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink);background:var(--bg);outline:none;cursor:pointer;}
.sc-dd:focus{border-color:#D46026;}
.sc-dir-badge{font-size:12px;font-weight:700;padding:5px 11px;border-radius:6px;background:#FFEEDE;color:var(--ink3);white-space:nowrap;}
.sc-stress-box{
  background:var(--bg);border:1.5px solid var(--bdr);border-radius:10px;
  padding:18px;min-height:60px;
}
#sc-text-el{font-size:17px;font-weight:500;color:var(--ink);line-height:1.6;}
.sc-meta-row{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--ink3);}

/* CSS output card */
.css-out-wrap{padding:0;}
.css-out-hdr{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bdr);flex-wrap:wrap;gap:8px;}
.css-out-actions{display:flex;gap:7px;}
.css-action-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:8px;font-family:var(--font);font-size:13px;font-weight:700;
  cursor:pointer;border:1.5px solid var(--bdr);background:var(--bg);color:var(--ink);transition:all .15s;
}
.css-action-btn:hover{border-color:#D46026;color:#D46026;background:var(--surf3);}
.css-action-btn.done{border-color:rgba(16,185,129,.4);color:#059669;background:rgba(16,185,129,.07);}
.css-action-btn.dl{background:#D46026;color:#fff;border-color:#D46026;box-shadow:0 3px 12px rgba(212,96,38,.32);}
.css-action-btn.dl:hover{background:#B03A10;box-shadow:0 5px 16px rgba(212,96,38,.4);}
pre#css-out{
  padding:18px 20px;overflow-x:auto;
  font-family:var(--mono);font-size:13px;line-height:1.7;
  background:var(--bg);min-height:80px;
}
.c-root{color:var(--ink2);font-weight:600;}
.c-var{color:#D46026;}
.c-val{color:var(--ink);}

/* ══════════ HOW IT WORKS ══════════ */
.how-bg{background:var(--surf);}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:52px;}
.step{background:var(--bg);border:1.5px solid var(--bdr);border-radius:14px;padding:26px 22px;transition:transform .18s,box-shadow .18s;}
.step:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(212,96,38,.12);}
.step-n{width:38px;height:38px;border-radius:9px;background:#D46026;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;margin-bottom:14px;}
.step h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.step p{font-size:13px;color:var(--ink3);line-height:1.62;}

/* ══════════ FEATURES ══════════ */
.feat-bg{background:var(--bg2);}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:52px;}
.feat{background:var(--surf);border:1.5px solid var(--bdr);border-radius:14px;padding:26px 24px;transition:transform .18s,box-shadow .18s,border-color .18s;}
.feat:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(212,96,38,.12);border-color:rgba(212,96,38,.28);}
.feat-ico{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.feat h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.feat p{font-size:13.5px;color:var(--ink3);line-height:1.62;}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;}
.tag{font-family:var(--mono);font-size:10px;font-weight:500;background:#FFEEDE;color:#D46026;padding:3px 9px;border-radius:5px;}

/* ══════════ OUTPUTS ══════════ */
.out-bg{background:var(--surf);}
.out-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:52px;}
.out-card{border-radius:14px;padding:26px 22px;border:1.5px solid var(--bdr);background:var(--bg);transition:transform .18s,box-shadow .18s;}
.out-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(212,96,38,.12);}
.out-ext{font-family:var(--mono);font-size:12.5px;font-weight:500;margin-bottom:14px;display:inline-block;padding:4px 11px;border-radius:6px;}
.out-card h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.out-card ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.out-card li{font-size:12.5px;color:var(--ink3);display:flex;align-items:flex-start;gap:7px;line-height:1.42;}
.out-card li::before{content:'→';color:#D46026;font-weight:700;flex-shrink:0;}

/* ══════════ SCRIPTS ══════════ */
.scripts-bg{background:var(--bg2);}
.scripts-row{display:flex;gap:9px;align-items:flex-end;justify-content:center;flex-wrap:wrap;margin-top:52px;}
.script-item{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 12px;border-radius:11px;background:var(--bg);border:1.5px solid var(--bdr);min-width:78px;transition:transform .18s,box-shadow .18s;}
.script-item:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(212,96,38,.14);}
.script-flag{font-size:20px;line-height:1;}
.script-name{font-size:9.5px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.4px;text-align:center;}
.script-script{font-family:var(--mono);font-size:9.5px;color:var(--ink3);text-align:center;}

/* ══════════ FREE CTA ══════════ */
.free-bg{background:var(--hero-bg);text-align:center;padding:112px 24px;}
.free-bg .s-chip{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.18);}
.free-bg .s-h{color:#fff;}
.free-bg .s-p{color:rgba(255,255,255,.58);margin:0 auto 44px;}
.perks{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:44px;}
.perk{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.75);}
.perk-ck{width:21px;height:21px;border-radius:6px;background:rgba(74,222,128,.18);border:1px solid rgba(74,222,128,.38);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ══════════ FOOTER ══════════ */
footer{background:#1A0808;padding:52px 24px 0;}
.ft-inner{max-width:var(--max);margin:0 auto;}
.ft-top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap;}
.ft-brand{display:flex;flex-direction:column;gap:14px;max-width:440px;}
.fb-logo{display:flex;align-items:center;gap:11px;}
.fb-logo-icon{width:30px;height:28px;background:#D46026;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:4px;flex-shrink:0;}
.fb-logo-icon svg{width:22px;height:20px;display:block;}
.fb-name{font-size:15px;font-weight:700;color:#fff;}
.fb-desc{font-size:13.5px;color:rgba(255,255,255,.38);line-height:1.65;}
.fb-elustra{display:flex;align-items:center;gap:9px;}
.fb-elustra-lbl{font-size:11px;color:rgba(255,255,255,.32);font-weight:500;}
.fb-elustra-logo{height:13px;width:auto;display:block;}
.ft-links{display:flex;flex-direction:column;gap:8px;}
.ft-link{font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;transition:color .14s;}
.ft-link:hover{color:rgba(255,255,255,.8);}
.fb-bot{max-width:var(--max);margin:0 auto;padding:18px 0 22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.fb-copy{font-size:12.5px;color:rgba(255,255,255,.28);}

/* ══════════ WHATSAPP ══════════ */
.wa-sticky{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;align-items:center;gap:9px;background:#22C55E;color:#fff;text-decoration:none;padding:10px 14px 10px 11px;border-radius:100px;box-shadow:0 4px 18px rgba(34,197,94,.42);transition:transform .18s,box-shadow .18s;}
.wa-sticky:hover{transform:translateY(-2px);box-shadow:0 7px 24px rgba(34,197,94,.52);}
.wa-sticky svg{width:20px;height:20px;flex-shrink:0;}
.wa-label{display:flex;flex-direction:column;}
.wa-label-main{font-size:12px;font-weight:700;line-height:1.2;}
.wa-label-sub{font-size:9.5px;opacity:.8;}

/* ══════════ RESPONSIVE ══════════ */

/* Tablet landscape + smaller desktop */
@media(max-width:1100px){
  .tool-layout{grid-template-columns:340px 1fr;}
}

/* Tablet portrait */
@media(max-width:960px){
  nav{padding:0 22px;}
  .nav-links{display:none;}
  .nav-ham{display:flex;}
  .tool-layout{grid-template-columns:1fr;gap:20px;}
  .tool-panel{position:relative;top:0;}
  .ft-top{flex-direction:column;}
  section{padding:64px 20px;}
  .free-bg{padding:80px 20px;}
}

/* Large mobile / small tablet */
@media(max-width:720px){
  nav{padding:0 18px;height:58px;}
  .nav-drawer{top:58px;}
  .hero{padding:100px 20px 60px;}
  .stats-strip{gap:20px;}
  .stat-d{display:none;}
  /* Scale table — hide preview columns, keep tag + range + clamp */
  .scale-tbl-hdr{grid-template-columns:58px 90px 1fr;}
  .scale-tbl-hdr span:nth-child(2),.scale-tbl-hdr span:nth-child(3){display:none;}
  .scale-row{grid-template-columns:58px 90px 1fr;}
  .scale-row .sc-preview{display:none;}
  /* Tool panel wider ratio tiles */
  .ratio-grid{grid-template-columns:repeat(5,1fr);gap:5px;}
  .ratio-val{font-size:11px;}
  .ratio-name{font-size:9px;}
  /* Fluid level buttons wrap nicely */
  .fluid-lvls{gap:5px;}
  .fl-btn{padding:6px 11px;font-size:12px;}
  .feat-grid{grid-template-columns:1fr;}
  .out-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
}

/* Mobile */
@media(max-width:520px){
  nav{padding:0 16px;}
  .hero h1{letter-spacing:-1.5px;}
  .hero-btns{flex-direction:column;align-items:stretch;}
  .btn-p,.btn-g{justify-content:center;}
  section{padding:52px 16px;}
  .free-bg{padding:64px 16px;}
  .tool-layout{gap:16px;}
  .tp-section{padding:16px 18px;}
  .gen-btns{padding:16px 18px;}
  .steps{grid-template-columns:1fr;}
  .scripts-row{gap:7px;}
  .script-item{min-width:68px;padding:12px 8px;}
  /* Scale table on tiny screens — just tag + clamp */
  .scale-tbl-hdr{grid-template-columns:58px 1fr;}
  .scale-tbl-hdr span:nth-child(4){display:none;}
  .scale-row{grid-template-columns:58px 1fr;}
  .scale-row .sc-range{display:none;}
  .wa-label-sub{display:none;}
  .wa-sticky{padding:10px 13px 10px 11px;}
  .fb-bot{flex-direction:column;align-items:flex-start;}
  footer{padding:40px 16px 0;}
}

/* Very small mobile */
@media(max-width:380px){
  .ratio-grid{grid-template-columns:repeat(3,1fr);}
  .ratio-tile:nth-child(4),.ratio-tile:nth-child(5){display:none;}
  .gen-btn-web{font-size:14px;padding:12px 16px;}
  .inp-in,.sel-in{font-size:14px;}
  .hero{padding:90px 16px 52px;}
}
</style>
</head>
<body>

<!-- ═══ NAV ═══ -->
<nav>
  <a class="nav-logo" href="#">
    <div class="nav-logo-icon">
      <svg viewBox="0 0 78 74" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20.9233 6.75L20.9409 6.98047L21.2671 11.2109L21.2876 11.4795H21.0181C18.5728 11.4795 16.7978 12.0161 15.646 13.043L15.645 13.0439C14.5193 14.0435 13.7603 15.4242 13.3784 17.2041C13.0351 19.0063 12.8628 21.0491 12.8628 23.334V50.666C12.8628 52.9068 13.035 54.9497 13.3784 56.7959L13.4546 57.125C13.8568 58.7469 14.5897 60.019 15.645 60.9561L15.646 60.957C16.7978 61.9839 18.5728 62.5205 21.0181 62.5205H21.2876L21.2671 62.7891L20.9409 67.0195L20.9233 67.25H20.6919C17.2821 67.25 14.5835 66.7052 12.6196 65.5908V65.5898C10.691 64.5141 9.30913 62.7695 8.46729 60.3799C7.63076 58.0052 7.12892 54.8978 6.95459 51.0674C6.78062 47.2013 6.69385 42.512 6.69385 37C6.69385 31.4448 6.78062 26.7554 6.95459 22.9326C7.12892 19.1022 7.63076 15.9948 8.46729 13.6201C9.3094 11.2297 10.692 9.48382 12.6216 8.4082C14.5853 7.29455 17.2832 6.75002 20.6919 6.75H20.9233Z" fill="white"/>
        <path d="M57.1958 6.75C60.6014 6.75002 63.2774 7.29382 65.1987 8.40723C67.172 9.48219 68.5776 11.2279 69.4204 13.6201C70.2569 15.9948 70.7588 19.1022 70.9331 22.9326C71.1071 26.7554 71.1938 31.4448 71.1938 37C71.1938 42.512 71.1071 47.2013 70.9331 51.0674C70.7588 54.8978 70.2569 58.0052 69.4204 60.3799C68.5777 62.772 67.1728 64.5178 65.1997 65.5928L65.1987 65.5918C63.2774 66.7054 60.6017 67.25 57.1958 67.25H56.9644L56.9468 67.0195L56.6206 62.7891L56.6001 62.5205H56.8696C59.3609 62.5205 61.1325 61.983 62.2388 60.96L62.2427 60.9561C63.3668 59.958 64.1037 58.5795 64.4429 56.8018L64.4438 56.7969L64.5796 56.0957C64.876 54.4373 65.0249 52.6277 65.0249 50.666V23.334C65.0249 21.0484 64.8304 19.0055 64.4438 17.2041L64.4429 17.1982C64.1037 15.4205 63.3668 14.042 62.2427 13.0439L62.2388 13.04C61.1325 12.017 59.3609 11.4795 56.8696 11.4795H56.6001L56.6206 11.2109L56.9468 6.98047L56.9644 6.75H57.1958Z" fill="white"/>
        <path d="M51.5562 13.9082V18.9639H41.978V59.9619H35.8745V18.9639H26.2964V13.9082H51.5562Z" fill="white"/>
      </svg>
    </div>
    <span class="nav-name">ClampType</span>
  </a>
  <div class="nav-links">
    <a class="nav-link" href="#generator">Web Generator</a>
    <a class="nav-link" href="#how">How It Works</a>
    <a class="nav-link" href="#features">Features</a>
    <a class="nav-link" href="#outputs">Outputs</a>
    <a class="nav-link" href="#scripts">Scripts</a>
    <a class="nav-link nav-cta" href="https://www.figma.com/community/plugin/1612318883144152924" target="_blank">
      Install on Figma — Free
    </a>
  </div>
  <button class="nav-ham" id="ham" onclick="toggleMenu()" aria-label="Menu">
    <span></span><span></span><span></span>
  </button>
</nav>

<div class="nav-drawer" id="drawer">
  <a class="nav-link" href="#generator" onclick="closeMenu()">Web Generator</a>
  <a class="nav-link" href="#how" onclick="closeMenu()">How It Works</a>
  <a class="nav-link" href="#features" onclick="closeMenu()">Features</a>
  <a class="nav-link" href="#outputs" onclick="closeMenu()">Outputs</a>
  <a class="nav-link" href="#scripts" onclick="closeMenu()">Scripts</a>
  <a class="nav-link nav-cta" href="https://www.figma.com/community/plugin/1612318883144152924" target="_blank" onclick="closeMenu()">Install on Figma — Free</a>
</div>

<!-- ═══ HERO ═══ -->
<section class="hero">
  <div class="presented-by">
    <span class="presented-by-txt">Presented by</span>
    <svg class="elustra-hero" viewBox="0 0 275 60" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Elustra">
      <path d="M15.1085 25.5591L34.8545 25.2343V32.1673L15.1085 31.8425V50.4685H31.9209L36.7953 49.5837L38.7473 42.4827L42.8094 42.0795C42.753 43.0987 42.6965 44.174 42.6514 45.3052C42.595 46.2684 42.5386 47.3101 42.4934 48.4077C42.437 49.5053 42.4145 50.6029 42.4145 51.6782C42.4145 52.5966 42.437 53.5486 42.4934 54.5455C42.5499 55.5423 42.6063 56.4159 42.6514 57.1663C42.7078 58.1296 42.753 59.0704 42.8094 59.9888L38.7473 59.5072L38.4201 58.4544C38.2621 58.1296 38.0365 57.8719 37.7657 57.6927C37.4949 57.5023 37.2015 57.4127 36.8743 57.4127H0.0789841L0.485188 53.3806L5.1114 51.5214L6.65723 47.6461V9.43065C6.65723 9.16185 6.58953 8.89304 6.45413 8.62423C6.31873 8.35542 6.05921 8.16502 5.68685 8.06422L0.406204 6.60818L0 2.57607H33.6359C33.9632 2.57607 34.2565 2.49767 34.5273 2.32966C34.7981 2.17286 35.0125 1.90405 35.1818 1.52324L35.43 0.470413L39.492 -0.0112C39.4356 0.851223 39.3792 1.71365 39.3341 2.56487C39.2777 3.25929 39.2212 4.06571 39.1761 4.98413C39.131 5.90256 39.0971 6.80978 39.0971 7.72821C39.0971 8.80344 39.1197 9.87866 39.1761 10.9539C39.2325 12.0291 39.2889 13.0259 39.3341 13.9332C39.3905 14.8964 39.4469 15.8708 39.492 16.8341L35.43 16.4308L33.478 10.3827L28.6035 9.49785H15.9209L15.1085 13.3732V25.5591Z" fill="white"/>
      <path d="M57.9287 7.90741C57.9287 7.42579 57.8159 7.05618 57.6015 6.82098C57.3871 6.57457 56.9809 6.46257 56.3829 6.46257H52.5691L52.1629 3.31528L63.1191 0.156799L67.5084 2.32966L66.1318 9.99066V50.4797C66.1318 50.8045 66.2221 51.107 66.4139 51.4094C66.6057 51.7006 66.8652 51.9022 67.1812 52.0142L72.3038 53.3806L72.71 57.4127C71.2432 57.3567 69.7876 57.2783 68.3208 57.1663C67.0796 57.1663 65.8046 57.1439 64.507 57.0879C63.2094 57.0319 62.0923 57.0095 61.1784 57.0095C60.2644 57.0095 59.1925 57.0319 57.9739 57.0879C56.7553 57.1439 55.5818 57.1663 54.4422 57.1663C53.201 57.2783 51.8921 57.3567 50.5381 57.4127L50.9443 53.3806L57.0373 51.443L57.9287 46.6044V7.90741Z" fill="white"/>
      <path d="M77.1787 22.5798L76.7725 19.4325L87.8979 16.2852L92.2872 18.4581L90.8203 26.1191V46.0332C90.8203 48.1277 91.1927 49.6509 91.96 50.5918C92.716 51.5326 93.8556 52.003 95.3676 52.003C96.6087 52.003 97.8951 51.723 99.2265 51.1518C100.558 50.5918 101.81 49.9421 103.006 49.2141C104.191 48.4861 105.241 47.7805 106.132 47.0749C107.023 46.3692 107.633 45.8652 107.96 45.5404V24.0359C107.96 23.5542 107.847 23.1846 107.633 22.9494C107.418 22.703 107.012 22.591 106.414 22.591H102.431L102.025 19.4437L113.15 16.2964L117.54 18.4693L116.073 26.1303V50.4798C116.073 50.8046 116.163 51.0958 116.355 51.3646C116.547 51.6334 116.829 51.8462 117.212 52.0142L121.353 53.3806L121.76 57.4127C120.349 57.3567 118.939 57.2783 117.54 57.1663C116.343 57.1663 115.114 57.1551 113.839 57.1215C112.564 57.0991 111.469 57.0767 110.544 57.0767L107.621 52.7198L107.7 51.5886C105.692 53.5262 103.379 55.1727 100.75 56.5503C98.1207 57.9168 95.3789 58.6112 92.5016 58.6112C89.3648 58.6112 86.9388 57.6815 85.235 55.8335C83.5312 53.9854 82.6737 51.275 82.6737 47.7245V24.0359C82.6737 23.5542 82.5609 23.1846 82.3465 22.9494C82.1321 22.703 81.7259 22.591 81.1279 22.591H77.1448L77.1787 22.5798Z" fill="white"/>
      <path d="M153.906 28.4264C152.958 29.4792 151.83 30.2632 150.532 30.8008C149.28 30.2632 148.174 29.468 147.203 28.4264C146.233 27.3735 145.421 26.2647 144.766 25.0775C145.037 24.5959 145.33 24.1254 145.658 23.6662C145.985 23.207 146.335 22.7702 146.718 22.3334C145.962 22.0086 145.24 21.7846 144.563 21.6502C143.886 21.5158 143.164 21.4486 142.408 21.4486C140.512 21.4486 139.012 21.8518 137.895 22.6582C136.789 23.4646 136.225 24.4838 136.225 25.7271C136.225 26.5895 136.507 27.3847 137.082 28.1015C137.646 28.8296 138.391 29.5128 139.316 30.1624C140.242 30.812 141.347 31.4504 142.645 32.1001C143.943 32.7497 145.33 33.4441 146.786 34.1945C148.14 34.8889 149.449 35.6393 150.724 36.4122C151.999 37.1962 153.105 38.0474 154.052 38.9882C155 39.9291 155.768 41.0267 156.366 42.2923C156.964 43.558 157.257 45.0252 157.257 46.6828C157.257 48.3405 156.896 49.9085 156.162 51.3646C155.429 52.8206 154.391 54.075 153.037 55.1503C151.683 56.2255 150.081 57.0767 148.242 57.6927C146.402 58.3088 144.371 58.6224 142.148 58.6224C140.309 58.6224 138.56 58.4096 136.913 57.9727C135.266 57.5471 133.776 56.9759 132.445 56.2815C131.113 55.5871 129.929 54.7583 128.868 53.8174C127.807 52.8766 126.927 51.891 126.228 50.8718L129.804 47.0861C131.7 49.1805 133.675 50.6702 135.739 51.5662C137.793 52.451 139.824 52.899 141.833 52.899C144.112 52.899 145.883 52.3726 147.158 51.331C148.433 50.2781 149.065 49.0573 149.065 47.6573C149.065 46.694 148.806 45.854 148.298 45.1596C147.779 44.4652 147.034 43.8044 146.064 43.1884C145.093 42.5723 143.852 41.9115 142.363 41.2171C140.873 40.5227 139.158 39.6267 137.206 38.5514C136.337 38.1258 135.378 37.5546 134.318 36.8602C133.257 36.1658 132.253 35.3257 131.316 34.3625C130.369 33.3993 129.579 32.2793 128.958 31.0136C128.338 29.748 128.022 28.3144 128.022 26.7015C128.022 25.0887 128.349 23.6886 128.992 22.3446C129.646 21.0006 130.549 19.8581 131.711 18.9173C132.873 17.9765 134.295 17.2373 135.976 16.6996C137.658 16.162 139.474 15.8932 141.415 15.8932C144.935 15.8932 147.892 16.6884 150.273 18.2677C152.653 19.8581 154.684 22.1206 156.366 25.0775C155.666 26.2647 154.831 27.3735 153.883 28.4264H153.906Z" fill="white"/>
      <path d="M169.545 22.9046L162.154 23.3078V18.1445L169.545 17.1813L171.982 5.00653H177.669V17.1813L192.45 17.1029V23.3078L177.669 23.0614V45.798C177.669 47.6797 177.985 49.1021 178.606 50.0765C179.226 51.0398 180.4 51.5326 182.137 51.5326C183.277 51.5326 184.45 51.3086 185.669 50.8494C186.888 50.3901 188.445 49.5725 190.34 48.3853L192.45 52.7422C190.498 54.7359 188.467 56.2143 186.357 57.1775C184.247 58.1407 182.182 58.6336 180.185 58.6336C178.718 58.6336 177.342 58.3648 176.044 57.8271C174.747 57.2895 173.607 56.5391 172.637 55.5647C171.666 54.6014 170.899 53.4366 170.357 52.0926C169.816 50.7485 169.545 49.2701 169.545 47.6573V22.9046Z" fill="white"/>
      <path d="M205.133 24.0358C205.133 23.5542 205.02 23.1846 204.806 22.9494C204.591 22.703 204.185 22.591 203.587 22.591H199.773L199.367 19.4437L210.335 16.2964L214.724 18.4693L214.069 22.3446C215.909 20.5749 218.007 19.0517 220.366 17.7861C222.724 16.5204 225.251 15.8932 227.959 15.8932C229.313 16.5876 230.453 17.3941 231.367 18.3125C232.292 19.2309 233.105 20.3285 233.804 21.6166C233.15 22.8038 232.337 23.9238 231.367 24.9991C230.397 26.0743 229.257 26.8807 227.959 27.4183C226.933 26.9367 225.985 26.2871 225.116 25.4807C224.247 24.6743 223.491 23.7558 222.837 22.7366C221.81 23.0614 220.772 23.4982 219.745 24.0694C218.718 24.6295 217.77 25.2231 216.902 25.8391C216.033 26.4551 215.288 27.0487 214.667 27.6087C214.047 28.1687 213.596 28.5944 213.325 28.8632V50.4797C213.325 50.8045 213.415 51.107 213.607 51.4094C213.799 51.7006 214.058 51.9022 214.374 52.0142L220.309 53.3806L220.715 57.4127C219.091 57.3567 217.488 57.2783 215.92 57.1663C214.622 57.1663 213.268 57.1439 211.858 57.0879C210.447 57.0319 209.285 57.0095 208.36 57.0095C207.435 57.0095 206.374 57.0319 205.156 57.0879C203.937 57.1439 202.763 57.1663 201.624 57.1663C200.383 57.2783 199.074 57.3567 197.72 57.4127L198.126 53.3806L204.219 51.443L205.11 46.6044V24.0358H205.133Z" fill="white"/>
      <path d="M248.394 28.5496C247.446 29.5688 246.318 30.3752 245.02 30.9688C243.768 30.3752 242.662 29.5688 241.692 28.5496C240.721 27.5303 239.875 26.3991 239.175 25.1671C240.913 22.2102 243.181 19.9253 246.002 18.3125C248.823 16.6996 252.016 15.8932 255.593 15.8932C257.489 15.8932 259.26 16.1396 260.919 16.6212C262.566 17.1029 264.022 17.8645 265.263 18.8837C266.504 19.9029 267.497 21.1686 268.23 22.6694C268.964 24.1702 269.325 25.9175 269.325 27.9111V50.4909C269.325 50.8158 269.415 51.107 269.607 51.3758C269.799 51.6446 270.081 51.8574 270.464 52.0254L274.605 53.3918L275.012 57.4239C273.601 57.3679 272.191 57.2895 270.792 57.1775C269.596 57.1775 268.366 57.1663 267.091 57.1327C265.816 57.1103 264.721 57.0879 263.796 57.0879C263.582 56.7631 263.39 56.4719 263.232 56.2031C263.017 55.9343 262.814 55.6543 262.622 55.3519C262.431 55.0607 262.261 54.7695 262.092 54.5007C260.524 55.8447 258.854 56.8639 257.094 57.5695C255.333 58.264 253.37 58.6224 251.204 58.6224C249.037 58.6224 247.277 58.3088 245.596 57.6927C243.915 57.0767 242.482 56.2143 241.285 55.1167C240.089 54.019 239.164 52.7086 238.487 51.2078C237.81 49.7069 237.472 48.0605 237.472 46.2908C237.472 44.2524 237.923 42.4043 238.814 40.7691C239.706 39.1338 240.936 37.7338 242.515 36.5802C244.084 35.4265 245.9 34.5193 247.954 33.8809C250.008 33.2313 252.208 32.9177 254.532 32.9177H261.189V28.8072C261.189 26.5447 260.512 24.7639 259.158 23.4422C257.804 22.1318 255.988 21.471 253.72 21.471C252.907 21.471 252.118 21.5494 251.362 21.7174C250.606 21.8742 249.85 22.1766 249.082 22.6022C249.41 23.0278 249.703 23.4646 249.974 23.8902C250.245 24.3158 250.515 24.7527 250.786 25.1783C250.132 26.4103 249.342 27.5415 248.394 28.5496ZM261.189 39.1114L255.017 39.3578C252.253 39.4698 250.087 40.1643 248.518 41.4523C246.95 42.7403 246.16 44.4316 246.16 46.5372C246.16 48.3629 246.781 49.9085 248.033 51.1742C249.274 52.4398 250.899 53.067 252.907 53.067C254.476 53.067 255.931 52.6526 257.252 51.8126C258.583 50.9838 259.892 49.8077 261.189 48.3069V39.1114Z" fill="white"/>
    </svg>
  </div>

  <div class="eyebrow"><span class="dot"></span> Free Forever · No Figma Required · No API Keys</div>

  <h1>Fluid Typography<br>Done <span>Mathematically Right</span></h1>
  <p class="hero-sub">
    Generate perfect CSS <code style="background:rgba(255,255,255,.11);padding:2px 7px;border-radius:5px;font-family:var(--mono)">clamp()</code> scales directly in your browser — or use the Figma plugin for Variables and canvas frames. 9 levels, 20+ global scripts, instant CSS download.
  </p>
  <div class="hero-btns">
    <a class="btn-p" href="#generator">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
      Open Web Generator
    </a>
    <a class="btn-g" href="https://www.figma.com/community/plugin/1612318883144152924" target="_blank">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></svg>
      Install on Figma
    </a>
  </div>

  <div class="stats-strip">
    <div class="stat-h"><div class="stat-n">9</div><div class="stat-l">Type Levels</div></div>
    <div class="stat-d"></div>
    <div class="stat-h"><div class="stat-n">20+</div><div class="stat-l">Global Scripts</div></div>
    <div class="stat-d"></div>
    <div class="stat-h"><div class="stat-n">6</div><div class="stat-l">Ratio Presets</div></div>
    <div class="stat-d"></div>
    <div class="stat-h"><div class="stat-n">100%</div><div class="stat-l">Free Forever</div></div>
  </div>
</section>

<!-- ═══ WEB GENERATOR ═══ -->
<section class="tool-bg" id="generator">
  <div class="container">
    <div class="s-chip">Web Generator</div>
    <h2 class="s-h">Generate Your Scale — <span>No Figma Needed</span></h2>
    <p class="s-p">Configure your scale below, preview all 9 levels live, test global scripts, then download a ready-to-use CSS file.</p>

    <div class="tool-layout">

      <!-- LEFT: Controls panel -->
      <div class="tool-panel">
        <div class="tool-panel-hdr">
          <div class="tool-panel-hdr-icon">
            <svg viewBox="0 0 78 74" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.9233 6.75L20.9409 6.98047L21.2671 11.2109L21.2876 11.4795H21.0181C18.5728 11.4795 16.7978 12.0161 15.646 13.043L15.645 13.0439C14.5193 14.0435 13.7603 15.4242 13.3784 17.2041C13.0351 19.0063 12.8628 21.0491 12.8628 23.334V50.666C12.8628 52.9068 13.035 54.9497 13.3784 56.7959L13.4546 57.125C13.8568 58.7469 14.5897 60.019 15.645 60.9561L15.646 60.957C16.7978 61.9839 18.5728 62.5205 21.0181 62.5205H21.2876L21.2671 62.7891L20.9409 67.0195L20.9233 67.25H20.6919C17.2821 67.25 14.5835 66.7052 12.6196 65.5908V65.5898C10.691 64.5141 9.30913 62.7695 8.46729 60.3799C7.63076 58.0052 7.12892 54.8978 6.95459 51.0674C6.78062 47.2013 6.69385 42.512 6.69385 37C6.69385 31.4448 6.78062 26.7554 6.95459 22.9326C7.12892 19.1022 7.63076 15.9948 8.46729 13.6201C9.3094 11.2297 10.692 9.48382 12.6216 8.4082C14.5853 7.29455 17.2832 6.75002 20.6919 6.75H20.9233Z" fill="white"/>
              <path d="M57.1958 6.75C60.6014 6.75002 63.2774 7.29382 65.1987 8.40723C67.172 9.48219 68.5776 11.2279 69.4204 13.6201C70.2569 15.9948 70.7588 19.1022 70.9331 22.9326C71.1071 26.7554 71.1938 31.4448 71.1938 37C71.1938 42.512 71.1071 47.2013 70.9331 51.0674C70.7588 54.8978 70.2569 58.0052 69.4204 60.3799C68.5777 62.772 67.1728 64.5178 65.1997 65.5928L65.1987 65.5918C63.2774 66.7054 60.6017 67.25 57.1958 67.25H56.9644L56.9468 67.0195L56.6206 62.7891L56.6001 62.5205H56.8696C59.3609 62.5205 61.1325 61.983 62.2388 60.96L62.2427 60.9561C63.3668 59.958 64.1037 58.5795 64.4429 56.8018L64.4438 56.7969L64.5796 56.0957C64.876 54.4373 65.0249 52.6277 65.0249 50.666V23.334C65.0249 21.0484 64.8304 19.0055 64.4438 17.2041L64.4429 17.1982C64.1037 15.4205 63.3668 14.042 62.2427 13.0439L62.2388 13.04C61.1325 12.017 59.3609 11.4795 56.8696 11.4795H56.6001L56.6206 11.2109L56.9468 6.98047L56.9644 6.75H57.1958Z" fill="white"/>
              <path d="M51.5562 13.9082V18.9639H41.978V59.9619H35.8745V18.9639H26.2964V13.9082H51.5562Z" fill="white"/>
            </svg>
          </div>
          <div>
            <div class="tph-name">ClampType Controls</div>
            <div class="tph-sub" id="scale-info">320 → 1440px</div>
          </div>
        </div>

        <!-- Ratio -->
        <div class="tp-section">
          <div class="tp-label">Scale Ratio</div>
          <div class="ratio-grid">
            <div class="ratio-tile" data-ratio="1.125" onclick="setRatio(this)"><span class="ratio-val">1.125</span><span class="ratio-name">Minor 2nd</span></div>
            <div class="ratio-tile" data-ratio="1.200" onclick="setRatio(this)"><span class="ratio-val">1.200</span><span class="ratio-name">Minor 3rd</span></div>
            <div class="ratio-tile on" data-ratio="1.250" onclick="setRatio(this)"><span class="ratio-val">1.250</span><span class="ratio-name">Major 3rd</span></div>
            <div class="ratio-tile" data-ratio="1.333" onclick="setRatio(this)"><span class="ratio-val">1.333</span><span class="ratio-name">Perfect 4th</span></div>
            <div class="ratio-tile" data-ratio="1.500" onclick="setRatio(this)"><span class="ratio-val">1.500</span><span class="ratio-name">Perfect 5th</span></div>
          </div>
        </div>

        <!-- Base & Custom ratio -->
        <div class="tp-section">
          <div class="tp-label">Base Size &amp; Custom Ratio</div>
          <div class="inp-row">
            <span class="inp-label">Base</span>
            <input class="inp-in" id="base" type="number" value="16" min="10" max="32" step="1" oninput="recalc()">
            <span class="inp-unit">px</span>
          </div>
          <div class="inp-row">
            <span class="inp-label">Ratio</span>
            <input class="inp-in" id="ratio" type="number" value="1.25" min="1.05" max="2.5" step="0.001" oninput="onRatioInput()">
          </div>
          <div class="inp-hint">Base (<span id="hint-base">16px</span>) = H5 / Body / CTA minimum — the smallest font size in your UI.</div>
        </div>

        <!-- Viewport -->
        <div class="tp-section">
          <div class="tp-label">Viewport Range</div>
          <div class="inp-row">
            <span class="inp-label">Min VP</span>
            <select class="sel-in" id="vp-min" onchange="recalc()">
              <option value="240">240px — Tiny</option>
              <option value="320" selected>320px — Mobile</option>
              <option value="375">375px — iPhone SE</option>
              <option value="390">390px — iPhone 14</option>
              <option value="414">414px — Plus</option>
            </select>
          </div>
          <div class="inp-row">
            <span class="inp-label">Max VP</span>
            <select class="sel-in" id="vp-max" onchange="recalc()">
              <option value="1024">1024px — iPad Pro</option>
              <option value="1280">1280px — Laptop</option>
              <option value="1440" selected>1440px — Desktop L</option>
              <option value="1600">1600px — Wide</option>
              <option value="1920">1920px — FHD</option>
              <option value="2560">2560px — 4K</option>
            </select>
          </div>
        </div>

        <!-- Preview text -->
        <div class="tp-section">
          <div class="tp-label">Preview Text</div>
          <input class="custom-text-input" id="custom-text" type="text" placeholder="Type your text — previews everywhere…" oninput="onCustomText()">
        </div>

        <!-- Generate buttons -->
        <div class="gen-btns">
          <button class="gen-btn-web gen-btn-dl" onclick="downloadCSS()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Download CSS File
          </button>
          <button class="gen-btn-web gen-btn-copy" id="copy-btn-main" onclick="copyCSSMain()">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
            Copy CSS to Clipboard
          </button>
        </div>
      </div>

      <!-- RIGHT: Results -->
      <div class="tool-results">

        <!-- Scale table -->
        <div class="result-card">
          <div class="result-card-hdr">
            <span class="result-card-title">Type Scale — 9 Levels</span>
            <span class="result-card-meta" id="tbl-meta">Base 16px · Ratio 1.250</span>
          </div>
          <div class="scale-tbl-hdr">
            <span>Level</span><span>Min</span><span>Max</span><span>Range</span><span>clamp()</span>
          </div>
          <div id="scale-rows"></div>
        </div>

        <!-- Fluid preview -->
        <div class="result-card">
          <div class="result-card-hdr">
            <span class="result-card-title">Fluid Preview</span>
            <span class="result-card-meta">Live at any viewport</span>
          </div>
          <div class="fluid-card-body">
            <div class="fluid-lvls" id="fluid-lvls"></div>
            <div class="fluid-vp-row">
              <span class="fluid-vp-label">Viewport</span>
              <select class="fluid-vp-sel" id="fluid-vp" onchange="renderFluidPreview()"></select>
            </div>
            <div class="fluid-sample-box">
              <div class="fluid-sample-meta">
                <span class="fluid-sample-tag" id="fluid-lbl">H1</span>
                <span class="fluid-sample-sz" id="fluid-sz">—</span>
              </div>
              <div id="fluid-sample">ClampType</div>
              <div class="fluid-clamp-str" id="fluid-clamp">—</div>
            </div>
          </div>
        </div>

        <!-- Script stress test -->
        <div class="result-card">
          <div class="result-card-hdr">
            <span class="result-card-title">Script Stress Test</span>
            <span class="result-card-meta">20+ global writing systems</span>
          </div>
          <div class="scripts-card-body">
            <div class="sc-dd-row">
              <select class="sc-dd" id="scripts-dd" onchange="onScriptChange()"></select>
              <span class="sc-dir-badge" id="sc-dir-badge">LTR</span>
            </div>
            <div class="sc-stress-box">
              <div id="sc-text-el" dir="ltr"></div>
            </div>
            <div class="sc-meta-row" id="sc-meta-el"></div>
          </div>
        </div>

        <!-- CSS Output -->
        <div class="result-card">
          <div class="css-out-wrap">
            <div class="css-out-hdr">
              <span class="result-card-title">CSS Output</span>
              <div class="css-out-actions">
                <button class="css-action-btn" id="copy-btn-css" onclick="copyCSSInline()">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                  Copy
                </button>
                <button class="css-action-btn dl" onclick="downloadCSS()">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                  Download .css
                </button>
              </div>
            </div>
            <pre id="css-out"></pre>
          </div>
        </div>

      </div><!-- /tool-results -->
    </div><!-- /tool-layout -->
  </div>
</section>

<!-- ═══ HOW IT WORKS ═══ -->
<section class="how-bg" id="how">
  <div class="container">
    <div class="s-chip">How It Works</div>
    <h2 class="s-h">Perfect Scales in <span>Four Steps</span></h2>
    <p class="s-p">Pure math. No guesswork. No CSS headaches. Use the web generator above — or the Figma plugin for Variables and canvas frames.</p>
    <div class="steps">
      <div class="step">
        <div class="step-n">1</div>
        <h3>Pick a Ratio</h3>
        <p>Choose from 5 classic typographic ratios — Minor Second (1.125) to Perfect Fifth (1.500) — or enter any custom value. Each ratio is a proven musical interval applied to type.</p>
      </div>
      <div class="step">
        <div class="step-n">2</div>
        <h3>Set Base &amp; Viewport</h3>
        <p>Enter your base size and viewport range. ClampType computes fluid min and max for every level from H1 down to Caption and CTA using the modular scale formula.</p>
      </div>
      <div class="step">
        <div class="step-n">3</div>
        <h3>Preview &amp; Stress Test</h3>
        <p>Select any viewport breakpoint to see every type level resize live. Switch to 20+ global scripts — Arabic, Devanagari, Tamil, CJK — to confirm your scale holds globally.</p>
      </div>
      <div class="step">
        <div class="step-n">4</div>
        <h3>Download &amp; Ship</h3>
        <p>One click downloads a complete CSS file with all :root variables and class definitions — or paste to your project directly. Also available as Figma Variables on the plugin.</p>
      </div>
    </div>
  </div>
</section>

<!-- ═══ FEATURES ═══ -->
<section class="feat-bg" id="features">
  <div class="container">
    <div class="s-chip">Full Feature List</div>
    <h2 class="s-h">Everything Fluid Typography <span>Needs</span></h2>
    <p class="s-p">Nine type levels, six ratio presets, 20+ scripts, live preview, and complete CSS output — all free, all in your browser.</p>
    <div class="feat-grid">
      <div class="feat">
        <div class="feat-ico" style="background:#FFF2E8;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#D46026" stroke-width="2" stroke-linecap="round"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>
        </div>
        <h3>9-Level Type Scale</h3>
        <p>H1 through H6, Body, Caption, and CTA — every level computed as a fluid clamp() value. Line heights, font weights, and letter spacing included in CSS output.</p>
        <div class="tags"><span class="tag">H1–H6</span><span class="tag">Body</span><span class="tag">Caption</span><span class="tag">CTA</span></div>
      </div>
      <div class="feat">
        <div class="feat-ico" style="background:#FFF2E8;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#D46026" stroke-width="2" stroke-linecap="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        </div>
        <h3>Modular Scale Math</h3>
        <p>Formula: <code style="background:#FFEEDE;padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:11px">Sₙ = Base × Ratioⁿ</code>. Six ratio presets plus custom input. Minor Second to Perfect Fifth — your type, your choice.</p>
        <div class="tags"><span class="tag">1.125</span><span class="tag">1.25</span><span class="tag">1.333</span><span class="tag">1.5</span></div>
      </div>
      <div class="feat">
        <div class="feat-ico" style="background:#FFF2E8;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#D46026" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M3 12h3M18 12h3M12 3v3M12 18v3M5.64 5.64l2.12 2.12M16.24 16.24l2.12 2.12M16.24 7.76l-2.12 2.12M5.64 18.36l2.12-2.12"/></svg>
        </div>
        <h3>Live Fluid Preview</h3>
        <p>Select any breakpoint from 320–1920px to see any type level resize fluidly in real time. Instantly see the exact computed px size at any viewport width.</p>
        <div class="tags"><span class="tag">Live resize</span><span class="tag">320–1920px</span><span class="tag">Real-time</span></div>
      </div>
      <div class="feat">
        <div class="feat-ico" style="background:#FFF2E8;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#D46026" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
        </div>
        <h3>20+ Script Stress Test</h3>
        <p>Test your scale with Latin, Arabic, Hebrew, Hindi, Tamil, Telugu, Kannada, Malayalam, Gujarati, Bengali, Chinese, Japanese, Korean, Thai, Greek, Cyrillic, and Emoji. RTL support included.</p>
        <div class="tags"><span class="tag">Indian scripts</span><span class="tag">RTL</span><span class="tag">CJK</span><span class="tag">20+ langs</span></div>
      </div>
      <div class="feat">
        <div class="feat-ico" style="background:#FFF2E8;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#D46026" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
        </div>
        <h3>CSS File Download</h3>
        <p>One click downloads a complete, production-ready CSS file with a :root block containing all 9 --fs-* custom properties plus utility class definitions. Copy or download.</p>
        <div class="tags"><span class="tag">:root vars</span><span class="tag">.h1–.caption</span><span class="tag">Instant download</span></div>
      </div>
      <div class="feat">
        <div class="feat-ico" style="background:#FFF2E8;">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#D46026" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
        </div>
        <h3>Figma Plugin — Variables + Frame</h3>
        <p>Install the free Figma plugin for Variables output — a ClampType collection with Number Variables per level, FONT_SIZE scope, and a 1280px canvas documentation frame.</p>
        <div class="tags"><span class="tag">Number vars</span><span class="tag">Canvas frame</span><span class="tag">Code syntax</span></div>
      </div>
    </div>
  </div>
</section>

<!-- ═══ OUTPUTS ═══ -->
<section class="out-bg" id="outputs">
  <div class="container">
    <div class="s-chip">What You Get</div>
    <h2 class="s-h">Three Output Formats, <span>Zero Config</span></h2>
    <p class="s-p">Every run automatically produces all three output formats. Copy, apply, or download — instantly.</p>
    <div class="out-grid">
      <div class="out-card">
        <div class="out-ext" style="background:#FFF2E8;color:#D46026">.css</div>
        <h3>CSS File — Web Generator</h3>
        <ul>
          <li>:root block with all 9 --fs-* vars</li>
          <li>Full clamp() string per variable</li>
          <li>Utility classes .h1 → .caption</li>
          <li>Line-height + font-weight per class</li>
          <li>Download in one click, no signup</li>
        </ul>
      </div>
      <div class="out-card">
        <div class="out-ext" style="background:#FFF2E8;color:#D46026">.fig</div>
        <h3>Figma Variables — Plugin</h3>
        <ul>
          <li>ClampType / Typography Scale collection</li>
          <li>One Number Variable per type level</li>
          <li>FONT_SIZE scope for auto-binding</li>
          <li>Code syntax for Web, Android, iOS</li>
          <li>Min px value stored per variable</li>
        </ul>
      </div>
      <div class="out-card">
        <div class="out-ext" style="background:#FFF2E8;color:#D46026">.fig</div>
        <h3>Canvas Frame — Plugin</h3>
        <ul>
          <li>1280px documentation frame</li>
          <li>Scale table with all 9 levels</li>
          <li>px range + clamp() per row</li>
          <li>Live Aa sample at min size</li>
          <li>Dark CSS :root block at bottom</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- ═══ SCRIPTS ═══ -->
<section class="scripts-bg" id="scripts">
  <div class="container" style="text-align:center">
    <div class="s-chip">Global Script Support</div>
    <h2 class="s-h">20+ Scripts, <span>Your Scale Holds</span></h2>
    <p class="s-p" style="margin:0 auto">From German compound words to Devanagari conjuncts to CJK ideographs — test your type scale against the world's writing systems.</p>
    <div class="scripts-row">
      <div class="script-item"><span class="script-flag">🇺🇸</span><span class="script-name">English</span><span class="script-script">Latin</span></div>
      <div class="script-item"><span class="script-flag">🇩🇪</span><span class="script-name">German</span><span class="script-script">+30% width</span></div>
      <div class="script-item"><span class="script-flag">🇸🇦</span><span class="script-name">Arabic</span><span class="script-script">RTL</span></div>
      <div class="script-item"><span class="script-flag">🇮🇱</span><span class="script-name">Hebrew</span><span class="script-script">RTL</span></div>
      <div class="script-item"><span class="script-flag">🇮🇳</span><span class="script-name">Hindi</span><span class="script-script">Devanagari</span></div>
      <div class="script-item"><span class="script-flag">🇮🇳</span><span class="script-name">Tamil</span><span class="script-script">தமிழ்</span></div>
      <div class="script-item"><span class="script-flag">🇮🇳</span><span class="script-name">Telugu</span><span class="script-script">తెలుగు</span></div>
      <div class="script-item"><span class="script-flag">🇮🇳</span><span class="script-name">Bengali</span><span class="script-script">বাংলা</span></div>
      <div class="script-item"><span class="script-flag">🇨🇳</span><span class="script-name">Chinese</span><span class="script-script">CJK</span></div>
      <div class="script-item"><span class="script-flag">🇯🇵</span><span class="script-name">Japanese</span><span class="script-script">Mixed Kana</span></div>
      <div class="script-item"><span class="script-flag">🇰🇷</span><span class="script-name">Korean</span><span class="script-script">한글</span></div>
      <div class="script-item"><span class="script-flag">🇷🇺</span><span class="script-name">Russian</span><span class="script-script">Cyrillic</span></div>
    </div>
    <p style="margin-top:18px;font-size:12.5px;color:var(--ink3)">+ Finnish, Dutch, Persian, Gujarati, Kannada, Malayalam, Punjabi, Odia, Thai, Greek, Ukrainian, Emoji &amp; more</p>
  </div>
</section>

<!-- ═══ FREE CTA ═══ -->
<section class="free-bg">
  <div class="container">
    <div class="s-chip">100% Free · Forever</div>
    <h2 class="s-h">No Subscriptions.<br>No API Keys. No Limits.</h2>
    <p class="s-p">Use the web generator right now — no signup, no account, no figma required. Or install the Figma plugin for Variables and canvas frame output.</p>
    <div class="hero-btns">
      <a class="btn-p" href="#generator">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
        Open Web Generator
      </a>
      <a class="btn-g" href="https://www.figma.com/community/plugin/1612318883144152924" target="_blank">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></svg>
        Install on Figma — Free
      </a>
    </div>
    <div class="perks">
      <div class="perk"><div class="perk-ck"><svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><path d="M1.5 5l2.5 2.5 4.5-4.5"/></svg></div>Zero API Keys</div>
      <div class="perk"><div class="perk-ck"><svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><path d="M1.5 5l2.5 2.5 4.5-4.5"/></svg></div>Works Without Figma</div>
      <div class="perk"><div class="perk-ck"><svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><path d="M1.5 5l2.5 2.5 4.5-4.5"/></svg></div>No Data Collection</div>
      <div class="perk"><div class="perk-ck"><svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><path d="M1.5 5l2.5 2.5 4.5-4.5"/></svg></div>Unlimited Generations</div>
      <div class="perk"><div class="perk-ck"><svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><path d="M1.5 5l2.5 2.5 4.5-4.5"/></svg></div>Download CSS Instantly</div>
    </div>
  </div>
</section>

<!-- ═══ FOOTER ═══ -->
<footer>
  <div class="ft-inner">
    <div class="ft-top">
      <div class="ft-brand">
        <div class="fb-logo">
          <div class="fb-logo-icon">
            <svg viewBox="0 0 78 74" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.9233 6.75L20.9409 6.98047L21.2671 11.2109L21.2876 11.4795H21.0181C18.5728 11.4795 16.7978 12.0161 15.646 13.043L15.645 13.0439C14.5193 14.0435 13.7603 15.4242 13.3784 17.2041C13.0351 19.0063 12.8628 21.0491 12.8628 23.334V50.666C12.8628 52.9068 13.035 54.9497 13.3784 56.7959L13.4546 57.125C13.8568 58.7469 14.5897 60.019 15.645 60.9561L15.646 60.957C16.7978 61.9839 18.5728 62.5205 21.0181 62.5205H21.2876L21.2671 62.7891L20.9409 67.0195L20.9233 67.25H20.6919C17.2821 67.25 14.5835 66.7052 12.6196 65.5908V65.5898C10.691 64.5141 9.30913 62.7695 8.46729 60.3799C7.63076 58.0052 7.12892 54.8978 6.95459 51.0674C6.78062 47.2013 6.69385 42.512 6.69385 37C6.69385 31.4448 6.78062 26.7554 6.95459 22.9326C7.12892 19.1022 7.63076 15.9948 8.46729 13.6201C9.3094 11.2297 10.692 9.48382 12.6216 8.4082C14.5853 7.29455 17.2832 6.75002 20.6919 6.75H20.9233Z" fill="white"/>
              <path d="M57.1958 6.75C60.6014 6.75002 63.2774 7.29382 65.1987 8.40723C67.172 9.48219 68.5776 11.2279 69.4204 13.6201C70.2569 15.9948 70.7588 19.1022 70.9331 22.9326C71.1071 26.7554 71.1938 31.4448 71.1938 37C71.1938 42.512 71.1071 47.2013 70.9331 51.0674C70.7588 54.8978 70.2569 58.0052 69.4204 60.3799C68.5777 62.772 67.1728 64.5178 65.1997 65.5928L65.1987 65.5918C63.2774 66.7054 60.6017 67.25 57.1958 67.25H56.9644L56.9468 67.0195L56.6206 62.7891L56.6001 62.5205H56.8696C59.3609 62.5205 61.1325 61.983 62.2388 60.96L62.2427 60.9561C63.3668 59.958 64.1037 58.5795 64.4429 56.8018L64.4438 56.7969L64.5796 56.0957C64.876 54.4373 65.0249 52.6277 65.0249 50.666V23.334C65.0249 21.0484 64.8304 19.0055 64.4438 17.2041L64.4429 17.1982C64.1037 15.4205 63.3668 14.042 62.2427 13.0439L62.2388 13.04C61.1325 12.017 59.3609 11.4795 56.8696 11.4795H56.6001L56.6206 11.2109L56.9468 6.98047L56.9644 6.75H57.1958Z" fill="white"/>
              <path d="M51.5562 13.9082V18.9639H41.978V59.9619H35.8745V18.9639H26.2964V13.9082H51.5562Z" fill="white"/>
            </svg>
          </div>
          <span class="fb-name">ClampType</span>
        </div>
        <p class="fb-desc">Free fluid typography scale generator — use in your browser or install the Figma plugin. Generate mathematically perfect CSS clamp() scales, 9 type levels, 20+ global scripts, zero API.</p>
        <div class="fb-elustra">
          <span class="fb-elustra-lbl">Presented by</span>
          <svg class="fb-elustra-logo" viewBox="0 0 275 60" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Elustra">
            <path d="M15.1085 25.5591L34.8545 25.2343V32.1673L15.1085 31.8425V50.4685H31.9209L36.7953 49.5837L38.7473 42.4827L42.8094 42.0795C42.753 43.0987 42.6965 44.174 42.6514 45.3052C42.595 46.2684 42.5386 47.3101 42.4934 48.4077C42.437 49.5053 42.4145 50.6029 42.4145 51.6782C42.4145 52.5966 42.437 53.5486 42.4934 54.5455C42.5499 55.5423 42.6063 56.4159 42.6514 57.1663C42.7078 58.1296 42.753 59.0704 42.8094 59.9888L38.7473 59.5072L38.4201 58.4544C38.2621 58.1296 38.0365 57.8719 37.7657 57.6927C37.4949 57.5023 37.2015 57.4127 36.8743 57.4127H0.0789841L0.485188 53.3806L5.1114 51.5214L6.65723 47.6461V9.43065C6.65723 9.16185 6.58953 8.89304 6.45413 8.62423C6.31873 8.35542 6.05921 8.16502 5.68685 8.06422L0.406204 6.60818L0 2.57607H33.6359C33.9632 2.57607 34.2565 2.49767 34.5273 2.32966C34.7981 2.17286 35.0125 1.90405 35.1818 1.52324L35.43 0.470413L39.492 -0.0112C39.4356 0.851223 39.3792 1.71365 39.3341 2.56487C39.2777 3.25929 39.2212 4.06571 39.1761 4.98413C39.131 5.90256 39.0971 6.80978 39.0971 7.72821C39.0971 8.80344 39.1197 9.87866 39.1761 10.9539C39.2325 12.0291 39.2889 13.0259 39.3341 13.9332C39.3905 14.8964 39.4469 15.8708 39.492 16.8341L35.43 16.4308L33.478 10.3827L28.6035 9.49785H15.9209L15.1085 13.3732V25.5591Z" fill="rgba(255,255,255,0.55)"/>
            <path d="M57.9287 7.90741C57.9287 7.42579 57.8159 7.05618 57.6015 6.82098C57.3871 6.57457 56.9809 6.46257 56.3829 6.46257H52.5691L52.1629 3.31528L63.1191 0.156799L67.5084 2.32966L66.1318 9.99066V50.4797C66.1318 50.8045 66.2221 51.107 66.4139 51.4094C66.6057 51.7006 66.8652 51.9022 67.1812 52.0142L72.3038 53.3806L72.71 57.4127C71.2432 57.3567 69.7876 57.2783 68.3208 57.1663C67.0796 57.1663 65.8046 57.1439 64.507 57.0879C63.2094 57.0319 62.0923 57.0095 61.1784 57.0095C60.2644 57.0095 59.1925 57.0319 57.9739 57.0879C56.7553 57.1439 55.5818 57.1663 54.4422 57.1663C53.201 57.2783 51.8921 57.3567 50.5381 57.4127L50.9443 53.3806L57.0373 51.443L57.9287 46.6044V7.90741Z" fill="rgba(255,255,255,0.55)"/>
            <path d="M77.1787 22.5798L76.7725 19.4325L87.8979 16.2852L92.2872 18.4581L90.8203 26.1191V46.0332C90.8203 48.1277 91.1927 49.6509 91.96 50.5918C92.716 51.5326 93.8556 52.003 95.3676 52.003C96.6087 52.003 97.8951 51.723 99.2265 51.1518C100.558 50.5918 101.81 49.9421 103.006 49.2141C104.191 48.4861 105.241 47.7805 106.132 47.0749C107.023 46.3692 107.633 45.8652 107.96 45.5404V24.0359C107.96 23.5542 107.847 23.1846 107.633 22.9494C107.418 22.703 107.012 22.591 106.414 22.591H102.431L102.025 19.4437L113.15 16.2964L117.54 18.4693L116.073 26.1303V50.4798C116.073 50.8046 116.163 51.0958 116.355 51.3646C116.547 51.6334 116.829 51.8462 117.212 52.0142L121.353 53.3806L121.76 57.4127C120.349 57.3567 118.939 57.2783 117.54 57.1663C116.343 57.1663 115.114 57.1551 113.839 57.1215C112.564 57.0991 111.469 57.0767 110.544 57.0767L107.621 52.7198L107.7 51.5886C105.692 53.5262 103.379 55.1727 100.75 56.5503C98.1207 57.9168 95.3789 58.6112 92.5016 58.6112C89.3648 58.6112 86.9388 57.6815 85.235 55.8335C83.5312 53.9854 82.6737 51.275 82.6737 47.7245V24.0359C82.6737 23.5542 82.5609 23.1846 82.3465 22.9494C82.1321 22.703 81.7259 22.591 81.1279 22.591H77.1448L77.1787 22.5798Z" fill="rgba(255,255,255,0.55)"/>
            <path d="M153.906 28.4264C152.958 29.4792 151.83 30.2632 150.532 30.8008C149.28 30.2632 148.174 29.468 147.203 28.4264C146.233 27.3735 145.421 26.2647 144.766 25.0775C145.037 24.5959 145.33 24.1254 145.658 23.6662C145.985 23.207 146.335 22.7702 146.718 22.3334C145.962 22.0086 145.24 21.7846 144.563 21.6502C143.886 21.5158 143.164 21.4486 142.408 21.4486C140.512 21.4486 139.012 21.8518 137.895 22.6582C136.789 23.4646 136.225 24.4838 136.225 25.7271C136.225 26.5895 136.507 27.3847 137.082 28.1015C137.646 28.8296 138.391 29.5128 139.316 30.1624C140.242 30.812 141.347 31.4504 142.645 32.1001C143.943 32.7497 145.33 33.4441 146.786 34.1945C148.14 34.8889 149.449 35.6393 150.724 36.4122C151.999 37.1962 153.105 38.0474 154.052 38.9882C155 39.9291 155.768 41.0267 156.366 42.2923C156.964 43.558 157.257 45.0252 157.257 46.6828C157.257 48.3405 156.896 49.9085 156.162 51.3646C155.429 52.8206 154.391 54.075 153.037 55.1503C151.683 56.2255 150.081 57.0767 148.242 57.6927C146.402 58.3088 144.371 58.6224 142.148 58.6224C140.309 58.6224 138.56 58.4096 136.913 57.9727C135.266 57.5471 133.776 56.9759 132.445 56.2815C131.113 55.5871 129.929 54.7583 128.868 53.8174C127.807 52.8766 126.927 51.891 126.228 50.8718L129.804 47.0861C131.7 49.1805 133.675 50.6702 135.739 51.5662C137.793 52.451 139.824 52.899 141.833 52.899C144.112 52.899 145.883 52.3726 147.158 51.331C148.433 50.2781 149.065 49.0573 149.065 47.6573C149.065 46.694 148.806 45.854 148.298 45.1596C147.779 44.4652 147.034 43.8044 146.064 43.1884C145.093 42.5723 143.852 41.9115 142.363 41.2171C140.873 40.5227 139.158 39.6267 137.206 38.5514C136.337 38.1258 135.378 37.5546 134.318 36.8602C133.257 36.1658 132.253 35.3257 131.316 34.3625C130.369 33.3993 129.579 32.2793 128.958 31.0136C128.338 29.748 128.022 28.3144 128.022 26.7015C128.022 25.0887 128.349 23.6886 128.992 22.3446C129.646 21.0006 130.549 19.8581 131.711 18.9173C132.873 17.9765 134.295 17.2373 135.976 16.6996C137.658 16.162 139.474 15.8932 141.415 15.8932C144.935 15.8932 147.892 16.6884 150.273 18.2677C152.653 19.8581 154.684 22.1206 156.366 25.0775C155.666 26.2647 154.831 27.3735 153.883 28.4264H153.906Z" fill="rgba(255,255,255,0.55)"/>
            <path d="M169.545 22.9046L162.154 23.3078V18.1445L169.545 17.1813L171.982 5.00653H177.669V17.1813L192.45 17.1029V23.3078L177.669 23.0614V45.798C177.669 47.6797 177.985 49.1021 178.606 50.0765C179.226 51.0398 180.4 51.5326 182.137 51.5326C183.277 51.5326 184.45 51.3086 185.669 50.8494C186.888 50.3901 188.445 49.5725 190.34 48.3853L192.45 52.7422C190.498 54.7359 188.467 56.2143 186.357 57.1775C184.247 58.1407 182.182 58.6336 180.185 58.6336C178.718 58.6336 177.342 58.3648 176.044 57.8271C174.747 57.2895 173.607 56.5391 172.637 55.5647C171.666 54.6014 170.899 53.4366 170.357 52.0926C169.816 50.7485 169.545 49.2701 169.545 47.6573V22.9046Z" fill="rgba(255,255,255,0.55)"/>
            <path d="M205.133 24.0358C205.133 23.5542 205.02 23.1846 204.806 22.9494C204.591 22.703 204.185 22.591 203.587 22.591H199.773L199.367 19.4437L210.335 16.2964L214.724 18.4693L214.069 22.3446C215.909 20.5749 218.007 19.0517 220.366 17.7861C222.724 16.5204 225.251 15.8932 227.959 15.8932C229.313 16.5876 230.453 17.3941 231.367 18.3125C232.292 19.2309 233.105 20.3285 233.804 21.6166C233.15 22.8038 232.337 23.9238 231.367 24.9991C230.397 26.0743 229.257 26.8807 227.959 27.4183C226.933 26.9367 225.985 26.2871 225.116 25.4807C224.247 24.6743 223.491 23.7558 222.837 22.7366C221.81 23.0614 220.772 23.4982 219.745 24.0694C218.718 24.6295 217.77 25.2231 216.902 25.8391C216.033 26.4551 215.288 27.0487 214.667 27.6087C214.047 28.1687 213.596 28.5944 213.325 28.8632V50.4797C213.325 50.8045 213.415 51.107 213.607 51.4094C213.799 51.7006 214.058 51.9022 214.374 52.0142L220.309 53.3806L220.715 57.4127C219.091 57.3567 217.488 57.2783 215.92 57.1663C214.622 57.1663 213.268 57.1439 211.858 57.0879C210.447 57.0319 209.285 57.0095 208.36 57.0095C207.435 57.0095 206.374 57.0319 205.156 57.0879C203.937 57.1439 202.763 57.1663 201.624 57.1663C200.383 57.2783 199.074 57.3567 197.72 57.4127L198.126 53.3806L204.219 51.443L205.11 46.6044V24.0358H205.133Z" fill="rgba(255,255,255,0.55)"/>
            <path d="M248.394 28.5496C247.446 29.5688 246.318 30.3752 245.02 30.9688C243.768 30.3752 242.662 29.5688 241.692 28.5496C240.721 27.5303 239.875 26.3991 239.175 25.1671C240.913 22.2102 243.181 19.9253 246.002 18.3125C248.823 16.6996 252.016 15.8932 255.593 15.8932C257.489 15.8932 259.26 16.1396 260.919 16.6212C262.566 17.1029 264.022 17.8645 265.263 18.8837C266.504 19.9029 267.497 21.1686 268.23 22.6694C268.964 24.1702 269.325 25.9175 269.325 27.9111V50.4909C269.325 50.8158 269.415 51.107 269.607 51.3758C269.799 51.6446 270.081 51.8574 270.464 52.0254L274.605 53.3918L275.012 57.4239C273.601 57.3679 272.191 57.2895 270.792 57.1775C269.596 57.1775 268.366 57.1663 267.091 57.1327C265.816 57.1103 264.721 57.0879 263.796 57.0879C263.582 56.7631 263.39 56.4719 263.232 56.2031C263.017 55.9343 262.814 55.6543 262.622 55.3519C262.431 55.0607 262.261 54.7695 262.092 54.5007C260.524 55.8447 258.854 56.8639 257.094 57.5695C255.333 58.264 253.37 58.6224 251.204 58.6224C249.037 58.6224 247.277 58.3088 245.596 57.6927C243.915 57.0767 242.482 56.2143 241.285 55.1167C240.089 54.019 239.164 52.7086 238.487 51.2078C237.81 49.7069 237.472 48.0605 237.472 46.2908C237.472 44.2524 237.923 42.4043 238.814 40.7691C239.706 39.1338 240.936 37.7338 242.515 36.5802C244.084 35.4265 245.9 34.5193 247.954 33.8809C250.008 33.2313 252.208 32.9177 254.532 32.9177H261.189V28.8072C261.189 26.5447 260.512 24.7639 259.158 23.4422C257.804 22.1318 255.988 21.471 253.72 21.471C252.907 21.471 252.118 21.5494 251.362 21.7174C250.606 21.8742 249.85 22.1766 249.082 22.6022C249.41 23.0278 249.703 23.4646 249.974 23.8902C250.245 24.3158 250.515 24.7527 250.786 25.1783C250.132 26.4103 249.342 27.5415 248.394 28.5496ZM261.189 39.1114L255.017 39.3578C252.253 39.4698 250.087 40.1643 248.518 41.4523C246.95 42.7403 246.16 44.4316 246.16 46.5372C246.16 48.3629 246.781 49.9085 248.033 51.1742C249.274 52.4398 250.899 53.067 252.907 53.067C254.476 53.067 255.931 52.6526 257.252 51.8126C258.583 50.9838 259.892 49.8077 261.189 48.3069V39.1114Z" fill="rgba(255,255,255,0.55)"/>
          </svg>
        </div>
      </div>
      <div class="ft-links">
        <a class="ft-link" href="#generator">Web Generator</a>
        <a class="ft-link" href="#how">How It Works</a>
        <a class="ft-link" href="#features">Features</a>
        <a class="ft-link" href="#outputs">Outputs</a>
        <a class="ft-link" href="#scripts">Scripts</a>
        <a class="ft-link" href="https://www.figma.com/community/plugin/1612318883144152924" target="_blank">Install on Figma</a>
        <a class="ft-link" href="https://wa.me/918888241144" target="_blank">Contact Us</a>
      </div>
    </div>
    <div class="fb-bot">
      <span class="fb-copy">© Copyright Elustra 2026 | Mithil Mogare · All rights reserved</span>
    </div>
  </div>
</footer>

<!-- WHATSAPP STICKY -->
<a class="wa-sticky" href="https://wa.me/918888241144?text=Hi%21%20I%20need%20help%20with%20ClampType." target="_blank" rel="noopener noreferrer">
  <svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a9 9 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12 0C5.373 0 0 5.373 0 12c0 2.125.557 4.12 1.529 5.855L0 24l6.335-1.51A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22a9.945 9.945 0 0 1-5.193-1.374L3 21.5l.893-3.667A9.959 9.959 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
  </svg>
  <div class="wa-label">
    <span class="wa-label-main">Contact Us</span>
    <span class="wa-label-sub">+91 88882 41144</span>
  </div>
</a>

<script>
var S={base:16,ratio:1.25,vpMin:320,vpMax:1440,fluidLevel:0,scale:[],customText:''};

var LEVELS=[
  {name:'fs/h1',tag:'H1',exp:4},{name:'fs/h2',tag:'H2',exp:3},{name:'fs/h3',tag:'H3',exp:2},
  {name:'fs/h4',tag:'H4',exp:1},{name:'fs/h5',tag:'H5',exp:0},{name:'fs/h6',tag:'H6',exp:-1},
  {name:'fs/body',tag:'Body',exp:-1},{name:'fs/caption',tag:'Caption',exp:-2},{name:'fs/cta',tag:'CTA',exp:0}
];

var SCRIPTS=[
  {id:'en',label:'English',sys:'Latin',dir:'ltr',def:'The quick brown fox jumps over the lazy dog. Typography speaks before words do.'},
  {id:'de',label:'German',sys:'Latin+',dir:'ltr',def:'Donaudampfschifffahrtsgesellschaftskapitän — Typografie spricht, bevor Worte es tun.'},
  {id:'fr',label:'French',sys:'Latin',dir:'ltr',def:"La typographie parle avant que les mots ne soient lus. Une belle mise en page séduit d'emblée."},
  {id:'es',label:'Spanish',sys:'Latin',dir:'ltr',def:'La buena tipografía es un mensaje visual. El texto hermoso habla antes que las palabras.'},
  {id:'pt',label:'Portuguese',sys:'Latin',dir:'ltr',def:'A boa tipografia é uma mensagem visual. O texto bonito fala antes das palavras.'},
  {id:'it',label:'Italian',sys:'Latin',dir:'ltr',def:'La buona tipografia è un messaggio visivo. Il bello testo parla prima delle parole.'},
  {id:'nl',label:'Dutch',sys:'Latin+',dir:'ltr',def:'Goede typografie is een visuele boodschap. Mooie tekst spreekt voor de woorden.'},
  {id:'fi',label:'Finnish',sys:'Latin+',dir:'ltr',def:'Lentokonesuihkuturbiinimoottoriapumekaanikkoaliupseerioppilas — hyvä typografia.'},
  {id:'pl',label:'Polish',sys:'Latin+',dir:'ltr',def:'Dobra typografia to wizualny komunikat. Piękny tekst mówi zanim słowa zostaną przeczytane.'},
  {id:'ru',label:'Russian',sys:'Cyrillic',dir:'ltr',def:'Хорошая типографика — это визуальное сообщение. Красивый текст говорит раньше слов.'},
  {id:'uk',label:'Ukrainian',sys:'Cyrillic',dir:'ltr',def:'Хороша типографіка — це візуальне повідомлення. Гарний текст говорить раніше слів.'},
  {id:'el',label:'Greek',sys:'Greek',dir:'ltr',def:'Η καλή τυπογραφία είναι ένα οπτικό μήνυμα. Το όμορφο κείμενο μιλά πριν από τις λέξεις.'},
  {id:'ar',label:'Arabic',sys:'Arabic',dir:'rtl',def:'الطباعة الجيدة هي الرسالة المرئية. النص الجميل يتحدث قبل أن تُقرأ الكلمات.'},
  {id:'fa',label:'Persian / Farsi',sys:'Arabic',dir:'rtl',def:'تایپوگرافی خوب یک پیام بصری است. متن زیبا پیش از خواندن کلمات صحبت می‌کند.'},
  {id:'ur',label:'Urdu',sys:'Arabic',dir:'rtl',def:'اچھی ٹائپوگرافی ایک بصری پیغام ہے۔ خوبصورت متن الفاظ سے پہلے بولتا ہے۔'},
  {id:'he',label:'Hebrew',sys:'Hebrew',dir:'rtl',def:'טיפוגרפיה טובה היא מסר ויזואלי. הטקסט היפה מדבר לפני שהמילים נקראות.'},
  {id:'hi',label:'Hindi',sys:'Devanagari',dir:'ltr',def:'अच्छी टाइपोग्राफी एक दृश्य संदेश है। सुंदर पाठ शब्दों से पहले बोलता है।'},
  {id:'mr',label:'Marathi',sys:'Devanagari',dir:'ltr',def:'चांगले टायपोग्राफी एक दृश्य संदेश आहे. सुंदर मजकूर शब्दांआधी बोलतो.'},
  {id:'ta',label:'Tamil',sys:'Tamil',dir:'ltr',def:'நல்ல டைப்போகிராஃபி ஒரு காட்சி செய்தி. அழகான உரை வார்த்தைகளுக்கு முன் பேசுகிறது.'},
  {id:'te',label:'Telugu',sys:'Telugu',dir:'ltr',def:'మంచి టైపోగ్రఫీ ఒక దృశ్య సందేశం. అందమైన వచనం పదాలకు ముందే మాట్లాడుతుంది.'},
  {id:'kn',label:'Kannada',sys:'Kannada',dir:'ltr',def:'ಉತ್ತಮ ಟೈಪೋಗ್ರಫಿ ಒಂದು ದೃಶ್ಯ ಸಂದೇಶ. ಸುಂದರ ಪಠ್ಯ ಪದಗಳಿಗಿಂತ ಮುಂಚೆ ಮಾತನಾಡುತ್ತದೆ.'},
  {id:'ml',label:'Malayalam',sys:'Malayalam',dir:'ltr',def:'നല്ല ടൈപ്പോഗ്രഫി ഒരു ദൃശ്യ സന്ദേശമാണ്. മനോഹരമായ ടെക്സ്റ്റ് വാക്കുകൾക്ക് മുമ്പ് സംസാരിക്കുന്നു.'},
  {id:'gu',label:'Gujarati',sys:'Gujarati',dir:'ltr',def:'સારી ટાઇપોગ્રાફી એ દ્રશ્ય સંદેશ છે. સુંદર ટેક્સ્ટ શબ્દો પહેલા બોલે છે.'},
  {id:'bn',label:'Bengali',sys:'Bengali',dir:'ltr',def:'ভালো টাইপোগ্রাফি একটি দৃশ্যমান বার্তা। সুন্দর পাঠ্য শব্দের আগে কথা বলে।'},
  {id:'pa',label:'Punjabi',sys:'Gurmukhi',dir:'ltr',def:'ਚੰਗੀ ਟਾਈਪੋਗ੍ਰਾਫੀ ਇੱਕ ਦ੍ਰਿਸ਼ਟੀਗਤ ਸੁਨੇਹਾ ਹੈ। ਸੁੰਦਰ ਪਾਠ ਸ਼ਬਦਾਂ ਤੋਂ ਪਹਿਲਾਂ ਬੋਲਦਾ ਹੈ।'},
  {id:'zh',label:'Chinese (Simp)',sys:'CJK',dir:'ltr',def:'良好的字体排版是视觉信息传达。美丽的文字在语言之前表达思想。'},
  {id:'ja',label:'Japanese',sys:'CJK',dir:'ltr',def:'良いタイポグラフィは視覚的なメッセージです。美しいテキストは言葉の前に語りかけます。'},
  {id:'ko',label:'Korean',sys:'Hangul',dir:'ltr',def:'좋은 타이포그래피는 시각적 메시지입니다. 아름다운 텍스트는 말보다 먼저 이야기합니다.'},
  {id:'th',label:'Thai',sys:'Thai',dir:'ltr',def:'การออกแบบตัวอักษรที่ดีคือข้อความที่มองเห็น ข้อความที่สวยงามพูดก่อนคำพูด'},
  {id:'emoji',label:'Emoji',sys:'Emoji',dir:'ltr',def:'✨ Typography 🎨 speaks 💬 before 🔤 words 🚀 — ClampType 📐 makes 🔥 every 💡 scale ✅ fluid 🌊'}
];

var activeScriptIdx=0;

function clampVal(base,ratio,exp,vpMin,vpMax){
  var minPx=+(base*Math.pow(ratio,exp)).toFixed(2);
  var maxPx=+(base*Math.pow(ratio,exp+1)).toFixed(2);
  var minRem=+(minPx/16).toFixed(4);
  var maxRem=+(maxPx/16).toFixed(4);
  var slope=(maxPx-minPx)/(vpMax-vpMin);
  var intercept=minPx-slope*vpMin;
  var slopePct=+(slope*100).toFixed(4);
  var intRem=+(intercept/16).toFixed(4);
  return{minPx:minPx,maxPx:maxPx,minRem:minRem,maxRem:maxRem,clamp:'clamp('+minRem+'rem, '+slopePct+'vi + '+intRem+'rem, '+maxRem+'rem)'};
}
function fluidPx(item,vp){
  var slope=(item.maxPx-item.minPx)/(S.vpMax-S.vpMin);
  return Math.min(Math.max(slope*vp+item.minPx-slope*S.vpMin,item.minPx),item.maxPx);
}
function getText(fallback){return S.customText||(fallback||'ClampType');}

function recalc(){
  S.base=parseFloat(document.getElementById('base').value)||16;
  S.ratio=parseFloat(document.getElementById('ratio').value)||1.25;
  S.vpMin=parseInt(document.getElementById('vp-min').value)||320;
  S.vpMax=parseInt(document.getElementById('vp-max').value)||1440;
  document.getElementById('hint-base').textContent=S.base+'px';
  document.getElementById('scale-info').textContent=S.vpMin+' → '+S.vpMax+'px';
  document.getElementById('tbl-meta').textContent='Base '+S.base+'px · Ratio '+S.ratio.toFixed(3);
  S.scale=LEVELS.map(function(lv){